Invisible content
The .invisible and .visible class can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.
Responsive visibility
For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query.
- The .hidden-*-up classes hide the element when the viewport is at the given breakpoint or wider. For example, .hidden-md-up hides an element on medium, large, and extra-large viewports.
- The .hidden-*-down classes hide the element when the viewport is at the given breakpoint or smaller. For example, .hidden-md-down hides an element on extra-small, small, and medium viewports.
- The classes .hidden-*-up can be combined with .hidden-*-down to show an element only on a given interval of screen sizes. For example, .hidden-sm-down.hidden-xl-up shows the element only on medium and large viewports. Using multiple .hidden-*-up classes or multiple .hidden-*-down classes is redundant and pointless.
- The classes .hidden-*-up can be combined with .visible-*-up to hide an element only on a given interval of screen sizes. For example, .hidden-sm-up.visible-md-up hides the element only on small viewports.
Alternatively, for specific devices (phone, tablet or desktop), there are specific classes (as opposed to breakpoint specific classes):
- Phone: .hidden-phone-up, .visible-phone-up, .hidden-phone-down, .visible-phone-down
- Tablet: .hidden-tablet-up, .visible-tablet-up, .hidden-tablet-down, .visible-tablet-down
- Desktop: .hidden-desktop-up, .visible-desktop-up, .hidden-desktop-down, .visible-desktop-down