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. |
NoteIn this example the green elements are displayed on screens that are larger than the defined breakpoint. Resize your browser window to see the effect.
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.