Responsive utilities
For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device’s presentation.
Contents
Available classes
- 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. - There are no explicit “visible”/”show” responsive utility classes; you make an element visible by simply not hiding it at that breakpoint size.
- You can combine one
.hidden-*-up
class with one.hidden-*-down
class 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. - These classes don’t attempt to accommodate less common cases where an element’s visibility can’t be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases.
Extra small devices Portrait phones (<544px) Small devices Landscape phones (≥544px - <768px) Medium devices Tablets (≥768px - <992px) Large devices Desktops (≥992px - <1200px) Extra large devices Desktops (≥1200px)
.hidden-xs-down
Hidden Visible Visible Visible Visible .hidden-sm-down
Hidden Hidden Visible Visible Visible .hidden-md-down
Hidden Hidden Hidden Visible Visible .hidden-lg-down
Hidden Hidden Hidden Hidden Visible .hidden-xl-down
Hidden Hidden Hidden Hidden Hidden .hidden-xs-up
Hidden Hidden Hidden Hidden Hidden .hidden-sm-up
Visible Hidden Hidden Hidden Hidden .hidden-md-up
Visible Visible Hidden Hidden Hidden .hidden-lg-up
Visible Visible Visible Hidden Hidden .hidden-xl-up
Visible Visible Visible Visible Hidden
Print classes
Similar to the regular responsive classes, use these for toggling content for print.
Class Browser Print
.visible-print-block
Hidden Visible
(as display: block
) .visible-print-inline
Hidden Visible
(as display: inline
) .visible-print-inline-block
Hidden Visible
(as display: inline-block
) .hidden-print
Visible Hidden
Test cases
Resize your browser or load on different devices to test the responsive utility classes.
Green checkmarks indicate the element is visible in your current viewport.
Please login to continue.