Bootstrap 4 Tutorial #05 – Grid Basics – Lesson
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
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.