Bootstrap 4 Grid System

The grid system in Bootstrap 4 is built using flexbox. It allows a maximum of 12 columns across the web page.

In case you do not need to use all the 12 columns available, you can group individual columns to get wider columns for your usage.

Due to the responsiveness of the grid system, the columns get re-arranged automatically as per the screen size of the operating device.

Bootstrap Grid Classes

Here’s the list of the classes available for the Bootstrap’s grid system:

.col – It is for very small devices that have the screen width less than 576px

.col-sm– This is for the devices having screen width equal to or greater than 576px

.col-md – The range of medium size devices can use this class. the screen width has to be equal to or greater than 768px)

.col-lg – This class is for the devices that have screen widths equal to or greater than 992px

.col-xl – Used for very large devices that have screen width equal to or greater than 1200px

For more creating more dynamic and flexible layouts, the above-listed classes can be combined appropriately.

Please note that since each class scales up, so if you want to set the same width for md as for sm, you just have to specify above-listed.

Bootstrap Grid Basic Structure

Take a look at the basic structure of the Bootstrap 4 grid:

Explanation for the First example:  Here we are creating a row (<div class="row">).

Then we added the required columns using suitable .col-*-* classes.

Here the first star (*) tells you the responsiveness i.e. sm, md, lg or xl, the second star, furthermore, represents a number.

This number should ad upto 12 for any given row.

Explanation for Second example: In the second example, instead of adding a number to each col we will let the layout be handled by the bootstrap.

Thus, for equal width columns we have: two “col” elements = 50% width each and three cols = 33.33% width each and so on.

The responsiveness of the columns can be set as per the requirements.

Here are some more examples for different column requirements:

Bootstrap Grid Three Equal Columns

Bootstrap Grid Responsive Columns

The following example will demonstrate, how you can create four equal-width columns. These will start at tablets and will then scale to extra-large desktop screens.

Responsive column can be used with devices whose screens width are less than 576px like  mobile, the above columns will get stacked on top of each other, automatically.

Bootstrap Grid Two Unequal Responsive Columns

Another example with columns scaling from the tablet screens to extra-large desktop screens. Furthermore, the columns here, will have varied width.

Thus, depending on the requirement, you can use the Bootstrap grid system to provide responsive columns for different devices.