Bootstrap Grid

In web design, a grid is a very effective method to create a consistent layout rapidly and effectively using HTML and CSS.

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.

Grid Rules :

•  Use rows to create horizontal groups of columns. 
• Grid columns are created by specifying the number with a maximum of twelve available columns you wish to span.  
• Content should be placed only within columns, and only columns may be immediate children of rows. 
• Predefined classes like .row and .col-xs-4 are available for quickly making grid layouts. 
• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows 

Basic Structure for Grid: 

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

  <div class="row">
 ...
  </div>

</div>
The following table summarizes how the Bootstrap grid system works across multiple devices: 

Example:

<style>
     div div div {
         background-color: red;
         border: 2px solid black;
     }
 </style>
<div class="container">
     <div class="row">
         <div class="col-md-1">.col-md-1</div>
         <div class="col-md-1">.col-md-1</div>
         <div class="col-md-1">.col-md-1</div>
         <div class="col-md-1">.col-md-1</div>
         <div class="col-md-1">.col-md-1</div>
         <div class="col-md-1">.col-md-1</div>
         <div class="col-md-1">.col-md-1</div>
         <div class="col-md-1">.col-md-1</div>
         <div class="col-md-1">.col-md-1</div>
         <div class="col-md-1">.col-md-1</div>
         <div class="col-md-1">.col-md-1</div>
         <div class="col-md-1">.col-md-1</div>
     </div>

     <div class="row">
<div class="col-md-8">.col-md-8</div>
         <div class="col-md-4">.col-md-4</div>
     </div>
     <div class="row">
         <div class="col-md-4">.col-md-4</div>
         <div class="col-md-4">.col-md-4</div>
         <div class="col-md-4">.col-md-4</div>
     </div>
     <div class="row">
         <div class="col-md-6">.col-md-6</div>
         <div class="col-md-6">.col-md-6</div>
     </div>
 </div>

Note: If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Multiple Layout of each device:
If we don't want columns to simply stack in smaller devices, use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to columns.
Example:
The following example will result in a 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large devices:

<div class="container">
    <div class="row">
        <div class="col-xs-3 col-sm-6 col-md-4">1</div>
        <div class="col-xs-9 col-sm-6 col-md-8"> 2</div>
    </div>
</div>

Column Wrapping: If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Offset Columns: Offset 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.

<div class="container-fluid">
  <div class="row">
        <div class="col-sm-4" style="background-color:yellow;border:1px solid red" >11</div>
        <div class="col-sm-8" style="background-color:yellow;border:1px solid red">12</div>
    </div>
    <div class="row">
        <div class="col-sm-2 col-sm-offset-2" style="background-color:yellow;border:1px solid red">21</div>
        <div class="col-sm-8" style="background-color:yellow;border:1px solid red">22</div>
    </div>
    <div class="row">
        <div class="col-sm-6" style="background-color:yellow;border:1px solid red">31</div>
        <div class="col-sm-3 col-sm-offset-3" style="background-color:yellow;border:1px solid red">32</div>
    </div>
</div>

Showing and Hiding based on device viewport 

Classes       Devices 
.visible-xs   Extra small (less than 768px) visible
.visible-sm  Small (up to 768 px) visible
.visible-md  Medium (768 px to 991 px) visible
.visible-lg    Larger (992 px and above) visible
.hidden-xs    Extra small (less than 768px) hidden
.hidden-sm   Small (up to 768 px) hidden
.hidden-md   Medium (768 px to 991 px) hidden

.hidden-lg     Larger (992 px and above) hidden


<div class="row">
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;">
            <span class="hidden-xs">Extra small</span>             <span class="visible-xs">✔ Visible on x-small</span>
        </div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;">
            <span class="hidden-sm">Small</span>             <span class="visible-sm">✔ Visible on small</span>
        </div>
        <div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;">
            <span class="hidden-md">Medium</span>             <span class="visible-md">✔ Visible on medium</span>
        </div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;">
            <span class="hidden-lg">Large</span>             <span class="visible-lg">✔ Visible on large</span>
        </div>
</div>

Responsive column resets: With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and responsive utility classes.

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3-1 Resize your viewport or check it out on your phone for an
example. </div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3-2</div>
        <!-- Add the extra clearfix for only the required viewport -->
        <div class="clearfix visible-xs"></div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3-3</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3-4</div>
    </div>
</div>

To center content in browser window: Provide offset which is equal from both the ends. 

<div class="row">
     <div class="col-sm-2 col-sm-offset-3" style="background-color:yellow;border:1px solid red" >11</div>
     <div class="col-sm-2" style="background-color:yellow;border:1px solid red">12</div>
     <div class="col-sm-2" style="background-color:yellow;border:1px solid red">12</div>

 </div>

Reordering the Columns (Pushing to right or pulling to left) 

<div class="row">
<div class="col-sm-4 col-sm-push-8" style="background-color:yellow;border:1px solid red">
    I was on left
</div>
<div class="col-sm-8 col-sm-pull-4" style="background-color:yellow;border:1px solid red">
    I was on right
</div>
</div>

Nesting Columns: 

•   To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col sm-* column.  
•  Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns). 

<div class="row"> 

    <div class="col-sm-9"> 

        Level 1: .col-sm-9 

        <div class="row"> 

            <div class="col-xs-8 col-sm-6"> 

                Level 2: .col-xs-8 .col-sm-6 

            </div> 

            <div class="col-xs-4 col-sm-6"> 

                Level 2: .col-xs-4 .col-sm-6 

            </div> 

        </div> 

    </div> 

</div>