--- layout: docs title: Visibility description: Define content to be visible or hidden. --- | Class | Description | | --------------- | ----------------------------------------------- | | `hide` | Hides element `display: none;` | | `show` | Shows element `display: block;` | | `visible` | Sets `visibility: visible;` | | `hidden` | Sets `visibility: hidden;` | | `hide-print` | Hides element for when `@media print` | | `show-print` | Shows element for when `@media print` | | `hide-screen` | Hides element for when `@media screen` | | `show-screen` | Shows element for when `@media screen` | | `hide-visually` | Hide element but keep in DOM for Screen Readers | | `text-hide` | Hides text visually | ### Visibile Breakpoint Classes Define content to be visible at different breakpoints. Note: `!important` is used to override specificity issues.

	XXS	XS	S	M	L	XL	XXL
`.show-xxs`	✓	×	×	×	×	×	×
`.show-xs`	×	✓	×	×	×	×	×
`.show-xs-up`	×	✓	✓	✓	✓	✓	✓
`.show-xs-down`	✓	✓	×	×	×	×	×
`.show-s`	×	×	✓	×	×	×	×
`.show-s-up`	×	×	✓	✓	✓	✓	✓
`.show-s-down`	✓	✓	✓	×	×	×	×
`.show-m`	×	×	×	✓	×	×	×
`.show-m-up`	×	×	×	✓	✓	✓	✓
`.show-m-down`	✓	✓	✓	✓	×	×	×
`.show-l`	×	×	×	×	✓	×	×
`.show-l-up`	×	×	×	×	✓	✓	✓
`.show-l-down`	✓	✓	✓	✓	✓	×	×
`.show-xl`	×	×	×	×	×	✓	×
`.show-xl-up`	×	×	×	×	×	✓	✓
`.show-xl-down`	✓	✓	✓	✓	✓	✓	×
`.show-xxl`	×	×	×	×	×	×	✓

### Hidden Breakpoint Classes Define content to be hidden at different breakpoints. Note: `!important` is used to override specificity issues.

	XXS	XS	S	M	L	XL	XXL
`.hide-xxs`	×	✓	✓	✓	✓	✓	✓
`.hide-xs`	✓	×	✓	✓	✓	✓	✓
`.hide-xs-up`	✓	×	×	×	×	×	×
`.hide-xs-down`	×	×	✓	✓	✓	✓	✓
`.hide-s`	✓	✓	×	✓	✓	✓	✓
`.hide-s-up`	✓	✓	×	×	×	×	×
`.hide-s-down`	×	×	×	✓	✓	✓	✓
`.hide-m`	✓	✓	✓	×	✓	✓	✓
`.hide-m-up`	✓	✓	✓	×	×	×	×
`.hide-m-down`	×	×	×	×	✓	✓	✓
`.hide-l`	✓	✓	✓	✓	×	✓	✓
`.hide-l-up`	✓	✓	✓	✓	×	×	×
`.hide-l-down`	×	×	×	×	×	✓	✓
`.hide-xl`	✓	✓	✓	✓	✓	×	✓
`.hide-xl-up`	✓	✓	✓	✓	✓	×	×
`.hide-xl-down`	×	×	×	×	×	×	✓
`.hide-xxl`	✓	✓	✓	✓	✓	✓	×