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.

<p class="_xs:hidden">This text is hidden starting from xs viewport size.</p>

<p class="_sm:hidden">This text is hidden starting from sm viewport size.</p>

<p class="_md:hidden">This text is hidden starting from md viewport size.</p>

<p class="_lg:hidden">This text is hidden starting from lg viewport size.</p>

<p class="_xl:hidden">This text is hidden starting from xl viewport size.</p>

<p class="_xxl:hidden">This text is hidden starting from xxl viewport size.</p>

<br />

<p class="_xs:visible:flex">This text is visible starting from xs viewport size.</p>

<p class="_sm:visible">This text is visible starting from sm viewport size.</p>

<p class="_md:visible">This text is visible starting from md viewport size.</p>

<p class="_lg:visible">This text is visible starting from lg viewport size.</p>

<p class="_xl:visible">This text is visible starting from xl viewport size.</p>

<p class="_xxl:visible">This text is visible starting from xxl viewport size.</p>

<br />

<p class="_xs:visible _sm:hidden">This text is visible only on xs viewport size.</p>

<p class="_sm:visible _md:hidden">This text is visible only on sm viewport size.</p>

<p class="_md:visible _lg:hidden">This text is visible only on md viewport size.</p>

<p class="_lg:visible _xl:hidden">This text is visible only on lg viewport size.</p>

<p class="_xl:visible _xxl:hidden">This text is visible only on xl viewport size.</p>

<p class="_xxl:visible">This text is visible only on xxl viewport size.</p>