Bootstrap 5 Utility Classes: The Complete Cheat Sheet

Bootstrap 5 utility classes will save you hours of repetitive CSS work.

Spacing Utilities: Margin and Padding

Spacing utilities are the most frequently used Bootstrap 5 utilities. They follow a consistent naming pattern: {property}{side}-{breakpoint}-{size}.

• Properties: m (margin), p (padding)
• Sides: t (top), b (bottom), s (start/left), e (end/right), x (horizontal), y (vertical), or blank for all sides
• Sizes: 0 through 5, plus auto

<!-- 24px top padding, 0 bottom margin, auto horizontal margin -->
<div class="pt-4 mb-0 mx-auto">Centred content</div>

<!-- Responsive spacing: 16px padding on mobile, 48px on large screens -->
<section class="py-3 py-lg-6">...</section>

Negative margins are also available via m{side}-n{size} classes (e.g., mt-n2), which are useful for overlapping elements or pulling components outside their containers. For a deeper look at how spacing interacts with the grid, see Bootstrap 5 Columns and Gutters: Advanced Layout Techniques.

Display and Visibility Utilities

Display utilities map directly to the CSS display property and support all standard values.

<!-- Hidden on mobile, block on medium and up -->
<div class="d-none d-md-block">Desktop only content</div>

<!-- Inline-flex on all screen sizes -->
<span class="d-inline-flex align-items-center gap-2">
  <svg ...></svg> Label
</span>

Separate from display, Bootstrap 5 provides visibility utilities:

• visible — sets visibility: visible
• invisible — sets visibility: hidden (element still occupies space)

Use invisible rather than d-none when you need to preserve document flow while hiding something visually, such as a placeholder skeleton during a loading state.

Flexbox Utilities

Bootstrap 5’s flexbox utilities give you full control over flex containers and flex items without writing custom CSS. The key classes are:

• d-flex / d-inline-flex — activate flex context
• flex-row / flex-column (and -reverse variants) — direction
• justify-content-{value} — main-axis alignment (start, end, center, between, around, evenly)
• align-items-{value} — cross-axis alignment
• flex-wrap / flex-nowrap — wrapping behaviour
• gap-{size} — consistent spacing between flex children

<!-- Horizontal nav with centred items and gap -->
<nav class="d-flex flex-row align-items-center gap-3">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

<!-- Stack vertically on mobile, horizontally on md+ -->
<div class="d-flex flex-column flex-md-row gap-4">
  <div class="flex-fill">Column A</div>
  <div class="flex-fill">Column B</div>
</div>

For a comprehensive breakdown of alignment edge cases, the post on Bootstrap 5 Flexbox: Alignment Utilities That Actually Work covers scenarios including nested flex containers and RTL support.

Typography and Colour Utilities

Typography utilities handle text alignment, weight, size, line height, and decoration — all without custom CSS.

<!-- Large, bold, centred heading text -->
<h2 class="fw-bold fs-2 text-center">Section Heading</h2>

<!-- Muted small print -->
<p class="text-muted small lh-sm">Last updated: January 2026</p>

<!-- Truncate overflowing text -->
<p class="text-truncate" style="max-width: 200px;">Very long sentence that will be cut off</p>

Key typography utility groups:

• Font weight: fw-light, fw-normal, fw-semibold, fw-bold, fw-bolder
• Font size: fs-1 through fs-6
• Text alignment: text-start, text-center, text-end (responsive: text-md-start)
• Text transform: text-uppercase, text-lowercase, text-capitalize

Colour utilities apply text and background colours from Bootstrap’s theme palette:

• text-primary, text-secondary, text-success, text-danger, text-warning, text-info, text-light, text-dark, text-muted, text-white
• bg-primary, bg-secondary, bg-light, bg-dark, bg-transparent
• Background opacity modifier: bg-opacity-{10|25|50|75|100}

When working with a template that exposes custom CSS variables — such as the Canvas HTML Template‘s --cnvs-themecolor — you can pair these utilities with inline custom property overrides for fine-grained theming control without touching core Bootstrap files.

Sizing, Borders, and Shadow Utilities

Sizing utilities set width and height as percentages of the parent or as viewport units:

• w-25, w-50, w-75, w-100, w-auto
• h-25, h-50, h-75, h-100, h-auto
• mw-100 (max-width: 100%), mh-100 (max-height: 100%)
• vw-100, vh-100, min-vw-100, min-vh-100

Border utilities add, remove, and style borders:

<!-- Add border on all sides, change colour and radius -->
<div class="border border-primary border-2 rounded-3">Card</div>

<!-- Remove specific border -->
<div class="border border-bottom-0">No bottom border</div>

<!-- Circle avatar -->
<img src="avatar.jpg" class="rounded-circle" width="64" height="64" alt="User avatar">

Shadow utilities apply box shadows from the Bootstrap scale:

• shadow-none — removes all shadow
• shadow-sm — subtle shadow
• shadow — default shadow
• shadow-lg — pronounced shadow

Position and Overflow Utilities

Position utilities map to the CSS position property and include helper classes for placement:

• position-static, position-relative, position-absolute, position-fixed, position-sticky
• Edge placement: top-0, top-50, top-100, start-0, start-50, start-100, end-0, bottom-0
• Translation helper: translate-middle — centres an absolutely positioned element

<!-- Badge pinned to top-right corner of a card -->
<div class="position-relative d-inline-block">
  <img src="product.jpg" alt="Product">
  <span class="position-absolute top-0 end-0 translate-middle badge rounded-pill bg-danger">
    New
  </span>
</div>

Overflow utilities control content clipping: overflow-auto, overflow-hidden, overflow-visible, overflow-scroll. Bootstrap 5.3 also introduced overflow-x-{value} and overflow-y-{value} for axis-specific control.

Extending Utilities with the Bootstrap 5 Utility API

The Bootstrap 5 Utility API is defined in _utilities.scss and lets you generate your own utility classes using the same engine Bootstrap uses internally. You add entries to the $utilities map in your SCSS before importing Bootstrap.

<!-- After generating a custom 'letter-spacing' utility via the API -->
<h2 class="tracking-wide text-uppercase fw-bold">Section Title</h2>

The SCSS configuration for that utility would look like:

<!-- In your custom SCSS (before @import "bootstrap") -->
<!--
$utilities: map-merge(
  $utilities,
  (
    "letter-spacing": (
      property: letter-spacing,
      class: tracking,
      values: (
        tight: -0.05em,
        normal: 0,
        wide: 0.1em,
        wider: 0.2em
      )
    )
  )
);
-->

This approach keeps all your utilities consistent, responsive-ready, and generated from a single source of truth. For a broader look at customising Bootstrap through SCSS, see How to Use SCSS Variables to Theme a Bootstrap 5 Site.

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 working with the Canvas HTML Template and want to generate production-ready layouts faster, try Canvas Builder free and see how much time you save on every project.