Visibility

Use responsive visibility classes to display or hide elements on different devices.


Responsive

This stack provides responsive options to hide or display elements on different viewports.
OPTION DESCRIPTION
Visible or Hidden Small
Only affects device widths of 640px and larger.
Visible or Hidden Medium
Only affects device widths of 960px and larger.
Visible or Hidden Large
Only affects device widths of 1200px and larger.
Visible or Hidden XLarge
Only affects device widths of 1600px and larger.
Note In this example the green elements are displayed on screens that are larger than the defined breakpoint. Resize your browser window to see the effect.
Small
Small
Medium
Medium
Large
Large
XLarge
XLarge

Hover

Hidden when not hovered

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Invisible when not hovered

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Touch

Use the touch option to hide elements on touch devices and the no-touch to hide elements on devices without a touch screen.
Hidden No-Touch
Hidden Touch
Hidden Touch
Hidden Touch