Display & Visibility Utilities

Display utilities let you set an element's CSS display value straight from a class name, and combine that with a breakpoint infix to change it per screen size. There's also a special class, .sr-only, for content that should stay in the DOM for screen readers but never appear visually. We'll use both to build a filter panel for TrailMap's trail listing page that only shows on larger screens.

Basic Display Utilities

The core classes map directly onto CSS display values: .d-none (none), .d-inline (inline), .d-inline-block (inline-block), .d-block (block), .d-table (table), and .d-flex/.d-inline-flex (flex/inline-flex).

<!-- TrailMap: hide the old banner without deleting the markup -->
<div class="d-none">Seasonal closure notice (archived)</div>

Responsive Display Utilities

Insert a breakpoint into the class name — .d-{breakpoint}-{value} — to change display starting at that breakpoint and up: .d-sm-*, .d-md-*, .d-lg-*, .d-xl-*. A class like .d-md-none hides an element from the md breakpoint upward, while .d-lg-block shows it as a block starting at lg.

<!-- TrailMap: show a compact filter button on mobile, the full panel from md up -->
<button class="btn btn-outline-secondary d-md-none">Filters</button>
<div class="d-none d-md-block">
  <!-- full filter panel markup -->
</div>

Screen-Reader-Only Content: .sr-only

.sr-only visually hides an element while keeping it readable by assistive technology — useful for icon-only buttons or extra context sighted users don't need. Add .sr-only-focusable alongside it to make the element reappear visually when it receives keyboard focus, which matters for "skip to content" links.

<button class="btn btn-outline-secondary">
  <i class="fa fa-heart"></i>
  <span class="sr-only">Save this trail</span>
</button>
Naming note: .sr-only is the Bootstrap 4 name for this class, and it's the one used throughout this track. Bootstrap 5 later renamed it to .visually-hidden (keeping a deprecated .sr-only alias for a while during the transition) to describe what the class actually does rather than who it's for. In Bootstrap 4, .visually-hidden doesn't exist — you must use .sr-only.

Worked Example: Hiding TrailMap's Sidebar Filter Panel on Mobile

TrailMap's trail listing page has a filter sidebar (region, difficulty, distance) that takes up too much room on a phone screen. Combining .d-none with .d-md-block hides it below the md breakpoint and reveals it as a normal block from md up, while a mobile-only toggle button covers the small-screen case.

<div class="row">
  <button class="btn btn-outline-secondary d-md-none mb-3">
    <i class="fa fa-filter"></i> Filters
  </button>

  <aside class="col-md-3 d-none d-md-block">
    <h6>Region</h6>
    <h6>Difficulty</h6>
    <h6>Distance</h6>
  </aside>

  <div class="col-md-9">
    <!-- trail cards -->
  </div>
</div>
Up next: Once an element is visible, Position Utilities control exactly where it sits relative to its container and the viewport.