Bootstrap Display and Visibility: Show or Hide Elements

In Bootstrap, use display utility classes such as d-none and d-block to remove an element from or add it to the layout; use visibility utilities to hide an element while keeping its space. Add responsive infixes such as d-md-none to change display at a particular breakpoint.

Display and visibility are different

Bootstrap provides two related but distinct ways to hide content. A display utility changes the element’s CSS display property. When it becomes display: none, the element is not rendered and takes up no layout space. A visibility utility changes visibility; when hidden, the element is invisible but its layout space remains.

That distinction affects surrounding content. If a hidden panel should leave no gap, use display utilities. If content should disappear without shifting nearby elements, use visibility utilities. Neither choice should be confused with merely changing opacity: transparent elements may still occupy space and can remain interactive.

Use display utilities to remove or show content

Bootstrap’s display classes follow the pattern d-{value}, with responsive versions written d-{breakpoint}-{value}. Common values include none, inline, inline-block, block, grid, table, and flex. Choose the value that matches the element’s intended layout when it is shown.

• d-none hides an element at every breakpoint.
• d-block makes it a block-level element.
• d-inline displays it inline, in the flow of text.
• d-flex or d-grid enables those layout modes.

For example, this notice is hidden by default and displayed as a block from the medium breakpoint upward:

<div class="d-none d-md-block">
  This notice appears on medium and wider screens.
</div>

To show an element only on smaller screens, reverse the classes:

<div class="d-block d-md-none">
  This content is shown below the medium breakpoint.
</div>

These classes set display rules; Bootstrap does not automatically detect whether an element is appropriate for a device. They are useful for responsive layouts, but should not be used to create separate copies of important content without considering accessibility and maintenance.

Responsive breakpoints and class combinations

Bootstrap’s responsive display utilities apply at a breakpoint and at larger widths. The standard breakpoint infixes are sm, md, lg, xl, and xxl; the exact pixel thresholds depend on the Bootstrap version and configuration. A class without an infix applies at all widths. Consult the documentation for the version used by your project when you need exact breakpoint values.

A responsive sequence can change an element’s display more than once. For example:

<nav class="d-none d-lg-flex">...</nav>

This keeps the navigation hidden below the large breakpoint and displays it as flex at large widths and above. The d-lg-flex rule takes effect at its breakpoint, while d-none supplies the default below it. For more complex patterns, write down the intended display at each range first, then add the smallest set of classes that expresses it.

Hide an element but preserve its space

Use invisible to set an element’s visibility to hidden, or visible to make it visible. These utilities preserve the element’s place in the layout:

<span class="invisible">Temporarily hidden text</span>
<span class="visible">Visible text</span>

Bootstrap also provides responsive visibility variants, such as invisible-md and visible-lg, in versions that include those utilities. Check your installed version’s documentation: utility availability and configuration can differ, particularly when using a customized build. Unlike the common display pattern, visibility utilities are not generally used to replace layout modes such as flex or grid.

Visibility is useful when a reserved space prevents a layout from jumping, for example when a temporary message is hidden but its container must keep a fixed arrangement. It is not a general substitute for accessibility-aware disclosure controls. Hidden content may still affect the accessibility tree or interaction behavior differently depending on the method and browser; test the actual component, especially if it contains focusable controls.

Choose the right method for the task

• Remove the element and its space: use d-none, with responsive variants if needed.
• Keep the space but make the element invisible: use invisible.
• Show content after a user action: use an appropriate interactive component or JavaScript state, rather than relying only on a fixed utility class.
• Make content unavailable to assistive technology as well: select a method designed for that purpose and verify its accessibility behavior; visual hiding alone does not guarantee this.

For an interactive disclosure, use a real button with an accessible name and an expanded/collapsed state, and ensure the hidden panel’s controls cannot be reached while it is closed. Bootstrap’s JavaScript components can manage some common interactions, but the appropriate component depends on the design and Bootstrap version.

Common problems and misconceptions

“Hidden means removed from the page.” That is true for d-none in the visual layout, but not for invisible, which preserves space. Check computed styles in the browser’s developer tools if the element leaves an unexpected gap.

“The responsive class is not working.” Verify the spelling and breakpoint, confirm that the relevant Bootstrap CSS is loaded, and check whether custom CSS overrides the utility. Also confirm that the viewport has crossed the breakpoint; responsive classes apply at that breakpoint and above, not below it.

Conflicting display classes. Avoid placing multiple display utilities for the same breakpoint when their intended result is unclear. A base class and a breakpoint-specific class are often useful together, but two competing classes at the same range can make the result hard to reason about. Inspect the CSS cascade and computed display value.

Expecting a display utility to toggle itself. Classes describe styling; they do not respond to clicks by themselves. Use JavaScript or a Bootstrap component when the user must reveal or dismiss content.

Frequently Asked Questions

How do I hide an element in Bootstrap?
Apply d-none to remove it from the layout. Use a responsive class such as d-md-none if it should be hidden only from a breakpoint upward.

How do I show an element only on mobile?
Use a base display class and hide it at the next breakpoint, for example d-block d-md-none. Choose the display value that suits the element’s layout.

What is the difference between d-none and invisible?
d-none removes the element from layout and leaves no space. invisible hides it visually but preserves its space.

Can Bootstrap show or hide an element when it is clicked?
Not with a display utility alone. Use JavaScript or a suitable Bootstrap interactive component to change state in response to a click.

Why is a hidden element still taking up space?
It may use invisible, which deliberately preserves its layout space, or another CSS rule may be controlling its size. Use d-none if the element should take up no space, then inspect its computed styles.

Related

• Self-Service to Resolution: A Practical Guide
• Diablo vs Doom: Which Hell-Fighting Franchise Fits You?
• AI Gateway vs App Security: Where Controls Live