Tutorialsplane

Bootstrap Grid System

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>

Try it »

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>

Try it »

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>

Try it »

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>

Try it »

Gallery