Bootstrap Grid System overview :
Bootstrap’s grid system allows you to create layout using rows & columns .Bootstrap gird system is designed to provide the responsive layout which will be compatible to all devices as per their screen size and resolution. Just follow the bootstrap rules and enjoy the responsive development in bootstrap.
The common example for grid system containing the rows & columns is as :
Example
<div class="container"> <div class="row"> <div class="col-sm-5"> <h3>First Column</h3> Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text........ </div> <div class="col-sm-4"> <h3>Second Column</h3> Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text........ </div> <div class="col-sm-3"> <h3>Third Column</h3> Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text........ </div> </div> </div> |
Bootstrap Grid System Overview : 12 Columns
Bootstrap allows you to add maximum 12 columns in the page. All 12 columns have equal width
Example
<pre>
<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>
|
The above column will generate the 12 - column pattern. You can also group them to use as per your need.
Output
Bootstrap Grid System Overview : 2 Columns Set Example
Bootstrap allows you to divide 12 columns layout in columns set. We have shown 6 columns
Example
<pre>
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
</div>
|
Bootstrap Grid System Overview : 4 - 8 (Unequal) Columns Set Example
Bootstrap allows you to divide columns in various set layout in columns set. Here is an example of 4-8 column ie.
4 columns and 8 columns.
Example
<pre>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
|
