Bootstrap5 Visibility

Bootstrap 5 provides visibility utility classes that allow you to control whether an element is visible or not, without affecting its layout. Unlike display: none;, which removes the element from the document flow, visibility classes only hide the element while keeping its space occupied.

Visibility Classes Overview

Bootstrap provides the following visibility classes:

• visible → Makes an element visible (visibility: visible;)
• invisible → Hides an element but retains its space (visibility: hidden;)

Example:

<div class="box visible">This is Visible</div>
<div class="box invisible">This is Invisible (but space is still occupied)</div>

Key Difference:

• d-none completely removes an element from the page layout.
• invisible just hides the element, but its space remains reserved in the layout.