turretcss

Visibility

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 ✓ ✓ ✓ ✓ ✓ ✓ ×

Related