The Complete Guide to Bootstrap 3 Margin: Top, Right, Left Classes

Bootstrap 3 is still widely used, despite being two version behind the current Boostrap release. It’s grid system is intuitive and adds spacing and alignment for grid children. Margin can be tricky to add, however.

In this tutorial we will create the following grid using Bootstrap 3:

Bootstrap 3 Margin Tutorial
Bootstrap 3 Margin Tutorial

The grid has some margin by default. I will create custom margin classes to customize grid margin.

How Margin Works in Bootstrap 3

The grid row in Bootstrap 3 comes with margin-left: 15px and margin-right: 15px to offset padding. Take a look at the row class styles in dev tools in the screenshot:

Default Bootstrap 3 grid row margin
Default Bootstrap 3 grid row margin

This grid is created with the following code:

<div className="container">
  <div className="row">
    <div className="col-xs-4 col-xs-offset-4 item">top</div>
  </div>
  <div className="row">
    <div className="col-xs-4 item">center</div>
    <div className="col-xs-4 col-xs-offset-4 item">center</div>
  </div>
  <div className="row">
    <div className="col-xs-4 col-xs-offset-4 item">bottom</div>
  </div>
</div>

Another nice margin class in Bootstrap 3 is the col-*-offset-* class. An example of this is in the code above: col-xs-offset-4. This class adds margin-left to a child element inside a row.

Bootstrap 3 col offset example
Bootstrap 3 col offset example

The xs portion of the class name means it takes effect at the xs screen widths. The 4 portion of the class name means that it offsets one-third of the screen, or 33.333%.

The column offset class is the only margin class I found in the Bootstrap 3 docs. Unfortunately there are not any CSS utility classes in Bootstrap 3; those are introduced in Bootstrap 4. However, we can create our own custom margin classes as needed.

Bootstrap 3 Margin Top and Bottom Classes

I created a custom margin top class and margin bottom class for Bootstrap 3. They are modeled off of the margin utility classes in Bootstrap 4.

Here are my top and bottom margin classes:

.mt-1 {
  margin-top: .25rem;
}

.mb-1 {
  margin-bottom: .25rem;
}

I called these mt-1 and mb-1 using the pattern of Bootstrap 4. The m is for margin, the t is for top and b is for bottom, and then 1 is for a multiplier of .25 rem.

I used these classes on the center row in my grid:

<div className="row mt-1 mb-1">
  <div className="col-xs-4 item">center</div>
  <div className="col-xs-4 col-xs-offset-4 item">center</div>
</div>

This added the margin top and bottom as we can see in dev tools:

Custom Bootstrap 3 Margin Top and Bottom Classes
Custom Bootstrap 3 Margin Top and Bottom Classes

Margin can be useful for aligning buttons and other components besides div in Bootstrap.

Bootstrap 3 Margin Right and Left Classes

I created custom margin right and left in the same pattern as my margin top and bottom classes:

.mr-1 {
  margin-right: .25rem;
}

.ml-1 {
  margin-left: .25rem;
}

These classes are effective at the row level if you need spacing to the right or left of a row. Better yet, you may want them at the grid container level to quickly add spacing.

When I used these at the row child element level, it affected the layout and grid system, so I can’t recommend using these utilities at that level. Use Bootstrap padding classes at the row child level.

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.