Bootstrap 5 Utilities: 15 Tips to Write Less Custom CSS

When I first learned Bootstrap I wrote a lot of custom CSS just to add margin between two buttons. Then I discovered utility classes and my style.css file quietly shrank by 60%. Utilities are atomic helpers — one class, one CSS property. Bootstrap 5 ships hundreds of them, and stringing them together is how modern Bootstrap pages are actually built. Here are the 15 patterns I use on almost every project.

1. Spacing — the class name pattern that unlocks everything

Use m (margin) or p (padding) + side (t, b, s, e, x, y, blank=all) + size (0–5, or auto). Once the pattern clicks, you can write spacing without looking anything up.

<div class="p-3 mt-4 mb-2 ms-auto">…</div>
<!-- padding: 1rem; margin-top: 1.5rem; margin-bottom: 0.5rem; margin-left: auto; -->

• t/b — top/bottom, s/e — start/end (RTL-aware), x/y — horizontal/vertical
• 0=0, 1=.25rem, 2=.5rem, 3=1rem, 4=1.5rem, 5=3rem, auto
• Responsive: mt-md-4 = margin-top 1.5rem from md up

2. Flex utilities you'll write hourly

<div class="d-flex align-items-center justify-content-between gap-3 flex-wrap">
  <span>Title</span>
  <button class="btn btn-sm btn-primary">Action</button>
</div>

3. Responsive display

<!-- hide on mobile, show from md up -->
<aside class="d-none d-md-block">…</aside>

<!-- show on mobile, hide from md up -->
<button class="d-md-none">Menu</button>

4. Typography helpers

• text-muted / text-secondary / text-body-emphasis
• text-truncate — single-line ellipsis (needs a fixed width)
• text-uppercase / text-capitalize / text-lowercase
• fs-1 through fs-6 — responsive font-size scale
• fw-bold / fw-semibold / fw-normal / fw-light
• lh-1 / lh-sm / lh-base / lh-lg — line-height

5. Backgrounds and borders

<div class="bg-body-tertiary border rounded-3 shadow-sm p-4">
  A perfect card, zero custom CSS.
</div>

6. Aspect ratios for images and iframes

<div class="ratio ratio-16x9">
  <iframe src="https://youtube.com/embed/..." allowfullscreen></iframe>
</div>

7. vstack and hstack — Flexbox in one class

<div class="vstack gap-3">…stacked vertically with gap…</div>
<div class="hstack gap-2">…horizontal with gap…</div>

8. Position and sticky

• position-relative / position-absolute / position-fixed / position-sticky
• top-0 / start-0 / end-0 / bottom-0
• translate-middle for centered popovers

9. Colors that respect dark mode

Bootstrap 5.3 introduced 'theme-aware' color utilities: text-body, text-body-emphasis, bg-body, bg-body-tertiary. Use these instead of text-dark / bg-white and dark mode works automatically.

10. Container and container-fluid

<div class="container">Fixed max-width, centered.</div>
<div class="container-fluid">Full-width.</div>
<div class="container-md">Fluid until md, then fixed.</div>

The last 5 quick wins

• opacity-50 — quickly dim disabled UI
• user-select-none — prevent accidental text selection on buttons
• overflow-hidden / overflow-auto
• z-1 / z-2 / z-3 — new z-index utilities in 5.3
• min-vh-100 — full viewport height sections