What is Bootstrap 4 Grid System ?

Posted on 2020-05-19 17:14:04, by Seawind

Bootstrap grid systems provide the rapid and effortless way to design responsive website layouts. As dissimilar to the earlier Bootstrap 2.x grid system which are fix by default, the new version, i.e. Bootstrap 4 introduce the responsive mobile original fluid grid system that correctly balance up to 12 columns as the tool or viewport size increases.

Bootstrap 4 include predefined grid classes for instantly making grid layouts for various 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 small devices like cell phones, similarly the .col-sm-* class for small screen devices like tablets, the .col-md-* class for average size devices like desktops and the .col-lg-* for big desktop screens. The following table summarizes some of the important features of the latest grid system.

Above table show one key point, applying any .col-sm-* class to an section will not only affect its style on small devices, but also on medium and large devices having a screen size superior than or equivalent to 768px (i.e. ≥768px) if .col-md-* and .col-lg-* class is not exhibit. Equally the .col-md-* class will not only affect the style of element on average devices, but also on big devices if a .col-lg-* class is not present.

Now the question arise how to design rows and columns by this 12 column responsive grid system. The answer is very easy, at first form a container that act as a packaging for your rows and columns using the .container class, after that build rows inside the container using the .row class, and to build columns within any row you can apply the class.col-xs- *, .col-sm-*, .col-md-* and .col-lg-*. The columns are actual content area where we will place our contents. Hope this information is useful for you. We’ll be sharing more information regarding the same in our upcoming posts.