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 nested columns example

Bootstrap Grid Classes

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

.col – It is for very small devices that have a screen width of 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 the above-listed.

Bootstrap column classes 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 examples

Bootstrap 12 column grid

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 columns 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 two column Unequal Responsive Grid

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.

How to put divs next to each other

Bootstrap column resolves this problem.

create a new row and inside row create columns

Bootstrap offset left Example

To create offset we use class offset-*-*.

for small devices it is offset-sm-1

Bootstrap columns not side by side

To create columns we use .col class these .col must be inside .row class otherwise it will not show columns side by side

The correct way to place .col is as below

Bootstrap padding/margin between columns

offset-* can be used to provide space between columns

Bootstrap padding/margin between rows

bootstreap4 uses following properties for margin and padding

m- for margin
p- for padding

it is used with

t- set margin-top or padding-top
b-set margin-bottom or padding-bottom

with size property

0- margin and padding set to 0
1- margin and padding set to 1
etc.