The Complete Bootstrap 5 Utility Class Reference for 2026

Spacing: Margin, Padding, and Gap

Spacing utilities follow the pattern {property}{sides}-{breakpoint}-{size}. The size scale runs from 0 to 5, mapping to $spacer multiples (default 1rem), plus auto for margins.

<!-- 16px padding on all sides, 32px margin-top on md+ -->
<div class="p-3 mt-md-4">Content</div>

<!-- Gap between flex children — no wrapper padding hack needed -->
<div class="d-flex gap-3">
  <div>Card</div>
  <div>Card</div>
</div>

Gap utilities (gap-, row-gap-, column-gap-*) were added in Bootstrap 5.2 and are the cleanest way to space flex and CSS Grid children. Before 5.2, developers resorted to negative margin hacks on .row — those patterns are now legacy and should be phased out. The gap scale also runs 0–5 and supports all five responsive breakpoints.

One genuine limitation: the default scale tops out at 5 (3rem). If your design system needs 4rem or 5rem spacing, extend the map in SCSS rather than writing inline styles:

/ _custom-utilities.scss /
$spacers: map-merge($spacers, (
  6: 4rem,
  7: 5rem
));

Display and Flexbox Utilities

Display utilities use the pattern d-{breakpoint}-{value}. Common values are none, block, inline-block, flex, inline-flex, and grid. The d-grid utility enables CSS Grid on a container, after which gap-* handles gutters.

<!-- Hide on mobile, show as flex on md+ -->
<nav class="d-none d-md-flex align-items-center gap-3">
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>

Flexbox direction, wrapping, alignment, and justification each have their own utility families: flex-row/flex-column, flex-wrap/flex-nowrap, align-items-, justify-content-, align-self-, and order-. All support responsive infixes. If you find yourself writing more than four flex utilities on a single element, that is a signal to extract a component class — a point covered in detail in 8 Common Bootstrap 5 Mistakes (and How to Fix Them).

Typography Utilities

Typography utilities govern size, weight, alignment, transform, decoration, and line-height. The font-size scale (fs-1 through fs-6) mirrors the heading hierarchy but applies only the size, not semantic meaning — useful for visual overrides without changing the DOM element.

<!-- Large body copy without using an h-tag -->
<p class="fs-4 fw-light lh-lg text-muted">
  Lead paragraph copy goes here.
</p>

<!-- Responsive text alignment -->
<h2 class="text-center text-md-start">Section Heading</h2>

Bootstrap 5.3 added fs-* responsive variants, but they are not enabled by default in the utility API — you must opt-in via SCSS if you need fs-4 to change at breakpoints. Font-weight utilities run fw-lighter, fw-light, fw-normal, fw-medium, fw-semibold, fw-bold, fw-bolder. Note that fw-medium and fw-semibold were added in Bootstrap 5.2 and are missing from older CDN builds.

Color and Background Utilities

Text color utilities follow text-{color} and cover the full theme palette: primary, secondary, success, danger, warning, info, light, dark, body, muted, white, black-50, and white-50. Bootstrap 5.3 also exposes text-body-secondary and text-body-tertiary which automatically adapt to the active color mode — use these instead of text-muted in new builds.

<!-- Color-mode-aware secondary text -->
<p class="text-body-secondary">Subtitle that adapts in dark mode</p>

<!-- Subtle backgrounds, also new in 5.3 -->
<div class="bg-primary-subtle text-primary-emphasis p-3 rounded">
  Info callout
</div>

The bg--subtle and text--emphasis pairs introduced in Bootstrap 5.3 are particularly valuable for accessible callout blocks without hardcoded hex values. Because they use CSS custom properties under the hood, they respect data-bs-theme="dark" automatically — a major time-saver discussed further in How to Add Dark Mode to a Bootstrap 5 HTML Template the Right Way.

Sizing and Position Utilities

Width and height utilities use percentage-based values: w-25, w-50, w-75, w-100, w-auto, and the viewport equivalents vw-100, vh-100. The mw-100 and mh-100 utilities cap max-width and max-height at 100% of the parent — essential for responsive images and embeds.

<!-- Full-height hero section -->
<section class="d-flex align-items-center min-vh-100">
  <div class="container">Hero content</div>
</section>

Position utilities cover position-static, position-relative, position-absolute, position-fixed, and position-sticky. Combine them with placement utilities — top-0, top-50, top-100, start-0, start-50, start-100, end-0, bottom-0 — and translate utilities (translate-middle, translate-middle-x, translate-middle-y) to centre elements without a single line of custom CSS:

<!-- Absolutely centred badge -->
<div class="position-relative">
  <img src="avatar.jpg" class="rounded-circle" width="80" alt="User">
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    3
  </span>
</div>

Borders, Shadows, and Rounded

Border utilities add or remove borders: border, border-top, border-0, border-top-0. Color and width are separate utilities: border-primary, border-2 (1–5 scale). Rounded utilities run from rounded-0 (sharp) to rounded-5 (highly rounded) plus rounded-circle and rounded-pill. Shadow utilities — shadow-none, shadow-sm, shadow, shadow-lg — use CSS custom properties in Bootstrap 5.3, so they also respond to dark mode without overrides.

The Utility API: Extending Without Bloat

Bootstrap 5’s Utility API (introduced in 5.0) lets you generate custom utility classes from a SCSS map rather than writing them by hand. This approach keeps output predictable and purgeable by tools like PurgeCSS:

/ Add a custom letter-spacing utility /
$utilities: map-merge(
  $utilities,
  (
    "letter-spacing": (
      property: letter-spacing,
      class: ls,
      values: (
        tight: -0.05em,
        normal: 0,
        wide: 0.1em,
        wider: 0.2em,
      )
    )
  )
);

This generates .ls-tight, .ls-normal, .ls-wide, and .ls-wider. Add responsive: true to the map to get breakpoint variants for free. Templates like the Canvas HTML Template extend Bootstrap’s utility layer through their own SCSS partials — checking the source is a faster way to learn production patterns than reading documentation alone. For a deeper comparison of SCSS extension strategies, see SCSS vs CSS Variables for Theming Bootstrap 5.

Looking for a production-ready Bootstrap 5 HTML template? Browse Canvas Template demos and find the perfect starting point for your next project.

If you’re building with the Canvas HTML Template and want to ship production-ready Bootstrap 5 layouts faster, try Canvas Builder free — the visual builder that exports clean Canvas-ready markup in minutes.