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:

The grid has some margin by default. I will create custom margin classes to customize grid margin. If you are using Bootstrap 4 or 5 check out these margin examples.

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:

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.

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.

Consider upgrading to Bootstrap 4 or 5 to access built-in responsive sizing and spacing.

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:

Margin can be useful for aligning buttons and other components besides divs in Bootstrap, but it’s also great for aligning content in divs.

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.

If you are using grid layout, check out the Bootstrap gap class for adding spacing.