Visibility

Set the visibility of elements with our visibility utilities. These utility classes do not modify the display value at all and do not affect layout, .invisible elements still take up space in the page.

Quick reference

Basic usage

Hidden

Use invisible to hide an element, but still maintain its place in the DOM, affecting the layout of other elements(compare with .none from the display documentation).

<div class="hstack gap-3">
  <div>01</div>
  <div class="invisible">02</div>
  <div>03</div>
</div>

Visible

Use visible to make an element visible. This is mostly useful for undoing the invisible utility at different screen sizes.

<div class="hstack gap-3">
  <div>01</div>
  <div class="visible">02</div>
  <div>03</div>
</div>