The Ultimate Guide to Bootstrap Margin (Versions 4 and 5)

In this guide to Bootstrap margin we will use Bootstrap utilities to apply margin to the top, left, and right of element. I will dive into the different Bootstrap margin classes, explore auto and negative margin, and also show how to remove margin.

I will use Bootstrap version 5 but will also show the code using Bootstrap 4.

Here are the different margin experiments we will test in this tutorial:

Bootstrap Margin Utilities and Classes

Margin classes in Bootstrap 4 and 5 follow a clever pattern of {property}{sides}-{size} as noted in the Bootstrap documentation. The property we are exploring in this tutorial is margin, our sides are top, bottom, start, and end (which correspond to left and right for devs using English), and the size is 0-5 by default.

What Bootstrap is doing “under the hood” is generating margin classes using the Bootstrap utility system. Here’s an example of how that works with the margin-top property, which is transformed to the mt class:

$utilities: (
  "mt": (
    property: margin-top,
    class: mt,
    values: (
      0: 0,
      1: $spacer * 0.25,
      2: $spacer * 0.5,
      3: $spacer,
      4: $spacer * 1.5,
      5: $spacer * 3
    )
  )
);

The utility takes the specified class (mt) and concatenates the value keys plus a dash (-0, -1, etc.) to generate the class name. Each class then corresponds to the designated CSS property (margin-top) and the it’s particular value (i.e. ($spacer * 0.25)rem). The default value of $spacer is 1rem.

Here’s the mt-1 class in dev tools:

In a later section we will create custom margin classes using Bootstrap $utilities. Here’s a guide to Bootstrap padding utilities.

Bootstrap Margin Top, Left, and Right

Bootstrap 4 has classes for applying margin to the top and bottom, left and right of an element. In Bootstrap 5, left and right were upgraded to “beginning” and “end” to create consistency between LTR and RTL languages.

In the code below, I added end margin to the first column, top and bottom margin to the second column, and starting margin to the third column.

<div className="row bg-primary">
  <div className="col-sm me-1 bg-secondary">
    Left Col
  </div>
  <div className="col-sm bg-secondary mt-1 mb-1">
    Center Col
  </div>
  <div className="col-sm ms-1 bg-secondary">
    Right Col
  </div>
</div>

The result is the center column appears to have margin all around it while the first and last column appear to have no margin. This was simply an example to show how the margin gets applied. Take a look at the screenshot of dev tools below.

The padding on the col-sm element comes from the row class on the parent.

In Bootstrap 4, ms-1 and me-1 are ml-1 and mr-1 for LTR readers.

Bootstrap Margin Auto

Bootstrap 4 and 5 have an auto margin class. It follows the same pattern of {property}{direction}-auto, i.e. ms-auto (ml-auto in version 4).

<div className="row bg-primary">
  <div className="bg-secondary ms-auto me-auto" style={{ display: "block", width: 200 }}>
    Center Col
  </div>
</div>

If you want to use margin: auto on an element, the element must also have display: block and a fixed width, like my div in the code above.

With start and end margin set to auto on a single fixed width column in a row, the column div is centered.

Bootstrap Margin Negative

Bootstrap has a negative margin class, but it is not available by default. First, enable the class with the following code in your .scss file:

$enable-negative-margins: true;

Then you can use negative margin classes like ms-n3 below:

<div className="row bg-primary mb-4">
  <div className="col-sm ms-n3 bg-secondary">
    Negative Col
  </div>
  <div className="col-sm bg-secondary">
    Center Col
  </div>
  <div className="col-sm bg-secondary">
    Right Col
  </div>
</div>

The pattern of {margin}{side}-{value} still holds, but now there is a n in front of the value.

Interestingly, negative margin on the first column stretches out all the columns since the column class applies a flex value:

Notice that the row with negative margin is wider than the first row which does not have negative margin.

Custom Bootstrap Margin Classes

We can create our own margin classes using Bootstrap $utilities. In this example, I am using Bootstrap 5 but re-created the Bootstrap 4 mr class. As you can see, I gave it two new negative values and an extra positive value (plus the 0-5 values are custom).

$utilities: (
  "mr": (
    property: margin-right,
    class: mr,
    values: (
      n1: -1rem,
      n2: -1rem,
      0: 0,
      1: 1rem,
      2: 2rem,
      3: 3rem,
      4: 4rem,
      5: 5rem,
      6: 6rem
    )
  )
);

Here’s an example of how this custom class might be used:

<div className="row bg-primary mb-4">
  <div className="col-sm bg-secondary">
    Left Col
  </div>
  <div className="col-sm bg-secondary">
    Center Col
  </div>
  <div className="col-sm mr-1 bg-secondary">
    Custom Margin Col
  </div>
</div>

The last column div has mr-1 on it. This creates the effect seen below:

Bootstrap 3 does not have the margin utilities that 4 and 5 have.