Spacing Utilities

Bootstrap 4 ships a full margin and padding scale as utility classes, so you rarely need to write margin or padding in a custom stylesheet just to nudge something over. Every value in the scale is available for all four sides individually, or grouped horizontally/vertically, and we'll use them to space out a TrailMap trail card without touching a single line of CSS.

The Spacing Scale: 0 Through 5, Plus auto

Every spacing utility follows the pattern {property}{sides}-{size}. The size is a number from 0 to 5 (each step is a multiple of 0.25rem, so 3 is 1rem), or the keyword auto for margins.

Class suffixComputed value
-00
-10.25rem
-20.5rem
-31rem
-41.5rem
-53rem
-autoauto (margin only)

Margin Utilities: m-*, mt-*, mb-*, ml-*, mr-*, mx-*, my-*

m-* sets margin on all four sides at once. mt-*/mb-* target top/bottom, ml-*/mr-* target left/right, and mx-*/my-* target the horizontal or vertical pair together.

<!-- TrailMap: a "featured" badge nudged away from the card edges -->
<span class="badge badge-warning mt-2 ml-2">Featured</span>
Bootstrap 4 uses left/right, not logical properties. ml-* and mr-* are literally "margin-left" and "margin-right" — they always mean the same physical side, in every language direction. Bootstrap 5 renamed these to ms-* (margin-start) and me-* (margin-end) so they flip automatically in right-to-left layouts. That rename does not exist in Bootstrap 4 — if you type ms-2 or me-2 here, nothing happens, because those classes simply aren't defined.

Padding Utilities: p-*, pt-*, pb-*, pl-*, pr-*, px-*, py-*

Padding utilities follow the exact same naming pattern as margin, just with p instead of m — and padding has no auto keyword, since padding: auto isn't a valid value in CSS.

<div class="card px-3 py-4">
  <h5>Blue Ridge Overlook</h5>
</div>

Worked Example: A TrailMap Card With Spacing Utilities

Here's a trail card from TrailMap's listing page, spaced entirely with utility classes: outer margin to separate it from its neighbors, inner padding around the content, and a small top margin to push the "Save" button away from the description text above it.

<div class="card mb-3">
  <div class="card-body px-4 py-3">
    <h5 class="card-title mb-1">Blue Ridge Overlook</h5>
    <p class="card-text mb-2">4.2 mi loop · Moderate · 620 ft gain</p>
    <button class="btn btn-sm btn-outline-primary mt-2">Save Trail</button>
  </div>
</div>
Up next: Spacing controls the gaps between elements — Sizing Utilities controls how big the elements themselves are.