Understanding Bootstrap Grid System

Bootstrap needs no introduction, because it is the most used front end framework nowadays. It ships with lots of utilities which developer can use without any issues. Bootstrap is highly compatible with all browsers and developed with mobile first approach. (Bootstrap Gallery Themes)

One of the strongest points of bootstrap is its Grid System. Bootstrap ships with very powerful 12 column grid system. It makes our life easier for building a mobile first responsive website. When we say 12 column grids it means each is divided into equal 12 columns and those can be placed in one single row.

Bootstrap is a mobile first front end framework which allows you to perform well in devices of various sizes. To make it compatible for all possible screen sized, bootstrap team has divided into 4 sections and each one has been given a specific class prefix which is explained in below table.


Size and Class Prefix Guide

Extra Small Device Phones (<768px)  col-xs-*
Small Devices – Tablets (>=768px) col-sm-*
Medium Device – Desktops (>=992px) col-md-*
Large Device Desktops (>=1200px) col-lg-*

In above table `*` represent a number(1-12) of the column you want to apply to an element. You can apply multiple class to one element depended on your need. For example, if you want you’re one of the elements to show full width on extra small devices, half width for small devices, 1/3 width for medium devices and 1/4 width for large devices then you can apply classes in below pattern.

You should have an idea of how we can apply classes. So our element can behave on various devices. So this is how a basic grid system works in twitter bootstrap. Apart from this there are limited other utility classes are available in bootstrap which we will see in upcoming articles in this series. (Bootstrap Dashboard Templates)

Still you might have questions that do we need to apply classes for all 4 breakpoints all the time and the answer is simply NO. Bootstrap grid classes are prepared in such way that it will override classes which are targetted to small devices. So if `col-xs-12 col-sm-6` is applied to an element then for small, medium and large devices will have CSS property of class `col-sm-6` while extra small devices will have CSS property of class `col-xs-12`.

Let’s look into one more set of nifty utility class, these classes are used to show/hide based on breakpoints which are defined. To hide any elements we have straight forward classes like hidden-* where * stands for xs,sm,md or lg.


To show element based on breakpoint we have more option compared with hide utility. We have .visible-*-* where the first * stands for xs,sm,md or lg and second * stands for block, inline or inline-block. You can imagine innumerable classes we can have based on above combination. .visible-md-block will product display:block; while.visible-md-inline-block will produce display: inline-block; for that element.

In this series of articles I will cover all aspects of Twitter Bootstrap Grid System which are really essential to take advantage of it very effectively. In an upcoming article we will see other concepts like Column Wrapping, Column Nesting, Column Offsetting, and Column Ordering. (Bootstrap Design Templates)

by Irshad Shaik

You may also like

Read More Articles about

Web Development