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