Visibility
Control element visibility without removing it from the document flow. Unlike .hidden (display: none), visibility utilities keep the element's space reserved.
Visibility values
Visible
Visible
<div class="visible">Rendered and visible</div>
<div class="invisible">Space reserved but invisible</div>
<div class="collapse">Collapsed (use on table rows)</div>| Class | CSS | Description |
|---|---|---|
.visible | visibility: visible | Element is visible (default) |
.invisible | visibility: hidden | Hidden but still occupies space |
.collapse | visibility: collapse | Removes table row/column without affecting layout |
Visibility vs. hidden
| Class | Occupies space? | Interactive? | Use case |
|---|---|---|---|
.invisible | Yes | No | Placeholder, fade animations |
.hidden | No | No | Completely remove from layout |
Responsive variants. Both.visibleand.invisiblesupport all breakpoint prefixes - e.g.md:invisible,lg:visible.