Bootstrap Grid System

The Bootstrap grid system is the fastest and easy way to create a layout.

What is 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

Max container width

Above table demonstrates one important thing, applying any .col-sm-* class to an element will not only affect its styling on small devices, but also on medium and large devices having a screen size greater than or equal to 768px (i.e. ≥768px) if .col-md-* and .col-lg-* class is not present. Similarly the .col-md-* class will not only affect the styling of elements on medium devices, but also on large devices if a .col-lg-* class is not present.

Now the question arises how to create rows and columns using this 12 column responsive grid system. The answer is pretty simple, at first create a container that acts as a wrapper for your rows and columns using the .container class, after that create rows inside the container using the .row class, and to create columns inside any row you can use the class .col-xs-*, .col-sm-*, .col-md-* and .col-lg-*. The columns are actual content area where we will place our contents. Let's put all these things into real action.

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.

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.

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.

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 <div> 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

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.

In the above illustration there are total 12 content boxes in all devices, but its placement varies according to the device screen size, like in mobile device the layout is rendered as one column grid layout which has 1 column and 12 rows placed above one another, whereas in tablet it is rendered as two column grid layout which has 2 columns and 6 rows. Further, in medium screen size devices like laptops and desktops it is rendered as three column grid layout which as 3 columns and 4 rows and finally in large screen devices like large desktops it is rendered as four column grid layout which has 4 columns and 3 rows.

Now the question is how we can create such responsive layouts using this Bootstrap new mobile first grid system. Let's start with the medium device that can be a laptop or normal desktop. Since our medium device layout has 3 columns and 4 rows i.e. 3x4 grid layout, so the HTML code for making such grid structure would be something like this.

If you see the output of the above example in a laptop or desktop having screen or viewport width greater than or equal to 992px and less than 1200px you will find it has 4 rows where each row has 3 equal columns resulting in 3x4 grid layout.

But just wait, the above example has a major alignment issue. If height of any column is taller than the other it doesn't clear properly and break the layout. To fix this, use the combination of a .clearfix class and the responsive utility classes.

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.

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

Now, since the sum of every two column number, i.e. col-sm-* is equal to 12, so clear floats after every second occurrence of columns.

After clearing floats for small devices our final code would be:

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

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.

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.

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.

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

Similar to the regular responsive classes, you can use the following utility classes to show or hide certain elements for printing purpose or devices.