Spacing Utilities
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.
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 |
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>