Bootstrap Grid System

Bootstrap grid system provides the quick and convenient way to create responsive website layouts. The latest Bootstrap 4 version introduces the new mobile-first flexbox grid system that appropriately scales up to 12 columns as the device or viewport size increases.

The Bootstrap Grid System Has 3 Main Parts: CRC

When working with the Bootstrap 12 column grid you have to keep in mind the order of elements and that there are always three parts: a Container, a Row, and any number of Columns. CRC.

 

For example:

table > tr > td is like .container > .row > .col-sm-6

Container – .container or .container-fluid

This is the parent container that determines if the columns should be full-width or not.

Row – .row

A horizontal wrapping container for the series of columns it contains. It essentially clears the floated columns

Column – .col-*-*

A column is a vertical division similar to a table cell. This is where your content goes and has built-in margin to the left and right to prevent text and images from touching each other. The default grid uses floating divs to achieve the horizontal columns.

 

Bootstrap 5 Breakpoints

Columns also have grid tiers which tell the columns how they should look at different breakpoints. In the example below I used .col-sm-6 which essentially says, “When the browser window is 576px or higher make this column span 6 of the 12 columns. For anything below 576px make it full width.” So when you declare a grid tier you are saying make it this size for the specified tier and up.

Bootstrap 4 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-* classes to create grid columns for extra small devices mobile phones in portrait mode, similarly you can use the .col-sm-* classes to create grid columns for small screen devices like mobile phone in landscape mode, the .col-md-* classes for medium screen devices like tablets, the .col-lg-* classes for large devices like desktops, and the .col-xl-* classes for extra large desktop screens.

The following table summarizes some of the key features of the new grid system.

 

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, large and extra large devices having screen width greater than or equal to 540px, if a .col-md-*, .col-lg-* or .col-xl-* class is not present. Similarly, the .col-md-* class will not only affect the styling of elements on medium devices, but also on large and extra large devices if a .col-lg-* or .col-xl- 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 .col-*, .col-sm-*, .col-md-*, .col-lg-* and .col-xl-* classes. The columns are actual content area where we will place our contents. Let's put all these things into real action. Let's see how it actually works: