Bootstrap Spacing: Margin and Padding Utilities

Bootstrap’s spacing utilities let you add margin and padding with short, predictable class names instead of custom CSS. Once you learn the notation, you can space any element in a few keystrokes and make it responsive. This guide covers the full system, how the scale is built from one variable, how to customize it, and the patterns you will use most. It pairs with the flexbox and grid guides.

The notation

A spacing class is built from three parts: a property, an optional side, and a size.

{property}{side}-{size}

• Property: m for margin, p for padding.
• Side: t (top), b (bottom), s (start / left), e (end / right), x (left and right), y (top and bottom), or omitted for all four sides.
• Size: 0 through 5, or auto.

So mt-3 is margin-top size 3, px-4 is horizontal padding size 4, and m-0 removes all margins.

<div class="mt-3 mb-5 px-4 py-2">Spaced content</div>

The sides at a glance

The s/e (start/end) naming is logical, so it flips automatically in right-to-left layouts, which is why Bootstrap 5 uses ms-/me- instead of the old ml-/mr-.

The spacing scale

The sizes map to multiples of $spacer, which defaults to 1rem (16px):

Because everything scales from $spacer, changing that one variable rescales every spacing utility, every gap, and the grid gutters at once. That single point of control is what makes the scale feel consistent.

Responsive spacing

Insert a breakpoint to change spacing per screen size:

{property}{side}-{breakpoint}-{size}

For example, small padding on mobile and larger padding from medium screens up:

<div class="p-2 p-md-5">Responsive padding</div>

The breakpoints are sm, md, lg, xl, and xxl. Like all Bootstrap responsive utilities, a value applies from that breakpoint up, so p-md-5 means “size 5 from medium screens and wider.”

Center with auto margins

mx-auto sets the left and right margins to auto, which horizontally centers a block element that has a width:

<div class="mx-auto" style="width: 300px;">Centered block</div>

Inside a flex container, ms-auto, me-auto, and my-auto push items by absorbing free space. For the full set of centering techniques, see how to center a div in Bootstrap.

Negative margins

Bootstrap also provides negative margins for pulling elements closer or overlapping them, using an n prefix on the size: mt-n3, mx-n2, and so on (sizes 1 through 5). They are handy for nudging an element out of its container, such as pulling a card up over a hero section.

Gap, not margins, for flex and grid children

For evenly spacing the children of a flex or grid container, prefer gap-* over margins. It avoids the awkward “last item still has a margin” problem and uses the same 0 to 5 scale:

<div class="d-flex flex-wrap gap-3">...</div>

In the grid, the related gutter utilities g-*, gx-*, and gy-* control the space between columns and rows; see the grid guide.

Customize the scale

The default scale fits most designs, but you can change $spacer or extend the $spacers map in Sass to add your own steps:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

// add larger steps on top of the defaults
$spacers: map-merge($spacers, (
  6: $spacer * 4,    // 4rem
  7: $spacer * 6,    // 6rem
));

@import "bootstrap";

Now p-6, mt-7, and the rest exist alongside the built-in sizes. Because the variable system drives all of this, the quickest way to feel the effect is the visual builder: adjust $spacer, watch a full UI kit reflow live, and export clean Bootstrap Sass or CSS. The mechanics of overriding variables are in Bootstrap Sass variables explained.

Common patterns

• Vertical rhythm between sections: mb-5 (or larger) on each block.
• Card or button inner padding: p-3 / p-4.
• Center a fixed-width block: mx-auto with a width.
• Even spacing in a row of items: d-flex gap-3 rather than margins on each child.

Next steps

With spacing under control, the natural companions are flexbox utilities and the grid for layout, plus the color and typography guides for the rest of your theme.

FAQ

What do the m and p classes mean in Bootstrap?

m is margin and p is padding. You add an optional side (t, b, s, e, x, y) and a size (0 to 5, or auto), so mt-3 is margin-top size 3 and px-4 is horizontal padding size 4.

What are the Bootstrap spacing sizes?

Sizes 0 to 5 map to multiples of $spacer (1rem by default): 0 = 0, 1 = 0.25rem, 2 = 0.5rem, 3 = 1rem, 4 = 1.5rem, 5 = 3rem. Changing $spacer rescales them all.

How do I add a custom spacing size in Bootstrap?

Extend the $spacers Sass map before importing Bootstrap, for example adding 6: $spacer * 4. Bootstrap then generates the matching utilities like p-6 and mt-6 for you.

What is the difference between ms-/me- and ml-/mr- in Bootstrap?

Bootstrap 5 renamed the directional margin/padding utilities to logical ones: ms- (start) and me- (end) instead of ml- (left) and mr- (right). The logical versions flip automatically in right-to-left layouts.