Reading Time: 10 Minutes
Skill Level: Beginner to Intermediate
Topics: CSS Utilities, Layout, Spacing, Visual Effects
If you’ve used Bootstrap for any length of time, you’re probably comfortable with the basics: container, row, col-md-6, btn-primary, and maybe a few spacing utilities like mt-3 or p-4. But Bootstrap 5 comes packed with dozens of utility classes that can save you from writing a single line of custom CSS—if you know they exist.
These hidden gems can help you create more polished layouts, handle complex positioning, and add visual interest without ever opening your style.css file. Here are ten Bootstrap 5 utilities that deserve a spot in your daily toolkit.
What Are Utilities in Bootstrap 5?
Before we dive in, let’s clarify what we mean by “utilities.” In Bootstrap, utilities are low-level helper classes that apply a single CSS property or a small group of related properties . Think of them as Lego bricks—you combine them to build exactly what you need without writing custom CSS.
Bootstrap 5 has expanded its utility API significantly, making it easier to customize and extend these classes . Let’s explore the ones you might have missed.
1. Position Utilities: top-0, start-0, end-0, bottom-0
What they do: These utilities let you precisely position elements using top, right, bottom, and left properties.
Why you need them: Before Bootstrap 5, positioning an element absolutely required custom CSS. Now you can combine position-absolute with directional utilities for instant control .
Example:
html
<div class="position-relative" style="height: 200px; background: #f8f9fa;">
<div class="position-absolute top-0 start-0 p-2 bg-primary text-white">
Top Left
</div>
<div class="position-absolute top-0 end-0 p-2 bg-success text-white">
Top Right
</div>
<div class="position-absolute bottom-0 start-0 p-2 bg-warning">
Bottom Left
</div>
<div class="position-absolute bottom-0 end-0 p-2 bg-danger text-white">
Bottom Right
</div>
</div>
Pro tip: Combine with translate-middle to center elements perfectly on corners or edges .
2. Stack Helpers: hstack and vstack
What they do: These layout utilities create horizontal and vertical stacks with consistent spacing.
Why you need them: Flexbox is powerful but requires remembering multiple properties. hstack and vstack provide a shorthand for common flex layouts .
Example:
<!-- Horizontal stack with auto spacing -->
<div class="vstack gap-2 col-md-5 mx-auto">
<button type="button" class="btn btn-secondary">Save changes</button>
<button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>
<!-- Horizontal stack with auto spacing -->
<div class="hstack gap-3">
<input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
<button type="button" class="btn btn-secondary">Submit</button>
<div class="vr"></div>
<button type="button" class="btn btn-outline-danger">Reset</button>
</div>
3. Vertical Rule: vr
What it does: Creates a vertical divider line, similar to how <hr> works horizontally.
Why you need it: Manually creating vertical dividers with borders often leads to height inconsistencies. vr gives you a perfect vertical line that matches your Bootstrap theme .
Example:
html
<div class="hstack gap-3"> <div>Home</div> <div class="vr"></div> <div>Products</div> <div class="vr"></div> <div>About</div> <div class="vr"></div> <div>Contact</div> </div>
4. Object Fit: object-fit-cover, object-fit-contain
What they do: Control how images and videos fit within their containers (based on the CSS object-fit property).
Why you need them: Ever struggled to make images of different sizes look uniform in a card grid? These utilities are the solution.
Example:
html
<div class="card" style="width: 18rem;">
<img src="portrait.jpg" class="card-img-top object-fit-cover" style="height: 200px;" alt="...">
<div class="card-body">
<h5 class="card-title">Team Member</h5>
</div>
</div>
5. Ratio Helpers: ratio ratio-16x9
What they do: Create responsive containers with specific aspect ratios for embeds, videos, and images.
Why you need them: Previously called “responsive embed” helpers, these maintain consistent aspect ratios across all screen sizes .
Example:
html
<!-- YouTube video with perfect 16:9 aspect ratio --> <div class="ratio ratio-16x9"> <iframe src="https://www.youtube.com/embed/video-id" title="Video" allowfullscreen></iframe> </div> <!-- Custom ratio using CSS variables --> <div class="ratio" style="--bs-aspect-ratio: 50%;"> <div>This box stays at 2:1 ratio</div> </div>
6. Opacity Utilities: opacity-10 to opacity-100
What they do: Set opacity levels in 10% increments.
Why you need them: Before v5.1.0, opacity required custom CSS or manually adding inline styles. Now you have ten levels of opacity control .
Example:
html
<div class="bg-primary text-white p-3 opacity-100">100% opacity</div> <div class="bg-primary text-white p-3 opacity-75">75% opacity</div> <div class="bg-primary text-white p-3 opacity-50">50% opacity</div> <div class="bg-primary text-white p-3 opacity-25">25% opacity</div>
7. Visually Hidden: visually-hidden and visually-hidden-focusable
What they do: Hide content visually while keeping it accessible to screen readers.
Why you need them: Accessibility isn’t optional. These utilities replace the old sr-only classes and help you provide context for assistive technologies.
Example:
html
<button class="btn btn-primary"> <span class="visually-hidden">Search</span> 🔍 </button> <!-- Only visible when focused (great for skip links) --> <a href="#main-content" class="visually-hidden-focusable">Skip to main content</a>
8. Stretched Link: stretched-link
What it does: Makes a whole card or container clickable through a single link.
Why you need it: This utility creates a pseudo-element that extends the clickable area of a link to cover its entire containing block .
Example:
html
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">
<a href="#" class="stretched-link">Card with stretched link</a>
</h5>
<p class="card-text">Click anywhere on this card to activate the link.</p>
</div>
</div>
9. Text Truncation: text-truncate
What it does: Truncates long text with an ellipsis in a single line.
Why you need it: When dealing with dynamic content, you can’t always control text length. This utility prevents layout breaks .
Example:
html
<div class="row">
<div class="col-4">
<p class="text-truncate">
This is a very long piece of text that will be truncated with an ellipsis at the end if it exceeds the container width.
</p>
</div>
</div>
10. Overflow Utilities: overflow-auto, overflow-hidden, overflow-visible
What they do: Control how content behaves when it exceeds its container’s dimensions.
Why you need them: These are perfect for creating scrollable areas, hiding overflow content, or ensuring content remains visible .
Example:
html
<div style="height: 100px;" class="overflow-auto border p-2"> <p>This content is longer than its container...</p> <p>But users can scroll to see more because we used overflow-auto.</p> <p>Item 3</p> <p>Item 4</p> <p>Item 5</p> </div>
Bonus: Combining Utilities for Powerful Effects
The real magic happens when you combine these utilities. Here’s an example that uses several underutilized classes together:
html
<!-- A hero section with an overlay -->
<div class="position-relative overflow-hidden" style="height: 400px;">
<!-- Background image -->
<img src="hero-bg.jpg"
class="w-100 h-100 object-fit-cover position-absolute top-0 start-0"
alt="Hero background">
<!-- Dark overlay -->
<div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-50"></div>
<!-- Centered content -->
<div class="position-absolute top-50 start-50 translate-middle text-center text-white">
<h1 class="display-4">Welcome</h1>
<p class="lead">This hero section uses 5 different utilities</p>
<a href="#" class="btn btn-primary btn-lg stretched-link">Get Started</a>
</div>
</div>
How to Discover More Utilities
Bootstrap’s documentation is comprehensive, but it’s easy to miss utilities tucked away in corners of the site. Here are two excellent resources:
- The official Utilities API documentation – Shows how to customize and extend utilities: Bootstrap Utilities API
- Bootstrap’s blog – Announcements of new features often highlight underutilized classes: Bootstrap Blog
Final Thoughts
The beauty of Bootstrap 5’s utility system is that it grows with you. When you start, you might only use grid classes and buttons. As you become more comfortable, these utilities can dramatically reduce the amount of custom CSS you need to write.
The next time you find yourself reaching for your style.css file to add a simple positioning rule, a divider, or an overlay, pause and check if Bootstrap already has a utility for it. Chances are, it does—and it’s probably more consistent and responsive than what you’d write yourself.
What’s your favorite underrated Bootstrap utility? Let me know in the comments below!
