How to offset columns in Bootstrap

The Bootstrap framework offers a powerful grid system. You can easily create layouts for different devices. One question that is asked a lot is ‘how to offset columns in Bootstrap 4‘.

There are special classes, starting with .offset-md-*, available that let you move columns to the right. A standard row has 12 columns. If you want to make a column in the middle of the grid layout that is 4 columns, you need to offset this column with 4 columns (4 + 4 + 4 = 12).

If we translate this example to HTML code you will end up with something like this.

<div class="container">
	<div class="row">
		<div class="col-md-4 offset-md-4">4 columns with 4 columns offset</div>
	</div>
</div>

Result:

Another example. Let’s create 2 columns with both 2 columns offset.

<div class="container-fluid">
	<div class="row">
		<div class="col-md-2 offset-md-2">2 columns with 2 columns offset</div>
		<div class="col-md-2 offset-md-2">2 columns with 2 columns offset</div>
	</div>
</div>

Result:

Suppose you want an 8 columns width column with 2 columns offset on the right side and left side. Start with the following HTML code.

<div class="container">
	<div class="row">
		<div class="col-lg-8 offset-lg-2">8 columns with column with 2 columns offset</div>
	</div>
</div>

As you can see, with the offset-md-* classes in Bootstrap you can easily append margin to columns.

The following classes are available for offsetting columns.

  • offset-*
  • offset-sm-*
  • offset-md-*
  • offset-lg-*
  • offset-xl-*

Using mr-* and ml-* to add margin to Bootstrap columns

There are more methods to get the desired result. We can use the mr-* (margin-right) and ml-* (margin-left) classes to add some spacing to our columns.

<div class="container">
	<div class="row">
		<div class="col-4 mr-5">col-4</div>
		<div class="col-4 ml-5">col-4</div>
	</div>
</div>

To create the following result:

In Bootstrap we have the following classes available for margins.

  • mr-1
  • mr-2
  • mr-3
  • mr-4
  • mr-5

 

  • ml-1
  • ml-2
  • ml-3
  • ml-4
  • ml-5