Bootstrap Grid System The Bootstrap grid system is the fastest What is the guiding grid system
Guide grid system provides a quick and easy way to create an adaptive site layout. Correspondingly, the default boot fixed grid system 2.x previously, the new version, the boot 3 introduces flexible movement of the first fluid grid, extended to 12 as appropriate equipment or, as the system size increases.
3 includes a guide for a different type, such as mobile phones, tablets, laptops and desktop machines. For example, to quickly create predefined grid layout grid type of equipment, you can use .COL-XS- * class to create additional small devices like mobile phones grid columns, the same as .COL-SM for small-screen tablet device – * class, .COL-MD- * class medium-sized devices, such as desktop and .COL-LG- * for large desktop screen. The following table summarizes some of the main features of the new grid system

Features
Bootstrap 3 Grid System
Extra small devices
Phones (<768px)
Small devices
Tablets (≥768px)
Medium devices
Desktops (≥992px)
Large devices
Desktops (≥1200px)
Max container width
None (auto) 750px 970px 1170px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Max column width Auto ~62px ~81px ~97px
Gutter width 15px on each side of a column (i.e. 30px)

 

he above table shows an important thing, in the application of any .COL-SM- * element not only affect the shape on small devices, but also for having a screen size of greater than or equal to 768px medium and large equipment (such as ≥768px) if .COL-MD- * and .COL-LG- * class does not exist. Similarly, .COL-MD- * grade will not only affect the elements of the device modeling, and for large equipment, if .COL-LG- * class does not exist.
The question now is how to use this column to create a grid system 12 in response to the rows and columns. The answer is simple, you first create a line acts as a class and use .container columns packaging container, followed by the inner .row class container lines are created, and you can create a column class .COL-XS- use any line * ,. COL- SM – * ,. COL-MD- * and .COL-LG- *. Column is the actual content of the field, we will put our content. Let’s put all these things into action.


&amp;lt;div class="container"&amp;gt;
    &amp;lt;!--Row with two equal columns--&amp;gt;


&amp;lt;div class="row"&amp;gt;


&amp;lt;div class="col-sm-6"&amp;gt;&amp;lt;!--Column left--&amp;gt;&amp;lt;/div&amp;gt;




&amp;lt;div class="col-sm-6"&amp;gt;&amp;lt;!--Column right--&amp;gt;&amp;lt;/div&amp;gt;


    &amp;lt;/div&amp;gt;


    
    &amp;lt;!--Row with two columns divided in 1:2 ratio--&amp;gt;


&amp;lt;div class="row"&amp;gt;


&amp;lt;div class="col-sm-4"&amp;gt;&amp;lt;!--Column left--&amp;gt;&amp;lt;/div&amp;gt;




&amp;lt;div class="col-sm-8"&amp;gt;&amp;lt;!--Column right--&amp;gt;&amp;lt;/div&amp;gt;


    &amp;lt;/div&amp;gt;


    
    &amp;lt;!--Row with two columns divided in 1:3 ratio--&amp;gt;


&amp;lt;div class="row"&amp;gt;


&amp;lt;div class="col-sm-3"&amp;gt;&amp;lt;!--Column left--&amp;gt;&amp;lt;/div&amp;gt;




&amp;lt;div class="col-sm-9"&amp;gt;&amp;lt;!--Column right--&amp;gt;&amp;lt;/div&amp;gt;


    &amp;lt;/div&amp;gt;


&amp;lt;/div&amp;gt;


Tip:Open the output of all grid examples inside the CodeLab editor in a new blank tab (click the New Window link next to “Show Output” button) and resize the browser window to understand how the Bootstrap responsive grid system works.

Since Bootstrap grid system is based on 12 columns, so to keep the columns in a one line (i.e. side by side), the sum of the grid column numbers in each row should be equal to 12. If you see the above example carefully you will find the numbers of grid columns (i.e. col-sm-*) add up to twelve (6+6, 4+8 and 3+9) for every row.

Creating Three Column Layouts

Similarly, you can create other layouts based on the above principle. The following example will typically create three column layouts for laptops and desktops screens. It also works in tablets in landscape mode if screen resolution is more than or equal to 992 pixels (e.g. Apple iPad). However, in portrait mode it will be horizontal as usual.

&amp;lt;div class="container"&amp;gt;
    &amp;lt;!--Row with three equal columns--&amp;gt;

&amp;lt;div class="row"&amp;gt;

&amp;lt;div class="col-md-4"&amp;gt;&amp;lt;!--Column left--&amp;gt;&amp;lt;/div&amp;gt;


&amp;lt;div class="col-md-4"&amp;gt;&amp;lt;!--Column middle--&amp;gt;&amp;lt;/div&amp;gt;


&amp;lt;div class="col-md-4"&amp;gt;&amp;lt;!--Column right--&amp;gt;&amp;lt;/div&amp;gt;

    &amp;lt;/div&amp;gt;

    
    &amp;lt;!--Row with three columns divided in 1:4:1 ratio--&amp;gt;

&amp;lt;div class="row"&amp;gt;

&amp;lt;div class="col-md-2"&amp;gt;&amp;lt;!--Column left--&amp;gt;&amp;lt;/div&amp;gt;


&amp;lt;div class="col-md-8"&amp;gt;&amp;lt;!--Column middle--&amp;gt;&amp;lt;/div&amp;gt;


&amp;lt;div class="col-md-2"&amp;gt;&amp;lt;!--Column right--&amp;gt;&amp;lt;/div&amp;gt;

    &amp;lt;/div&amp;gt;

    
    &amp;lt;!--Row with three columns divided unevenly--&amp;gt;

&amp;lt;div class="row"&amp;gt;

&amp;lt;div class="col-md-3"&amp;gt;&amp;lt;!--Column left--&amp;gt;&amp;lt;/div&amp;gt;


&amp;lt;div class="col-md-7"&amp;gt;&amp;lt;!--Column middle--&amp;gt;&amp;lt;/div&amp;gt;


&amp;lt;div class="col-md-2"&amp;gt;&amp;lt;!--Column right--&amp;gt;&amp;lt;/div&amp;gt;

    &amp;lt;/div&amp;gt;

&amp;lt;/div&amp;gt;

 

Note:If more than 12 grid columns are placed within a single row, then each group of extra columns, as a whole, will wrap onto a new line.
Guide column layout and packaging functions
Now, we want to create change based on the size of the viewport in the column direction more flexible layout. The following example creates a three-column layout, such as laptop and desktop devices, as well as the tablet in landscape mode (such as the Apple iPad), but small devices like the tablet in portrait mode, it will become a two-column layout, wherein the third column to the bottom in the first two columns.




&lt;div class="container"&gt;




&lt;div class="row"&gt;




&lt;div class="col-sm-3 col-md-2"&gt;&lt;!--Column one--&gt;&lt;/div&gt;








&lt;div class="col-sm-9 col-md-8"&gt;&lt;!--Column two--&gt;&lt;/div&gt;








&lt;div class="col-sm-12 col-md-2"&gt;&lt;!--Column three--&gt;&lt;/div&gt;




    &lt;/div&gt;




&lt;/div&gt;




As you can see in the example above the sum of small grid column numbers (i.e. col-sm-*) is 3 + 9 + 12 = 24 > 12, so the third

element with the class .col-sm-12 that is adding the extra columns beyond the maximum 12 columns in a .row, gets wrapped onto a new line as one contiguous unit on small devices having the viewport width less than the 992 pixels.
Similarly, you can create even more adaptable layouts for your websites and applications using the Bootstrap’s grid column wrapping feature. In the next section, we’ll discuss the other aspect of this feature. Here’re some ready to use Bootstrap grid examples.
Creating Multi-Column Layouts with Bootstrap 3 Grid System
With the new Bootstrap 3 mobile first grid system you can easily control how your website layout will render on different types of devices that have different screen sizes like cell phones, tablets, desktops, etc. Let’s consider the following illustration.

Further, in the above description means a total of 12 have all the content box, but like the layout of the mobile device appear as having a row and 12 placed in a grid layout above one another according to their location and device screen size changes in the tablet PC is rendered to have a grid layout 2 6 rows and two columns. In addition, the screen size of the device, such as laptops and desktops on the show for it in the big screen as a desktop device 3 and the fourth row of large, it was finally rendered to have four-poster three rows three grid layout column grid layout.
The question now is how we can use this new mobile guide grid system to create a first response to this layout. Let’s start with the media device may be a normal desktop or laptop computer. Because our media device layout has three rows 4 3×4 grid layout that is, so to make the HTML code of this grid structure would be like this.


&lt;div class="container"&gt;


&lt;div class="row"&gt;


&lt;div class="col-md-4"&gt;

Box 1
&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 2
&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 3
&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 4
&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 5
&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 6
&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 7
&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 8
&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 9
&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 10
&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 11
&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 12
&lt;/div&gt;


    &lt;/div&gt;


If you see the above example the output of a laptop or desktop screen with or, as the width is greater than or equal to 992px and less than 1200 pixels, you will find it has four rows, each row has led to 3×4 grid layout 3 equal columns .
But just wait, the above example has a major alignment problem. If the height of the column is higher than any other incorrect and broke clear layout. To resolve this problem, use a combination of response .clearfix classes and utility classes.


&lt;div class="container"&gt;


&lt;div class="row"&gt;


&lt;div class="col-md-4"&gt;

Box 1
&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 2
&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 3
&lt;/div&gt;




&lt;div class="clearfix visible-md-block"&gt;&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 4
&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 5
&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 6
&lt;/div&gt;




&lt;div class="clearfix visible-md-block"&gt;&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 7
&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 8
&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 9
&lt;/div&gt;




&lt;div class="clearfix visible-md-block"&gt;&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 10
&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 11
&lt;/div&gt;




&lt;div class="col-md-4"&gt;

Box 12
&lt;/div&gt;


    &lt;/div&gt;


&lt;/div&gt;


Since the default grid system has 12 columns and in our layout sum of the every three column number, i.e. col-md-* is equal to 12 that’s why we cleared columns after every third occurrence. In any other scenario where columns numbers are different for every column you should use .clearfix after the column that makes the complete 12 column grid.

Note:The responsive utility class .visible-md-block makes the .clearfix class effective only on medium size devices and it is hidden on other devices.

 

 

Now it’s time to customize our layout for other devices. First customize it for tablet. Since inside the tablet our layout rendered as 2×6 grids (i.e. 2 columns and 6 rows). So, go ahead and add the class .col-sm-6 on every column

&lt;div class="container"&gt;

&lt;div class="row"&gt;

&lt;div class="col-sm-6 col-md-4"&gt;

Box 1
&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 2
&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 3
&lt;/div&gt;


&lt;div class="clearfix visible-md-block"&gt;&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 4
&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 5
&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 6
&lt;/div&gt;


&lt;div class="clearfix visible-md-block"&gt;&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 7
&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 8
&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 9
&lt;/div&gt;


&lt;div class="clearfix visible-md-block"&gt;&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 10
&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 11
&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 12
&lt;/div&gt;

    &lt;/div&gt;

&lt;/div&gt;

Now, since the sum of the number of each of the two columns, i.e., COL-SM- * equal to 12, each of the columns after the second occurrence of so clear float.
Billing for small devices will be our final code after the float:

&lt;div class="container"&gt;

&lt;div class="row"&gt;

&lt;div class="col-sm-6 col-md-4"&gt;

Box 1
&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 2
&lt;/div&gt;


&lt;div class="clearfix visible-sm-block"&gt;&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 3
&lt;/div&gt;


&lt;div class="clearfix visible-md-block"&gt;&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 4
&lt;/div&gt;


&lt;div class="clearfix visible-sm-block"&gt;&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 5
&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 6
&lt;/div&gt;


&lt;div class="clearfix visible-sm-block"&gt;&lt;/div&gt;


&lt;div class="clearfix visible-md-block"&gt;&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 7
&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 8
&lt;/div&gt;


&lt;div class="clearfix visible-sm-block"&gt;&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 9
&lt;/div&gt;


&lt;div class="clearfix visible-md-block"&gt;&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 10
&lt;/div&gt;


&lt;div class="clearfix visible-sm-block"&gt;&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 11
&lt;/div&gt;


&lt;div class="col-sm-6 col-md-4"&gt;

Box 12
&lt;/div&gt;

    &lt;/div&gt;

&lt;/div&gt;

 

Tip:For convenience choose your primary target device and create layout for that device first after that add classes to make it responsive for other devices.

 

 

 

Similarly, you can customize the layout for larger devices like a large desktop screen. Here’s the final code after combining the whole process.

<div class="container">

<div class="row">

<div class="col-sm-6 col-md-4 col-lg-3">

Box 1
</div>


<div class="col-sm-6 col-md-4 col-lg-3">

Box 2
</div>


<div class="clearfix visible-sm-block"></div>


<div class="col-sm-6 col-md-4 col-lg-3">

Box 3
</div>


<div class="clearfix visible-md-block"></div>


<div class="col-sm-6 col-md-4 col-lg-3">

Box 4
</div>


<div class="clearfix visible-sm-block"></div>


<div class="clearfix visible-lg-block"></div>


<div class="col-sm-6 col-md-4 col-lg-3">

Box 5
</div>


<div class="col-sm-6 col-md-4 col-lg-3">

Box 6
</div>


<div class="clearfix visible-sm-block"></div>


<div class="clearfix visible-md-block"></div>


<div class="col-sm-6 col-md-4 col-lg-3">

Box 7
</div>


<div class="col-sm-6 col-md-4 col-lg-3">

Box 8
</div>


<div class="clearfix visible-sm-block"></div>


<div class="clearfix visible-lg-block"></div>


<div class="col-sm-6 col-md-4 col-lg-3">

Box 9
</div>


<div class="clearfix visible-md-block"></div>


<div class="col-sm-6 col-md-4 col-lg-3">

Box 10
</div>


<div class="clearfix visible-sm-block"></div>


<div class="col-sm-6 col-md-4 col-lg-3">

Box 11
</div>


<div class="col-sm-6 col-md-4 col-lg-3">

Box 12
</div>

    </div>

</div>

Tip:According to the above illustration there is no need to customize the layout for extra small devices like mobile phones; since columns on extra small devices are always horizontal and rendered as one column grid layout by default.

Offsetting the Grid Columns
You can also move grid columns to the right for alignment purpose using the column offset classes like .col-md-offset-*, .col-sm-offset-*, etc.
These classes offset the columns by simply increasing its left margin by specified number of columns. For example, the class .col-sm-offset-4 on the column .col-sm-8 moves it to the right over four columns from its original position.

div class="container">

<div class="row">

<div class="col-sm-4"></div>


<div class="col-sm-8"></div>

    </div>


<div class="row">        

<div class="col-sm-8 col-sm-offset-4"><!--Column with 4 columns offset--></div>

    </div>

</div>

Nesting of Grid Columns
The Bootstrap grid columns are nestable, that means you can put rows and columns inside an existing column. However, the formula for placing the columns will be the same, i.e. the sum of column numbers should be equal to 12 or less within a single row.

<div class="container">
<div class="row">
<div class="col-xs-8"><!--Column left--></div>
<div class="col-xs-4"><!--Column right with nested rows and columns--></div>
</div>
</div>
<div class="row"></div>
<div class="row"></div>


Bootstrap Responsive Utilities Classes
You can use the following responsive classes to enable the visibility of elements on certain devices that screen sizes falls with the specific range.
As of v3.2.0, the .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value: inline, block and inline-block.
<table class="data">
<thead>
<tr>
<th>Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<pre><code>.visible-xs-*</code></pre>
</td>
<td>Makes the element visible only on extra small devices having screen width less than <code>768px</code>. Hidden on others.</td>
</tr>
<tr>
<td>
<pre><code>.visible-sm-*</code></pre>
</td>
<td>Makes the element visible only on small devices having screen width greater than or equal to <code>768px</code> (i.e. <code>≥768px</code>) but less than <code>992px</code>. Hidden on others.</td>
</tr>
<tr>
<td>
<pre><code>.visible-md-*</code></pre>
</td>
<td>Makes the element visible only on medium devices having screen width greater than or equal to <code>992px</code> (i.e. <code>≥992px</code>) but less than <code>1200px</code>. Hidden on others.</td>
</tr>
<tr>
<td>
<pre><code>.visible-lg-*</code></pre>
</td>
<td>Makes the element visible only on large devices having screen width greater than or equal to <code>1200px</code> (i.e. <code>≥1200px</code>). Hidden on others.</td>
</tr>
</tbody>
</table>



Tip:You can also mix these classes to make the elements visible on multiple devices. For example, you can apply the class .visible-xs-* and .visible-md-* on any element to make it visible on extra small and medium devices.
<p class="visible-xs-block">This paragraph is visible only on extra small devices.</p>
<p class="visible-sm-block">This paragraph is visible only on small devices.</p>
<p class="visible-md-block">This paragraph is visible only on medium devices.</p>
<p class="visible-lg-block">This paragraph is visible only on large devices.</p>

Similarly you can use these hidden utility classes to hide the elements on certain devices.