Bootstrap 3 Grid System

Bootstrap 3 grid system provides an easy, fast and mobile first way to create web layouts. Bootstrap 3 has essentially reversed the philosophy of designing web pages, earlier a page was first optimized for desktop and then scaled down to mobile size but Bootstrap 3 has silently ushered in a new era of mobile first approach.

Bootstrap 3 has been redesigned to start from handheld device size and scale up to desktop size. Think of mobile first philosophy as a paradigm  shift from graceful degradation to progressive enhancement.

Bootstrap 3 grid system utilizes a maximum of 12 columns. Lets start with a very basic example to get the point through.

Suppose we want to design a uniform grid with 2 elements with following specification based on the device on which its viewed :

• On desktop 2 column.

Few important things to take from this example is that our each column is 6 gird columns wide.So if we want 4 equal sized columns in a  row then we have to divide 12 grid columns into four equal parts, i..e, 3 grid column each. So we have to use .col-lg-3 class here.

Lets take another example where we need to design uniform grid with 8 elements with following specification based on the device on which its viewed :

• On desktop 2 rows of 4 column.
• On tablet 4 rows of 2 column.
• On mobile 8 rows of 1 column

In this example we have used col-lg-*,  col-sm-*, col-xs-*. This is Bootstrap's way of breaking device based on its screen size. Below is a table showing the device break up based on the screen size.

Lets make our example bit more interesting, say we do not want to show text ".col-lg-3 .col-sm-6 .col-xs-12" on every device but selectively show the text ".col-lg-3 " on desktop, ".col-sm-6" on tablet and ".col-xs-12" on mobile. To solve this problem we use utility class like visible-xs, visible-sm,  visible-md, visible-lg, hidden-xs, hidden-sm,  hidden-md, hidden-lg.






These are just a few but important examples which outlines the basic of grid system. Employing the understanding gained through this post we can go on to create much complex grid system and further by combining visible, hidden utility classes we can customize webpages to the granular level depending on the device in question.

Wish you all Happy Bootstrapping....