🖥️ Bootstrap 5 – Display Utilities: Show, Hide, and Toggle Elements Easily
🧲 Introduction – What Are Bootstrap 5 Display Utilities?
Bootstrap 5 includes powerful display utility classes that allow developers to control the visibility and display type of HTML elements without writing custom CSS. Whether you want to hide/show content across breakpoints or change how elements behave (block, inline, flex), these utilities offer a responsive, mobile-first way to manage layouts.
🎯 In this guide, you’ll learn:
- How to use
.d-*classes to manage display types - Responsive visibility toggling across breakpoints
- Best use cases for hiding/showing elements on specific devices
- Real-world UI use cases like nav menus, cards, and form sections
✅ Example 1 – Display Block and Inline Elements
<p class="d-block">I’m displayed as a block element</p>
<span class="d-inline">I’m inline</span>
| Class | Description |
|---|---|
.d-block | Forces element to display as block |
.d-inline | Displays element as inline |
🔍 Result: The paragraph takes full width, while the span appears inline with adjacent content.
✅ Example 2 – Hide and Show Elements
<div class="d-none">This is hidden</div>
<div class="d-block">This is visible</div>
| Class | Behavior |
|---|---|
.d-none | Hides the element (display: none) |
.d-block | Makes the element visible again |
✅ Useful for conditional rendering, collapsible content, and modals.
✅ Example 3 – Responsive Show/Hide (Mobile to Desktop)
<div class="d-none d-md-block">Visible only on md and up</div>
<div class="d-block d-md-none">Visible only on mobile</div>
| Class | Effect |
|---|---|
.d-none | Hides by default on all devices |
.d-md-block | Shows as block on medium (≥768px) and up |
.d-md-none | Hides from medium and above |
🧪 Perfect for: Navigation menus, filters, footers, or banners that should be device-specific.
✅ Example 4 – Toggle Between Display Modes
<div class="d-inline d-sm-block d-lg-inline-block">
I'm inline by default, block on small, inline-block on large+
</div>
| Class | Behavior |
|---|---|
.d-inline | Default on extra-small (XS) |
.d-sm-block | Block on small (≥576px) |
.d-lg-inline-block | Inline-block on large (≥992px) |
💡 Responsive UI Tip: This technique is great for building adaptive toolbars or responsive text alignment blocks.
📊 Display Utility Classes Reference Table
| Class | Description |
|---|---|
.d-none | display: none |
.d-inline | display: inline |
.d-inline-block | display: inline-block |
.d-block | display: block |
.d-grid | display: grid |
.d-table | display: table |
.d-table-cell | display: table-cell |
.d-flex | display: flex |
.d-inline-flex | display: inline-flex |
📱 Each of these classes can be extended responsively:
.d-sm-none,.d-md-flex,.d-lg-inline, etc.
🛠️ Best Practices for Display Utilities
| Tip | Why It Matters |
|---|---|
Use .d-none + breakpoint classes | To hide/show content responsively across screen sizes |
Avoid using .d-* for layout hacks | Use grid/flex utilities instead for structured layouts |
Combine with .visually-hidden for a11y | Use .visually-hidden for screen readers, not .d-none |
| Test on real devices | Hidden elements may still occupy space depending on context |
📌 Summary – Mastering Display Utilities in Bootstrap 5
Bootstrap 5 display utilities make responsive visibility and layout toggling seamless. You can show, hide, or alter the display type of elements at different breakpoints without custom CSS.
🔍 Key Takeaways:
.d-nonehides elements completely- Use
.d-*classes to switch between block, flex, inline, etc. - Combine breakpoints like
.d-md-none,.d-lg-flexfor device-based control - Don’t confuse
.d-nonewith.visually-hidden(they serve different purposes)
⚙️ Great for responsive navs, alerts, sidebars, headers, and mobile-optimized interfaces.
❓ FAQs – Bootstrap 5 Display Utilities
❓ What is the difference between .d-none and .visually-hidden?
✅ .d-none removes the element visually and from screen readers. .visually-hidden hides it visually but still keeps it accessible to assistive tech like screen readers.
❓ How do I hide an element only on small devices?
✅ Use .d-none d-sm-block. This hides the element on XS and shows from SM (576px+) onwards.
❓ Can I apply multiple .d-* classes for different breakpoints?
✅ Yes! Example: .d-none d-md-block d-lg-flex toggles the element’s display type at each screen size.
❓ Can I switch between grid and flex using display utilities?
✅ Absolutely. Use .d-grid, .d-flex, or .d-inline-flex as needed. Combine with responsive utilities for even more control.
Share Now :
