Bootstrap Grid

Bootstrap provides a grid system to create layouts on the web page. Using this grid layout elements can be organized in a responsive manner.

Bootstrap grid provides a 12 column layout. These columns are classified into four different groups for extra small devices, small devices, medium devices and large devices based on the device width.

• Extra small devices are <768 px and class prefix is .col-xs-
• Small devices are >= 768 px and class prefix is .col-sm-
• Medium devices are >=992px and class prefix is .col-md-
• Large devices are >= 1200px and class prefix is .col-lg-

Based on the above definition the columns will resize automatically in a responsive manner.

How to Create a Bootstrap Grid

Rows should have a class named "row" and colums should have classes based on device that is targeted as default followed by number of columns to span.

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

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

First star should in above template should be either xs or sm or md or lg. The next star can be a number from 1 to 12. If the number is 1 then the width of the column is one unit based on the device chosen. If for example the number is given as 2 then the width of that column should take two columns width. Single unit column size is decided based on the device we have chosen. If the number chosen is 12, then the column will span the complete width of the container and it means that there is only one column for the whole width.

We can add multiple classes for each devices to the same column and so that the columns will get automatically organized based on the devices.

Bootstrap Grid Example: 3 Rows

Following is a bootrstrap grid example for first row with four columns and second row with three columns. We have chosen small device and the columns will realign responsively based on the real device.

<div class="row">
        <div class="col-sm-3">Bootstrap Grid Row1 Column 1</div>
        <div class="col-sm-3">Bootstrap Grid Row 1 Column 2</div>
        <div class="col-sm-3">Bootstrap Grid Row 1 Column 3</div>
        <div class="col-sm-3">Bootstrap Grid Row 1 Column 4</div>  
</div>
 <div class="row">
        <div class="col-sm-4">Bootstrap Grid Row 2 Column 1</div>
        <div class="col-sm-4">Bootstrap Grid Row 2 Column 2</div>
        <div class="col-sm-4">Bootstrap Grid Row 2 Column 3</div>
</div>