Hidden & Visible Classes

Sometimes building a perfectly scaling layout isn't enough. You often need to build UI components that exclusively exist on massive Desktop monitors, and entirely different buttons that only trigger on tiny mobile phone screens!

Warning for migrating developers: In older versions (like Bootstrap 3 or 4), you might mechanically use classes like .hidden-xs or .visible-md. Bootstrap 5 completely deleted these classes! Instead, Bootstrap 5 handles everything smoothly through powerful Display utilities combined directly with Breakpoints.

Hiding on Mobile (Showing on Desktop)

If you have a massive, complex navigation sidebar or a gigantic hero image that you definitively want to strictly hide from view on cellphones to save screen-estate, you must follow the Mobile-First protocol aggressively!

First, you forcefully delete it natively by applying .d-none. Then, you tell the browser to explicitly reactivate the block right when the screen becomes a Tablet (or Desktop) by subsequently chaining .d-md-block!

Resize the browser window!

The blue alert below will physically instantly vanish into thin air if you drag your browser window narrow enough to simulate a mobile phone!

Desktop Users Only!

You are currently viewing this comfortably on a screen larger than the 'MD' width breakpoint! If you were on a tiny cellphone natively, this complete box wouldn't even render!

<!-- Default to hidden (.d-none), but reactivate as a block purely on Medium monitors (.d-md-block) -->
<div class="d-none d-md-block">
    Only Desktop users have the layout space to handle this heavy graphic!
</div>

Hiding on Desktop (Showing on Mobile)

What if you want to build a specialized "Click here to call us!" button that should natively only ever appear for explicit mobile phone users?

Again, apply Mobile-First logic! You simply leave the element normally visible structurally by default. Then, you aggressively demand the browser to violently hide it exactly when the screen gets too large by explicitly attaching the .d-md-none utility!

Resize the browser window!

The green button below is invisible currently if you are reading this on an iPad or PC. Drag your window super tiny to see it appear securely!

<!-- Button is visible organically by default, but actively vanishes smoothly when on iPads or Desktops! -->
<button class="btn btn-success d-md-none">Specifically for Phones!</button>

Print Display Classes

Sometimes, users attempt to literally physically print out your application pages onto paper! Bootstrap also uniquely provides .d-print-none to cleanly strip off ugly Website Navigation Bars or Video embeds strictly specifically when your web document is actively being physically printed!

<!-- Sits flawlessly safely onscreen normally, but magically disappears if the user prints the HTML page! -->
<nav class="navbar d-print-none">...</nav>

« Previous Lesson Return to Course Home »