Bootstrap Grid System

In graphic design, grid is a series of vertical and horizontal lines used to structure the page vertically and horizontally into margins, columns, spaces between block of types and images. The Bootstrap grid system makes page layout fast and easy. The term page layout means arranging content on a web page through a series of rows and columns. It provides useful structure for viewers, because it is easy to follow flow of content moving page down.

Working of Grid System

The rows must be placed within .container for proper alignment and padding and used to create horizontal group of columns.
The grid systems are built using columns. Columns are grid system’s smallest unit of measurement and most of the grid systems contain 12 – 16 columns.
Columns are children of rows and contains content within them.
The grid classes .row and .col-xs-4 are used for making grid layouts. Grid columns are created by using number available twelve columns we wish to span, for instance if we want to make three equal columns then we would use three .col-xs-4.
Columns create gutters i.e. space between the column content by using padding.

Grid Options

There are 4 different grid classes to define layouts:

col-xs-* :It is for extra small devices. E.g. Phones
col-sm-* :It is for small devices. E.g. Tablets
col-md-* :It is for medium devices. E.g. Desktops
col-lg-* :It is for large devices. E.g. Desktops

The following table explains how grid system works for multiple devices:

	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints
Max container width	None (auto)	750px	970px	1170px
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
No of columns	12	12	12	12
Max column width	Auto	60px	78px	95px
Gutter width	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)
nestable	Yes	Yes	Yes	Yes
Offsets	Yes	Yes	Yes	Yes
Column ordering	Yes	Yes	Yes	Yes

Media Queries

Media queries consist of media type and as of CSS3 specification, contain one or more expressions, expressed as media features such as width, height, and color. If the media type in media query matches the type of device which is being displayed on the document then the result of query will be true. Most media features can be expressed with min or max to greater or equal to or less than or equal to constraints.
Following media queries are used to create the key breakpoints in Bootstrap grid system.

For Small Devices (Tablets, ≥768px)
@media (min-width: @screen-sm-min) {. . .}

For Medium Devices (Desktops, ≥992px)
@media (min-width: @screen-md-min) {. . .}

For Large Devices (Desktops, ≥ 1200px)
@media (min-width: @screen-lg-min) {. . .}

When we see the browser width in the set of devices, we could use two media queries in the responsive css file overlap: those are setting min-width and max-width. We can have following media queries values for defining min-width and max-width in the devices:

Extra Small Devices
@media (max-width: 767px) { }

Small Devices
@media (min-width: 768px) and (max-width: 991px) { }

Medium Devices
@media (min-width: 992px) and (max-width: 1199px) { }

Large Devices
@media (min-width: 1200px) { }

Stacked-to-horizontal Example

We can use .col-md-* to create stacked-to-horizontal grid system that stacked out on mobile devices and tablet devices before displaying horizontally on the desktop devices.

<!DOCTYPE html>
<head>
<title>Grid System Example</title>
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
   <h2>Stacked-to-horizontal Example</h2>
   <div class="row">
      <div class="col-md-4" style="background-color:pink; height:150px">
         <h3>First Column</h3>
             Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
      </div>
      <div class="col-md-4" style="background-color:green; height:150px">
         <h3>Second Column</h3>
             Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
      </div>
      <div class="col-md-4" style="background-color:orange; height:150px">
         <h3>Third Column</h3>
             Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
      </div>
   </div>
   </div>
</body>
</html>

As defined in above script, the Bootstrap support for CSS and JavaScript by using bootstrap.min.css, bootstrap-theme.min.css and bootstrap.min.js CDN link files.
<div class=”container”>. . . </div> element is used to give proper width for the layout.
We can place the grid columns in row which is defined as <div class=”row”>. . . </div> and add columns <div class=”col-md-4″> </div> inside rows.
Every row is made up of 12 units. We have three columns each made up of 4 units wide. We must make ensure that sum always needs to be 12.
Run Bootstrap Stacked to Horizontal Demo

Mobile and Large Device Example

We can use col-md-*</strong and col-lg-* for creating grid system on the medium and large devices.

<!DOCTYPE html>
<head>
<title>Grid System Example</title>
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
   <h2>Mobile and Large Device Example</h2>
   <div class="row">
      <div class="col-md-6 col-lg-4" style="background-color:pink;">
         <h3>First Column</h3>
             Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. The most popular front-end framework for developing responsive, mobile first projects on the web.
             It uses HTML, CSS and Javascript. Bootstrap easily and efficiently scales your project with one code base, from phones to tablets to desktops.
      </div>
      <div class="col-md-6 col-lg-8" style="background-color:green;">
         <h3>Second Column</h3>
             Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
      </div>
   </div>
   </div>
</body>
</html>

We have used two divs. We can place the grid columns in row which is defined as <div class=”row”>. . . </div> and add columns <div class=”col-md-6″ “col-lg-4”> </div> and <div class=”col-md-6″ “col-lg-8”> </div> inside rows. When we run the above script, we will see that first column will be displayed with pink background color and second column will get display with green background color.

Run Bootstrap Mobile and Large Devices Demo

Mobile, Tablet and Desktops Example

We can even create more dynamic and powerful layout by using col-sm-* and col-lg-* where we would want to change it for mobile, tablets and desktops as well.

<!DOCTYPE html>
<head>
<title>Grid System Example</title>
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
   <h2>Mobile,Tablet and Desktop Device Example</h2>
   <div class="row">
      <div class="col-sm-6 col-md-6 col-lg-8" style="background-color:pink;">
         <h3>First Column</h3>
             <p>Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. The most popular front-end framework for developing responsive, mobile first projects on the web.</p>
      </div>
      <div class="col-sm-6 col-md-6 col-lg-4" style="background-color:green;">
         <h3>Second Column</h3>
             <p>Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
             <p>It uses HTML, CSS and Javascript. Bootstrap easily and efficiently scales your project with one code base, from phones to tablets to desktops. The most popular front-end framework for developing responsive, mobile first projects on the web.</p>
      </div>
   </div>
   </div>
</body>
</html>

We have used two divs. We can place the grid columns in row which is defined as <div class=”row”>. . . </div> and add columns < div class=”col-sm-6 col-md-6 col-lg-8″> </div> and <div class “col-sm-6 col-md-6 col-lg-4”> </div> inside rows. When we run the above script, we will see that first column will be displayed with pink background color and second column will get display with green background color.

Run Bootstrap Mobile Tablet and Desktop Demo

Responsive Column Resets

Consider there are four grids available and we must run them into the situation where all columns are not in equal size, one column is taller than the other. To resolve this, we use combination of class .clearfix and response utility classes as shown in the following example:

<!DOCTYPE html>
<head>
<title>Grid System</title>
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
   <h2>Responsive Column Reset Example</h2>
   <div class="row">
     <div class="col-xs-6 col-sm-4" style="background-color:red; height:40px">Welcome to Bootstrap!!!</div>
     <div class="col-xs-6 col-sm-4" style="background-color:pink;">Welcome to Bootstrap!!!</div>
     <div class="clearfix visible-xs"></div>
     <div class="col-xs-12 col-sm-4" style="background-color:orange;">Welcome to Bootstrap!!!</div>
   </div>
   </div>
</body>
</html>

As defined in above script, the Bootstrap support for CSS and JavaScript by using bootstrap.min.css, bootstrap-theme.min.css and bootstrap.min.js CDN link files. The <div class=”container”>. . . </div> element is used to give proper width for the layout. We can place the grid columns in row which is defined as <div class=”row”>. . . </div>. Every row is made up of 12 units. We have three columns each made up of 4 units wide.

Run Bootstrap Responsive Column Reset

Nesting of Columns

In bootstrap it’s possible to add columns within columns, which is called as nesting of columns. To nest column, add new row and set .col-md-* columns within an existing .col-md-* column. We can add columns up to 12 or less than 12.

<!DOCTYPE html>
<head>
<title>Grid System</title>
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
   <h2>Nesting of Columns</h2>
   <div class="row">
      <div class="col-md-6" style="background-color:pink;">
      <h2>First Column</h2>
         <div class="col-md-4">
         <h3>Column 1</h3>
            Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework.
         </div>
         <div class="col-md-4">
         <h3>Column 2</h3>
            Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework.
         </div>
         <div class="col-md-4">
         <h3>Column 3</h3>
            Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework.
         </div>
      </div>
   <div class="col-md-6" style="background-color:orange;">
   <h2>Second Column</h2>
      <div class="col-md-4">
      <h3>Column 1</h3>
           Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework.
      </div>
      <div class="col-md-4">
      <h3>Column 2</h3>
           Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework.
      </div>
      <div class="col-md-4">
      <h3>Column 3</h3>
           Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework.
      </div>
      </div>
   </div>
</div>
</body>
</html>

As shown in the above script, we are using container which includes row which contains the grid columns. We have used two columns which contain nesting three columns each made up of 4 units wide. When we run the script, will get first column with nesting of three columns with pink color background and second column with nesting of three columns with orange color background.

Run Bootstrap Nesting Columns Demo

Ordering of Column

It is another feature of Bootstrap which changes ordering of grid columns by using .col-md-push-* and .col-md-pull-* modifier classes. The .col-md-push-* means push the column to the right by specified number of columns and and .col-md-pull-* means push the column to the left by specified number of columns. The following example describes ordering of column by using these modifier classes:

<!DOCTYPE html>
<head>
<title>Grid System</title>
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
   <div class="row">
      <p>Before Ordering</p>
      <div class="col-md-4" style="background-color: pink;">This is left</div>
      <div class="col-md-8" style="background-color: orange;">This is right</div><br><br>
   <div class="row">
      <p>After Ordering</p>
      <div class="col-md-4 col-md-push-8" style="background-color: cyan;"> It was left </div>
      <div class="col-md-8 col-md-pull-4" style="background-color: gray;"> It was right</div>
   </div>
</div> </body>
</html>

As shown in the above script, we are using container which includes row which contains the grid columns. We are using .col-md-push-* and .col-md-pull-* modifier classes to push the column to the right by specified number of columns and pull the column to the left by specified number of columns.

Run Bootstrap Ordering of Column Demo