Using Bootstrap 5 Display Utilities for Breakpoint‑Based Show/Hide

The Problem: Managing Visibility Across Devices

When building a responsive layout, designers often need to hide a navigation pane on phones while showing it on tablets and desktops. Writing custom media queries for each element can scatter CSS across files and make the intent hard to follow in the markup.

How Bootstrap 5 Display Utilities Work

Bootstrap 5 ships with a set of utility classes that map directly to the CSS display property. The base class .d-none sets display: none;. Prefixes correspond to the breakpoint names defined in Sass: sm, md, lg, xl, and xxl. For example, .d-md-block applies display: block; only at the medium breakpoint and up.

Because the utilities are mobile‑first, you can stack them to create a show/hide pattern. An element with .d-none .d-md-block is hidden (display:none;) on extra‑small and small screens, then becomes a block‑level element from medium upward.

These classes are generated from Sass maps ($grid-breakpoints and $display-values). If you need a custom breakpoint, you can extend the map and recompile Bootstrap; the utility names stay the same, but their underlying widths change.

Worked Example: Show a Sidebar from Medium Up

Consider a page with a main content area and a sidebar that should collapse on narrow viewports.

<div class="container">
  <div class="row">
    <div class="col-12 col-md-9">
      <main>Main content</main>
    </div>
    <div class="col-12 col-md-3 d-none d-md-block">
      <aside>Sidebar</aside>
    </div>
  </div>
</div>

The sidebar column uses col-12 col-md-3 for width and d-none d-md-block for visibility. Below the medium breakpoint (@media (min-width: 768px) by default) the d-none class forces the element to display:none;, removing it from the layout. At 768 px or wider, d-md-block overrides it with display:block;, so the sidebar appears alongside the main column.

To verify the behavior:

1. Open the page in a browser.
2. Open DevTools and select the sidebar element.
3. In the Computed pane, watch the display property as you drag the viewport width.
4. You should see it change from none to block when the width crosses the medium breakpoint.

If you have recompiled Bootstrap with a custom $grid-breakpoints map (e.g., setting the medium breakpoint to 900px), the same class combination will now toggle at 900 px instead of the default 768 px.

Trade‑offs and Limitations

While the utility classes keep styling in the HTML, over‑loading an element with many d-* tokens can make the markup noisy and obscure the visual intent. A long chain like .d-none .d-sm-inline .d-md-none .d-lg-flex requires the reader to mentally parse each breakpoint.

Another limitation is that the utilities are tied to the compiled breakpoint values. If you adjust $grid-breakpoints in your Sass source but forget to rebuild the CSS, the classes will still respond to the old widths, leading to mismatched behavior.

Finally, the utilities only affect the display property. For more complex changes (e.g., altering visibility or applying transforms) you still need custom CSS or additional utility classes.

Putting It Into Practice

Start by identifying components that need a simple show/hide toggle at a known breakpoint. Apply the minimal pair of utilities (.d-none plus a breakpoint‑specific d-{breakpoint}-{value}) and test with the browser’s responsive mode. Keep the number of tokens per element to two or three whenever possible, and document any custom breakpoint changes in your project’s build instructions so teammates know to recompile after adjusting Sass variables.