Bootstrap 4 grid system helps you create advanced website layouts using rows and columns. It is built with flexbox and can have up to 12 columns across the web page. If you do not want to use all the columns individually, you can group the columns together to layout and align content.

The grid system is fully responsive and you can decide how these columns scale on different viewpoints. Just make sure that the sum of all the columns should not exceed 12 (fewer are acceptable). Here is an example of Bootstrap 4 grid system:

Live Example

Grid options

Bootstrap 4 now uses a 5 tier grid system unlike Bootstrap 3 (which used a 4 tier grid system). The 5th tier was added to support responsive layouts on extra large devices. Following are the 5 tiers of Bootstrap 4 grid system:

  • col-* — extra small devices (screen width less than 576px)
  • col-sm-* — small devices (screen width greater than or equal to 576px)
  • col-md-* — medium devices (screen width greater than or equal to 768px)
  • col-lg-* — large devices (screen width greater than or equal to 992px)
  • col-xl-* — extra large devices (screen width greater than or equal to 1200px)

Since the grid system is responsive and built with flexbox, the columns re-arrange automatically depending on the screen viewpoint. You can combine the above classes to create more complex and dynamic layouts. The important thing to remember is that each class scales up, which means it you want to set the same widths for lg and xl, you just need to specify lg.

Auto-layout columns

Auto-layout columns are useful to create equal width columns or columns with variable sizes for all devices and screen widths. Instead of adding number to col classes for different breakpoints, just use col class and let the Bootstrap 4 handles the layout. For example, following is an example of equal-width columns where each column has 50% width on every device.

<div class="row">
	<div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

Live Example

Responsive columns

Bootstrap 4 responsive columns are useful to create sophisticated responsive layouts that scale up and down on different devices for different viewpoints. The following example shows how to create three equal-width columns starting at small devices (sm) and scaling to extra large devices (xl). The same columns, on extra small devices like mobile phones (screen size less than 576px), will automatically stack on top of each other.

<div class="row">
	<div class="col-sm-4">col-sm-4</div>
	<div class="col-sm-4">col-sm-4</div>
	<div class="col-sm-4">col-sm-4</div>
</div>

Live Example

Offsetting columns

There are two ways to offset grid columns in Bootstrap 4: responsive offset-* grid classes and margin utilities (we will learn more in upcoming tutorials). Offset grid classes match the size of columns while margin utilities are more useful for quick layouts where the width of the offset is not fixed.

<!--offset classes-->
<div class="row">
	<div class="col-sm-4">col-sm-4</div>
	<div class="col-sm-4 offset-sm-4">col-sm-4 offset-sm-4</div>
</div>
<!--margin utilities -->
<div class="row">
	<div class="col-sm-4">col-sm-4</div>
	<div class="col-sm-4 ml-auto">col-sm-4 ml-auto</div>
</div>

Live Example

Nested columns

You can nest multiple columns inside an existing grid column. Add a new .row first inside an existing grid column and then add a set of col-sm-* with the .row. The sum of nested columns should not exceed the maximum allowed limit of 12 columns.

<!--Level 1-->
<div class="row">
	<div class="col-sm-9">
	col-sm-9
		<!--Level 2-->
		<div class="row">
			<div class="col-sm-3">col-sm-3</div>
			<div class="col-sm-3">col-sm-3</div>
		</div>
	</div>
	<div class="col-sm-3">col-sm-3</div>
</div>

Live Example

Conclusion

In this tutorial, we discussed what is Bootstrap 4 grid system, what are the available responsive breakpoints and how to use auto-layout, response and offsetting columns to create complex layouts. We also discussed nested columns. In next tutorial, we will discuss Bootstrap 4 typography.