Utilities - Visibility
Control the visibility, with or without modifying the display of elements.
Basic Example
Set element visibility using visibility utilities. Content will be hidden both visually and for assistive technology/screen reader users.
<div class="_hidden">...</div>
<div class="_visible">...</div>
Without modifying the element’s display:
<div class="_visibility:hidden">...</div>
<div class="_visibility:visible">...</div>
Responsive Visibility
Visibility utilities can be applied responsively using the following helper classes:
._hidden
._visible
._{xs|sm|md|lg|xl|xxl}:hidden
._{xs|sm|md|lg|xl|xxl}:visible
This text is hidden starting from xs viewport size.
This text is hidden starting from sm viewport size.
This text is hidden starting from md viewport size.
This text is hidden starting from lg viewport size.
This text is hidden starting from xl viewport size.
This text is hidden starting from xxl viewport size.
This text is visible starting from xs viewport size.
This text is visible starting from sm viewport size.
This text is visible starting from md viewport size.
This text is visible starting from lg viewport size.
This text is visible starting from xl viewport size.
This text is visible starting from xxl viewport size.
This text is visible only on xs viewport size.
This text is visible only on sm viewport size.
This text is visible only on md viewport size.
This text is visible only on lg viewport size.
This text is visible only on xl viewport size.
This text is visible only on xxl viewport size.