Bootstrap Grid System

What is Bootstrap Grid System?
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Let us understand the above statement. Bootstrap 3 is mobile first in the sense that the code for Bootstrap now starts by targeting smaller screens like mobile devices,tablets, and then “expands” components and grids for larger screens such as laptops, desktops.

MOBILE FIRST STRATEGY :

Content

Determine what is most important:

Layout

Design to smaller widths first:

Base CSS address mobile device first, media queries address for tablet,desktops.

Progressive Enhancement :

Add elements as screen size increases.

Working of Bootstrap Grid System :

Grid systems are used for creating page layouts through a series of rows and columns that house the content. Here’s how the Bootstrap grid system works:

1) Rows must be placed within a .container class for proper alignment and padding.

2) Use rows to create horizontal groups of columns.

3) Content should be placed within columns, and only columns may be immediate children of rows.

Basic structure of grid system:

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

Nested columns:
To nest the content with the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* column. Nested rows should include a set of columns that add up to 12.In the following example, the layout has two columns, with the second one being split into three boxes over two rows.

  <div class="row">

      <div class="col-md-1" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>First Column</h4>
         <p>We are entering in the grid.</p>
      </div>

      <div class="col-md-2" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>Second Column- Split into 3 boxes</h4>
         <div class="row">
            <div class="col-md-3" style="background-color: white;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444">
               <p>We are in the first box of grid</p>
            </div>
            <div class="col-md-4" style="background-color: white;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p> We are in the second box of grid</p>
            </div>
         </div>

         <div class="row">
            <div class="col-md-5" style="background-color: white;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>We are in the third box of grid</p>
            </div>   

         </div>

      </div>

   </div>

Offset columns :
Offsets are a useful feature for more specialized layouts. They can be used to push columns over for more spacing, for example. The .col-xs=* classes don’t support offsets, but they are easily replicated by using an empty cell.To use offsets on large displays, use the .col-md-offset-* classes. These classes increase the left margin of a column by * columns where * range from 1 to 11.

  <div class="row">

      <div class="col-md-1" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>First Column</h4>
         <p>We are entering in the grid.</p>
      </div>

      <div class="col-md-2" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>Second Column- Split into 3 boxes</h4>
         <div class="row">
            <div class="col-md-3" style="background-color: white;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444">
               <p>We are in the first box of grid</p>
            </div>
            <div class="col-md-4" style="background-color: white;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p> We are in the second box of grid</p>
            </div>
         </div>

         <div class="row">
            <div class="col-md-5" style="background-color: white;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>We are in the third box of grid</p>
            </div>   

         </div>

      </div>

   </div>

 

Other related articles –
1> Bootstrap Nav-bar

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address:

Delivered by FeedBurner