Bootstrap includes two very simple shorthand classes targeting the CSS visibility property: .visible and .invisible.
While hiding elements sounds identical to the Display tools we learned earlier (like .d-none), there is a massive architectural difference in how the web browser processes them.
You must choose carefully between .invisible and .d-none depending on how you want the surrounding page layout to react.
.d-none (Display None): The element is completely deleted from the visual layout. It takes up zero space. Any items sitting next to it will instantly collapse inward to fill the empty void..invisible (Visibility Hidden): The element becomes completely transparent, but it still physically takes up the exact same amount of space. The surrounding layout treats the element as if it is still there, preserving the structural gap and preventing the webpage from collapsing.Below is a row of three identical blocks. We have applied the .invisible class to the middle block. Notice how the third block does not slide over to the left! The middle block is still acting as a physical placeholder inside the document.
<!-- Using .invisible maintains the physical layout structure -->
<div class="d-flex gap-3">
<div class="box">Block 1</div>
<!-- This box vanishes, but the gap between Block 1 and 3 stays the same! -->
<div class="box invisible">Block 2</div>
<div class="box">Block 3</div>
</div>For comparison, here is the exact same row of three blocks, but we swapped the middle block to use .d-none instead. Because the element is removed from the DOM flow entirely, Block 3 collapses leftward, destroying the empty gap.
<!-- Using .d-none causes surrounding elements to collapse -->
<div class="d-flex gap-3">
<div class="box">Block 1</div>
<!-- This box is deleted from the layout. Block 3 slides over. -->
<div class="box d-none">Block 2</div>
<div class="box">Block 3</div>
</div>