Bootstrap Grid System

Bootstrap grid system provides the quick and easy way to create responsive website layouts. As opposed to the previous Bootstrap 2.x grid system which is fixed by default, the new version, i.e. Bootstrap 3 introduces the responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Bootstrap 3 includes predefined grid classes for quickly making grid layouts for different types of devices like cell phones, tablets, laptops and desktops, etc. For example, you can use the .col-xs-* class to create grid columns for extra small devices like cell phones, similarly the .col-sm-* class for small screen devices like tablets, the .col-md-* class for medium size devices like desktops and the .col-lg-* for large desktop screens. The following table summarizes some of the key features of the new grid system

Creating Two Column Layouts

The following example will show you how to create two column layouts for small, medium and large devices like tables, laptops and desktops etc. However, on mobile phones, the columns will automatically become horizontal as default.

Example :-

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.

Example :-

Bootstrap Layouts with Column Wrapping Feature

Now we are going to create more flexible layouts that changes the column orientation based on the viewport size. The following example will create a three column layout on medium devices like laptops and desktops, as well as on tablets (e.g. Apple iPad) in landscape mode, but on small devices like tablets in portrait mode, it will change into a two column layout where the third column moves at the bottom of the first two columns.


Responsive column resets

With the four tiers of grids available, you are bound to run into issues where at certain breakpoints, the columns don't clear quite right as one is taller than the other. To fix that, use a combination of a class .clearfix and the responsive utility classes as shown in the following example


Offset Columns

Offsets are a useful feature for more specialized layouts. They 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.

Example :-

Nesting columns

To nest your content with the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* column. Nested rows should include a set of columns that add up to 12.

Example :-