</>CodeCraft Hub
🅱️ Bootstrap Framework

Bootstrap 5 Utilities: 15 Tips to Write Less Custom CSS

By The CodeCraft Team··7 min read
Bootstrap utility classes annotated on a UI mockup

Utility classes are atomic helpers — one class, one purpose. Bootstrap 5 ships hundreds of them, and stringing them together is how modern Bootstrap pages are actually built.

Spacing in one class

Use m (margin) or p (padding) + side (t, b, s, e, x, y) + size (0–5). Example: pt-3 = padding-top 1rem.

Flex utilities

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

Responsive variants

Almost every utility supports breakpoint infixes: d-none d-md-block hides on mobile, shows from md up.

Quick wins to remember

  • text-muted, text-truncate, text-uppercase
  • shadow-sm, rounded-3, border
  • bg-body-tertiary for subtle surfaces
  • ratio ratio-16x9 for responsive media
  • vstack and hstack for quick layouts

Frequently asked questions

Are utility classes bad for maintainability?

Not at scale — they're consistent, predictable, and ship a smaller CSS bundle than thousands of bespoke classes.

Keep reading

External references

Enjoyed this article?

Share it with a fellow developer or explore more tutorials in our blog.

More articles

Related articles