Spacing Utilities

Prev Next

Instead of writing margin and padding in a stylesheet, Bootstrap 5 gives you a consistent numeric scale of spacing classes you apply straight in the markup. Once you know the pattern — property, side, size — you can space out almost any layout, including a TrailMap trail card, without a single custom CSS rule.

Note on this site: Codingwithsonu.com itself is built with Bootstrap 3. This track teaches Bootstrap 5 as its own independent subject — the two don't mix.

The Spacing Class Pattern

Every spacing class follows: {property}{sides}-{size}

Part	Options
property	`m` for margin, `p` for padding
sides	`t` (top), `b` (bottom), `s` (start), `e` (end), `x` (left+right), `y` (top+bottom), or blank for all 4 sides
size	`0`, `1`, `2`, `3`, `4`, `5` (a step scale tied to `$spacer`), or `auto` for margin only

<div class="m-3">Margin on all 4 sides, step 3</div>
<div class="p-0">No padding at all</div>
<div class="mx-auto" style="width: 200px;">Horizontally centered block</div>

Directional Classes: mt, mb, ms, me, mx, my

Need space on just one side? Use the directional variants — the same pattern applies to padding as pt-*, pb-*, ps-*, pe-*, px-*, py-*.

<h5 class="mb-1">Blue Ridge Loop</h5>
<p class="mt-0 mb-2 text-muted">8.2 km · Moderate</p>
<a href="#" class="btn btn-primary me-2">View Trail</a>
<a href="#" class="btn btn-outline-secondary">Save</a>

Why ms-/me- Instead of ml-/mr-

Bootstrap 4 used ml-* (margin-left) and mr-* (margin-right). Bootstrap 5 renamed these to ms-* (margin-start) and me-* (margin-end), built on CSS logical properties (margin-inline-start / margin-inline-end) instead of physical left/right.

Bootstrap 4	Bootstrap 5
`ml-` / `mr-`	`ms-` / `me-`
`pl-` / `pr-`	`ps-` / `pe-`
Fixed to left-to-right languages	Automatically flips in right-to-left (RTL) languages like Arabic or Hebrew

Note: In a left-to-right layout, "start" behaves exactly like "left" and "end" behaves exactly like "right" — so nothing about your everyday English-language site changes visually. The benefit shows up the moment the page needs to support an RTL language: the same ms-3 class automatically becomes a right-side margin, no code changes required.

The Size Scale in Practice

0 through 5 map to multiples of Bootstrap's base $spacer variable (default 1rem): 0 = 0, 1 = 0.25rem, 2 = 0.5rem, 3 = 1rem, 4 = 1.5rem, 5 = 3rem.

<div class="p-1 bg-light">p-1 — 0.25rem padding</div>
<div class="p-3 bg-light">p-3 — 1rem padding</div>
<div class="p-5 bg-light">p-5 — 3rem padding</div>

Worked Example: A TrailMap Card With Spacing Utilities Only

No custom CSS — every gap in this card comes from a spacing utility class:

<div class="card mb-4">
  <img src="blue-ridge-loop.jpg" class="card-img-top" alt="Blue Ridge Loop">
  <div class="card-body p-4">
    <h5 class="card-title mb-1">Blue Ridge Loop</h5>
    <p class="text-muted mb-3">8.2 km · Moderate · 420 m gain</p>
    <p class="card-text mb-4">A shaded loop with two stream crossings and a summit overlook.</p>
    <a href="#" class="btn btn-primary me-2">View Trail</a>
    <a href="#" class="btn btn-outline-secondary">Save for Later</a>
  </div>
</div>

Next up: Spacing controls the room around an element; the next lesson, Sizing Utilities, controls the element's own width and height.

Prev Next