Bootstrap 4 Grid System

You can build any type of responsive layouts using the Bootstrap 4 grid system. It is built up of flexbox to create a 12 column system to resize the design to all types of screen sizes.

There are many predefined classes to create a layout for any screen type.

Grid System Classes in Bootstrap 4

There are 5 grid classes to use and create with a 12 column grid system in Bootstrap 4. The grid classes are given below:

1. .col (New from Bootstrap 4)
2. .col-sm-
3. .col-md-
4. .col-lg-
5. .col-xl- (New from Bootstrap 4)

The .col is for extra small device sizes like mobile phones with a screen size less than 576px, .col-sm- is for small device sizes like mobile phones with a screen size greater than 576px, .col-md- is for medium size devices like a tablet with a screen size greater than 768px, .col-lg- is for large size devices like a desktop with a screen size greater than 992px, .col-xl- is for extra-large devices like desktops with a screen size greater than 1200px.

Grid Sizes in Bootstrap 4

The table shows the different Bootstrap grid system sizes for all devices type in Bootstrap 4 as given below:

	Extra Small >576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra Large ≥1200px
Max Container Width	None (auto)	540px	720px	960px	1140px
Class prefix	.col	.col-sm-	.col-md-	.col-lg-	.col-xl-
Number of Columns	12
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Column ordering	Yes

The above table shows that if you want to define a different size for all screen size, you have to add all the above classes in a <div> element for different layouts.

If you use a single class in the <div> element like extra-small grid class .col-, it will be applied to all the higher screen size if you do not use the other grid classes .col-sm-, .col-md-, .col-lg-, and .col-xl-

Similarly, if you use a small grid class .col-sm-, it will be applied to all the higher screen size but not the lower screen size if you do not use the other grid classes .col-, .col-md-, .col-lg-, and .col-xl-. The extra screen size columns are horizontal.

How to Use the Above Grid System to Create Rows and Columns

To create a layout using the above Bootstrap 4 grid system, you have to use the <div> element with .container and .row class inside it. After that, you can use the above grid system class .col-*-* as given in the example below:

Let’s find out more ways with the more live examples given below.

Auto-layout Columns with Equal Width

To create columns that are of the same width for all screen sizes. It does not require to specify the column numbers to create equal-width columns. You have to use .col class of Bootstrap 4 to create the same size columns.

Use .col class for one time for one-column layout, two times for two columns, three times for three-column, and so on. See the example given below to create same size columns:

Two Column Auto-layout

The two-column auto-layout requires two .col classes to create two columns with equal size for all screen sizes. The below example creates a two-column auto-layout:

Three Column Auto-layout

The three-column auto-layout requires three .col classes that create three columns having the same size for all screen sizes. See the example below showing the three-column auto-layout.

You can check the layout with the ‘Test it Live’ button given above.

Column Auto-layout with Line Breaks

If you want to create auto-layout columns with line breaks, you have to use the class .w-100 to the location where you want to break the columns to the next line.

The below example contains six .col classes and line break class .w-100 after the two .col and after it three .col classes as given below:

Set One Column Width with Other Column Auto-layout

With the auto-layout system, you can also set the width to any columns of your choice by adding numbers to columns. The number means you can use any of the grid choices like .col-, .col-sm-, and other higher grids as below:

The above example has three columns with second column width is set using the .col-sm-6. This set the width for the small and its higher devices but not for the extra small devices. You can test the above example live to check the result.

Variable Column Width According to Content Size

The variable column width is useful when you want to set the column size according to the content natural size. You have to use the Bootstrap 4 class .col-{breakpoint}-auto as given below:

The above example set the variable column width for small device breakpoint that is also applied to higher device sizes but not to the extra small screen size. You can test the above example size and resize the screen to check it’s working on different screen sizes.

Make Bootstrap 4 Grid System Same For All Breakpoints (Extra Small to Extra Large Devices)

You can create columns that work on all the breakpoints for all device sizes as given in the examples below.

Same Size Columns

When you want to set the same size columns for all breakpoints, you have to use the Bootstrap 4 class .col. The number of times you use the class .col, the same number of columns you will get in the output for all breakpoints as given below:

Specified Size Columns

You can also specify the column size that is the same for all breakpoints or screen size. To set the specified size, you have to use the class .col-* as given in the example below:

Horizontal on Small Breakpoint

To make the columns horizontal for small breakpoints, you have to use the class .col-sm-*. The specified size works on small to higher size devices but not for the extra small device size.

All the columns convert to horizontal when you test the above example live. You can resize the screen size to check the result in the browser.

You can also use the .col-sm to set the same column size for small to higher screen sizes. After it reaches the small breakpoint, it becomes horizontal for extra small device size.

Combination of Different Classes

You can add different size grid columns to make the columns the same for all breakpoints. The below example uses grid columns .col-* and .col-{breakpoint}-* to make the columns the same for specified breakpoints.

The above example uses .col-*, .col-sm-*, .col-md-*, and .col-lg-*. You can test it live and resize your browser size to check the result for different breakpoints with the specified combination.

Row Columns to Quickly set Number of Columns

The row columns are useful to quickly set the number of columns with the row. You have to use the .row-cols-* with the .row class that defines the columns.

When you specify .row-cols-2 with the .row, it means you set two-column to appear in each row as given below:

The above example uses the .col to columns of the same size with a number of columns set at the start. However, you can also use other breakpoint grid columns to whose example is given below after the next example.

For three columns to create quickly, you have to specify.row-cols-3 with the .row. The example given below uses the same number of columns as you have created in the above example.

The above example uses the same .col class to create columns of the same size for all breakpoints. The row columns are the easiest ways to break the columns to the single specified layout that you can test live above.

In addition to above all row columns in Bootstrap 4, you can also specify row columns according to the breakpoints. To specify the breakpoints, you have to use the class .row-cols-{breakpoint}-* with the .row class as given below:

You can test the above example live and resize the browser size to check the row columns changes themselves according to the specified breakpoints.

Alignment of Columns

Bootstrap 4 provides many useful classes to easily create columns and align them vertically or horizontally. Let’s find out the classes and the examples to easily understand the method.

Vertical Alignment of Columns

The vertical alignment is useful to align the row and columns vertically in a specified size container.

To align the row containing grid columns, there are three Bootstrap 4 classes. The first class is align-items-start to align row to the top, .align-items-center to align row to center, .align-items-end to align columns to the end of the container as given below:

You can test the above example live to check the alignment of rows containing grid columns.

In addition to row alignment, you can also align the columns using Bootstrap alignment classes. The class .align-self-start aligns the column to the top position, .align-self-center align the column to the center position, .align-self-end aligns the column to the end position of the container.

When you test the above example live, you can see the result shows that the columns are aligned vertically according to the specified position of the column.

Horizontal Alignment of Columns

The horizontal alignment of columns is useful to align columns horizontally. You can use the class .justify-content-start to move the columns horizontally to the left position, .justify-content-center to move columns horizontally to the center position, .justify-content-end to move columns horizontally to the right position.

You can test the above example live to check the horizontal alignment in the output.

There are two more classes for horizontal alignment of columns. You can use the class .justify-content-around to place grid columns with half-space-size on either end. You can also use the .justify-content-between to place the first column to the left side at the start and the second column to the right side at the end.

Wrapping Behaviour of Columns

The columns in a row work according to the 12 grid columns. When the column size increases the 12 column grid, it goes down to the next row in Bootstrap. Let’s find out this wrapping behavior with the example given below:

In the above example, the first column takes 6 columns, the second column takes 3 columns, the third column increases the 12 grid columns that move it to the next row that you can test live above.

Reordering of Columns

You can reorder the grid columns to set the required order of columns in a row. This can be useful to set the proper sequence of columns to display in the frontend as per your requirements. You have to use the reorder class .order-* to control the order of columns in 12 grid system as given below.

The above example uses the reorder class .order-3 change the order of the second columns to make it last. It also added the class .order-1 to move it to the second column position.

You can also use the class order-first to move the column to the first position and class .order-last to move the column to the last position in a container.

The above example uses the two classes that you can test live to check the result of the reordering of columns.

Offsetting of Columns

The offsetting of columns in Bootstrap is the useful process to move columns to the right position with some left margin increases. The offset uses the numbers to increase the left margin over the 12 columns.

You have to use the class .offset-{breakpoint}-* (like .offset-sm-*, .offset-md-*, and .offset-xl-*) to set the left margin for the columns as below:

The above example set the offset for medium size devices that also works for higher sizes but not on lower sizes. You can test the example live to see the result of offset that increases the left margin.

You can also set the offset using the margin utility classes .ml-auto to place the column at the end, .mr-auto to place after column at the end, and .ml-{breakpoint}-auto to place the column to the end according to the specified breakpoint.

Nested Bootstrap 4 Grid Columns System

You can also place grid columns inside other grid columns in Bootstrap 4. This requires again a grid columns inside the .row class to create nested columns. The nested column should also be a 12 grid column to place in a row as given below:

The above example creates a nested column inside the grid column .col-md-8.

I hope this tutorial helps you to learn the Bootstrap 4 grid system.

Next Chapter ➔ Bootstrap 4 Typography >>