What is Bootstrap Grid System with example

What is Bootstrap Grid System:

The Bootstrap grid system provides the quick and easy way to create the layouts of the web pages. 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

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)

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.