Bootstrap 4 Grid System

Bootstrap 4 Grid Systems

Bootstrap offers a responsive and mobile-first grid system with the help of which we can divide the screen of the web browser into 12 horizontal parts. It has predefined classes that provide easy options for creating layouts, and it also consists of mixins that helps in creating semantic layouts.

Working of Grid System

Grid System uses several numbers of rows, columns, and containers for the alignment of content. The working of the grid system is given below:-

• With the help of containers, we can center align the content of our website and provides horizontal padding. .container class is used for responsive pixel width, and .container-fluid class is used to cover the full width of the screen.
• There is a predefined class .row that should be placed within the .container class as it is used to provide alignment and padding.
• In the grid system, all contents of the site are placed within the column. Columns are the child of the rows.
• With the help of column class .col, you can create multiple horizontal groups but not more than 12.

Grid Classes

There are five grid classes in Bootstrap 4. These are as follows:-

S.No	Grid classes	Definition
1.	.col	This class is used for small devices that have a screen size of less than 576 px.
2.	.col-sm-	This class can be used for both types of devices that either have a screen size of 576 px or greater than 576px.
3.	.col-md-	It is used for the medium size devices that either has a screen width of 768px or greater.
4.	.col-lg-	This class is used for the devices that contain the large size of screens, for example, 992px or greater.
5.	.col-xl-	This class is used for the devices that contain extra-large sized screen, for example, 1200px or greater.

Equal Width Columns

Here is the example of creating equal-width columns that supports all screen size is given below:

Example

<!DOCTYPE html> <html lang="en">
 <head>
   <title>Grid Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> 
 </head>
 <body>
 <div class="container">
   <h1>Two equal width columns</h1>
   <p>This example shows two columns of equal length.</p>
   <div class="row">
     <div class="col" style="background-color: #a4a6a5; border: 2px solid black;">col 1</div>
     <div class="col" style="background-color: #a4a6a5; border: 2px solid black;">col 2</div> 
   </div>
   <h1>Three equal width columns</h1>
   <p>This example shows three columns of same width.</p>
   <div class="row">
     <div class="col" style="background-color: #a4a6a5; border: 2px solid black;">col 1</div>
     <div class="col" style="background-color: #a4a6a5; border: 2px solid black;">col 2</div>
     <div class="col" style="background-color: #a4a6a5; border: 2px solid black;">col 3</div>
   </div> 
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html> 

Output

Unequal Width Columns

Here is the example of creating unequal-width columns that support all screen size is given below:

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Unequal Grid Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 </head> 
 <body>
 <div class="container">
   <h2>Two Unequal-width Responsive Columns</h2>
   <p>When you resize the browser window you will see the effect.</p>
   <p>This grid will be automatically adjusted itself and the first column will come on top of the second column When we move the browser screen to the mobile screen size.</p>
   <div class="row">
     <div class="col-sm-4" style="background-color: #a4a6a5; border: 2px solid black;">column 1</div>
     <div class="col-sm-8" style="background-color: #a4a6a5; border: 2px solid black;">column 2</div>
   </div>
 <h2>Three Unequal-width Responsive Columns</h2>
 <p>This grid will also be automatically adjusted itself and all three columns will stack on top of each other When we move the browser screen to the mobile screen size.</p>
 <div class="row">
     <div class="col-sm-2" style="background-color: #a4a6a5; border: 2px solid black;">column 1</div>
     <div class="col-sm-4" style="background-color: #a4a6a5; border: 2px solid black;">column 2</div>
     <div class="col-sm-6" style="background-color: #a4a6a5; border: 2px solid black;">column 3</div>
 </div>
 </div> 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>   
 </body>
 </html> 

Output