Responsiveness

Utility classes used to control what gets shown or hidden at specific breakpoints.

Responsiveness Overview

Overview

These utility classes were made for when you want to hide or show an element on the page. These classes are breakpoint-dependent, meaning there is one class per breakpoint for a total of 8 classes total (4 for hide, 4 for show).

These classes are meant to be used as either standalone classes or as utility classes on existing elements or components.

Hide

Class
Name
Properties
hide
Hide on all breakpoints
/* Desktop */
display: none;
‍
/* Tablet */
display: none;
‍
/* Mobile Landscape */
display: none;
‍
/* Mobile Portrait /*
display: none;
hide-tablet
Hide on tablet and below
/* Tablet */
display: none;
‍
/* Mobile Landscape */
display: none;
‍
/* Mobile Portrait /*
display: none;
hide-mobile-landscape
Hide on mobile landscape and below
/* Mobile Landscape */
display: none;
‍
/* Mobile Portrait /*
display: none;
hide-mobile-portrait
Hide on mobile portrait
/* Mobile Portrait /*
display: none;

Show

Class
Name
Properties
show
Show on all breakpoints
/* Desktop */
display: block;
‍
/* Tablet */
display: block;
‍
/* Mobile Landscape */
display: block;
‍
/* Mobile Portrait /*
display: block;
show-tablet
Show on tablet and below
/* Tablet */
display: block;
‍
/* Mobile Landscape */
display: block;
‍
/* Mobile Portrait /*
display: block;
show-mobile-landscape
Show on mobile landscape and below
/* Mobile Landscape */
display: block;
‍
/* Mobile Portrait /*
display: block;
show-mobile-portrait
Show on mobile portrait
/* Mobile Portrait /*
display: block;