Visibility Utilities

Examples

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
• ._hidden-{xs|sm|md|lg|xl}
• ._hidden-{xs|sm|md|lg|xl}-and-up
• ._hidden-{xs|sm|md|lg|xl}-and-down
• ._visible-{xs|sm|md|lg|xl}
• ._visible-{xs|sm|md|lg|xl}-and-up
• ._visible-{xs|sm|md|lg|xl}-and-down