Bootstrap Display and Visibility: How to Show or Hide Elements

In Bootstrap 5, use responsive .d-* display utilities to show or hide an element at selected viewport widths. Use .d-none to remove it from layout, .invisible to hide it while preserving its space, and .visually-hidden to hide content visually while keeping it available to assistive technologies.

These classes are not interchangeable. Choose based on the layout effect you want and whether screen readers should receive the content. The examples below target Bootstrap 5.3; check your installed Bootstrap version before copying class names.

1. Choose the right kind of hiding

Class	Layout effect	Assistive technology	Use it for
`.d-none` or `.d-{breakpoint}-none`	Sets `display: none`; the element does not take up layout space.	Hidden content is not exposed while hidden.	Removing an element from layout at all or selected screen sizes.
`.invisible`	Keeps the element’s display behavior and its layout space.	Bootstrap documents it as hidden from assistive technology too.	Leaving a deliberate blank area where content would otherwise appear.
`.visually-hidden`	Visually hides content using Bootstrap’s helper styles.	Content remains available to assistive technologies.	Adding screen-reader-only context or a label.
`.visually-hidden-focusable`	Visually hidden until it receives keyboard focus.	Available to assistive technologies and visible on focus.	Skip links and other controls users should be able to reveal.

Bootstrap’s v5.3 visibility documentation explains that .invisible does not change display, so invisible elements still take up space. Use it only when that reserved space is intentional.

References: Bootstrap 5.3 display utilities, visibility utilities, and visually hidden helpers.

2. Hide an element at every screen size

Add .d-none to hide an element from the layout at all breakpoints:

<div class="d-none">
  This element is not displayed.
</div>

To show it again, remove the class or use JavaScript to toggle it. A responsive class can also restore a display mode at a chosen breakpoint.

3. Show or hide an element at a breakpoint

Bootstrap’s responsive display utilities use minimum-width breakpoints. A class such as .d-md-none applies at the md breakpoint and wider. To hide content below md and show it as a block from md upward, combine classes:

<div class="d-none d-md-block">
  Hidden below md; displayed as a block at md and wider.
</div>

The first class hides the element everywhere; the second overrides that display value from md upward. Pick the display mode that fits the element and its parent layout.

Hide only on small screens

<nav class="d-none d-md-flex">
  <a href="/docs">Documentation</a>
  <a href="/pricing">Pricing</a>
</nav>

This navigation is hidden below md and uses flex display at md and wider. If a small-screen replacement is needed, provide a separate suitable control, such as a menu button, and make sure it works with a keyboard and assistive technology.

Show only between two breakpoints

<div class="d-none d-md-block d-xl-none">
  Shown from md until xl.
</div>

Here, .d-md-block begins displaying the element at md; .d-xl-none hides it again at xl and above. Bootstrap breakpoints are minimum-width rules, so a bounded range typically needs both a class that starts showing the element and another that hides it at the next boundary.

Use the display mode the element needs

Bootstrap provides responsive display utilities with values including none, block, inline, inline-block, flex, grid, and table display variants. For example, use .d-md-flex when the element should become a flex container at md. Do not assume that showing something with .d-md-block preserves its former flex or grid layout; explicitly choose the needed display value.

For the full class list and breakpoint behavior, see the Bootstrap 5.3 display documentation.

4. Hide an element but keep its space

Use .invisible when the element should not be seen but its layout space should remain:

<div class="invisible">
  Hidden content that still occupies space.
</div>

This is useful when hiding content temporarily without shifting nearby elements. Because Bootstrap documents .invisible as hidden from assistive technology as well as sighted users, it is not a screen-reader-only technique. If the blank space is not wanted, use .d-none instead.

See Bootstrap’s visibility utilities for the documented behavior.

5. Hide content visually but keep it accessible

Use .visually-hidden for content that should remain available to screen-reader users, such as extra context that is unnecessary on screen:

<button type="button" class="btn btn-primary">
  <span class="visually-hidden">Close dialog</span>
  &times;
</button>

In production, make sure an icon-only control has a clear accessible name and that the icon itself does not create a confusing duplicate announcement. Another common use is adding context to a visible status:

<p>
  <span class="visually-hidden">Current status: </span>
  In progress
</p>

Do not use .d-none or .invisible when the content must still be available to assistive technologies.

A skip link should be discoverable by keyboard users. Bootstrap’s .visually-hidden-focusable helper keeps it hidden until it receives focus:

<a class="visually-hidden-focusable" href="#main-content">
  Skip to main content
</a>

<main id="main-content">
  <h1>Page title</h1>
</main>

Test the link by pressing Tab from the top of the page. It should become visible when focused and move focus to a real target. See Bootstrap’s visually hidden helper documentation.

6. Change display for printing

Bootstrap 5.3 includes .d-print-* utilities for print-specific display behavior. For example, hide screen navigation when printing and show a print-only note:

<nav class="d-print-none">
  Screen navigation
</nav>

<p class="d-none d-print-block">
  Printed copy of this document.
</p>

Print behavior is separate from the responsive viewport breakpoints. See the display utility reference for available print classes.

7. Check your Bootstrap version

Display and visibility class names changed across major Bootstrap releases. Bootstrap 5 uses the responsive .d-* display utilities. Bootstrap 4.6 documents the same general .d-{breakpoint}-{value} pattern through xl, along with print utilities. Bootstrap 3 documentation uses older patterns such as .hidden-*, .visible-*, .show, and .hidden; its screen-reader helpers use .sr-only and .sr-only-focusable.

Use the documentation for the version installed in your project: Bootstrap 5.3, Bootstrap 4.6, or Bootstrap 3 CSS documentation. Do not paste Bootstrap 3 class names into a Bootstrap 5 project.

8. Troubleshooting

Problem	Likely cause	Fix
An element stays visible despite `.d-none`.	Bootstrap CSS is missing, a project rule overrides the utility, or the class is misspelled.	Confirm the Bootstrap stylesheet is loaded, inspect the computed `display` value, and check for stronger selectors or inline styles.
An element disappears at every width.	`.d-none` is present without a later breakpoint class that restores display.	Add a class such as `.d-md-block` or remove the always-hidden utility if it is not needed.
The element does not appear at the expected width.	Breakpoint classes apply at their named minimum width, or the viewport is narrower than expected.	Check the viewport width and the Bootstrap version. For an interval, verify both the show and later hide classes.
A flex or grid layout becomes a block.	The restoring class uses `block`, which replaces the intended display mode.	Use the needed mode, such as `.d-md-flex` or `.d-md-grid`, where supported by your Bootstrap version.
A blank gap remains after hiding.	`.invisible` preserves layout space by design.	Use `.d-none` if the element should stop taking up space.
Screen readers do not announce hidden text.	The content uses `.d-none` or `.invisible`.	Use `.visually-hidden` for screen-reader-only content, or `.visually-hidden-focusable` for content revealed on focus.
A skip link cannot be seen or activated.	It may lack the focusable helper, have an invalid target, or be covered by other page styles.	Use `.visually-hidden-focusable`, ensure the `href` points to a real target, and test by tabbing through the page.
Legacy examples have no effect.	The example may use classes from another Bootstrap major version.	Identify the installed version and follow that version’s documentation.

9. Practical checks before shipping

Confirm the Bootstrap version and use matching class names.
Check the element at widths below, at, and above each breakpoint used.
Choose a display mode that preserves the intended flex, grid, inline, or block layout.
Decide whether hidden content should be removed from layout, leave space, or remain available to assistive technology.
Keyboard-test controls and skip links. Hiding a control at a breakpoint should not leave keyboard users without an equivalent way to perform its task.
Check print output if you use .d-print-*.

10. Or skip the browser setup

If you need a screenshot of a page that uses responsive Bootstrap layouts, you can capture it directly with ScreenshotNeo, a website screenshot API and MCP server for developers. Set the viewport to capture the layout you want, or use one of its device presets. Its API documentation describes the request options.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp

Cookie and consent banners, newsletter popups, and chat widgets are removed before the capture. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents use screenshot tools, and 1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000 screenshots.

11. FAQ

Does `.d-none` hide an element only on mobile?

No. By itself, it hides at every breakpoint. Combine it with a class such as .d-md-block to restore display at md and wider.

Does `.invisible` preserve the element’s space?

Yes. It changes visibility while leaving display and layout space in place.

Which class hides text from sighted users but keeps it for screen readers?

Use .visually-hidden. Use .visually-hidden-focusable when the content should become visible on keyboard focus.

Can I use Bootstrap 3’s `.hidden-*` classes in Bootstrap 5?

Those are legacy patterns. Bootstrap 5 uses responsive .d-* display utilities; follow the documentation for the version actually installed.