Visibility
Control the visibility of elements, without modifying their display, with visibility utilities.
Contents
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
| Class | Properties |
|---|---|
.visible | visibility: visible; |
.invisible | visibility: hidden; |
Elements with the
.invisible class will be hidden both visually and for assistive technology/screen reader users.Basic example
Invisible
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).
01
02
03
<div class="d-grid gap-3">
<div class="g-col-4">01</div>
<div class="g-col-4 invisible">02</div>
<div class="g-col-4">04</div>
</div>
Visible
Use visible to make an element visible. This is mostly useful for undoing the invisible utility at different screen sizes.
01
02
03
<div class="d-grid">
<div class="g-col-4">01</div>
<div class="g-col-4 visible">02</div>
<div class="g-col-4">04</div>
</div>