Display & Visibility Utilities

Prev Next

Bootstrap 5 gives you a full set of display value classes, plus responsive versions of each one so an element can show on desktop and disappear on mobile (or the reverse). It also draws a hard line between "gone for everyone" and "gone visually but still read by a screen reader" — a distinction that matters a lot for accessibility. We'll use TrailMap's sidebar filter panel to show both in action.

Note on this site: Codingwithsonu.com itself is built with Bootstrap 3. This track teaches Bootstrap 5 as its own independent subject — the two don't mix.

The Base Display Classes

Each class maps directly to a CSS display value.

Class	CSS value
`.d-none`	`display: none`
`.d-block`	`display: block`
`.d-inline`	`display: inline`
`.d-inline-block`	`display: inline-block`
`.d-flex`	`display: flex`
`.d-grid`	`display: grid`
`.d-table`	`display: table`

<div class="d-none">Never shows — removed from the layout entirely</div>
<span class="d-block">A span forced to act like a block</span>

Responsive Display: .d-md-none, .d-lg-block

Add a breakpoint infix (sm, md, lg, xl, xxl) between d- and the value to change display starting at that breakpoint and up. .d-md-none means "hidden from medium screens up" — combine it with a base class to control the mobile behaviour too.

<!-- Visible on mobile, hidden from md (768px) and wider -->
<div class="d-block d-md-none">Mobile-only trail summary</div>

<!-- Hidden on mobile, visible from lg (992px) and wider -->
<div class="d-none d-lg-block">Desktop-only elevation chart</div>

.visually-hidden vs .d-none

.d-none removes the element from the page entirely — sighted users and screen reader users alike get nothing. .visually-hidden keeps the element readable by assistive technology (it's still in the accessibility tree) while making it invisible on screen — the correct choice for things like a form label that's redundant visually but needed for screen readers.

Class	Sighted users	Screen reader users
`.d-none`	Not shown	Not announced
`.visually-hidden`	Not shown	Announced normally

<label for="trailSearch" class="visually-hidden">Search trails</label>
<input id="trailSearch" type="search" class="form-control" placeholder="Search trails...">

Note: A search box with a visible placeholder like "Search trails..." usually still needs a real <label> for accessibility — .visually-hidden is exactly how you keep that label out of the sighted layout without removing it from the page.

Worked Example: Hiding TrailMap's Filter Panel on Mobile

On a phone, a sidebar filter panel eats the whole screen before the user even sees a trail card. Hide it below the lg breakpoint and add a toggle button that only shows on mobile:

<div class="row">
  <!-- Filter panel: hidden by default, visible from lg up -->
  <div class="col-lg-3 d-none d-lg-block">
    <h6>Filter Trails</h6>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="dogFriendly">
      <label class="form-check-label" for="dogFriendly">Dog Friendly</label>
    </div>
  </div>

  <!-- Mobile-only button that opens the filters in a modal/offcanvas -->
  <div class="col-12 d-block d-lg-none mb-3">
    <button class="btn btn-outline-secondary w-100">Filter Trails</button>
  </div>

  <div class="col-lg-9">
    <!-- Trail cards go here -->
  </div>
</div>

Next up: Display utilities decide whether an element renders at all; Position Utilities decides exactly where a rendered element sits.

Prev Next