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.

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
.visible-xs-* Visible
.visible-sm-* Visible
.visible-md-* Visible
.visible-lg-* Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible

Breakpoint

Group of classes CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

Print classes

Similar to the regular responsive classes, use these for toggling content for print.

Classes Browser Print
.visible-print-block
.visible-print-inline
.visible-print-inline-block 		Visible
.hidden-print Visible

Test cases

Resize your browser or load on different devices to test the responsive utility classes

✔ Visible on x-small
✔ Visible on small
Medium ✔ Visible on medium
✔ Visible on large
✔ Visible on x-small and small
✔ Visible on medium and large
✔ Visible on x-small and medium
✔ Visible on small and large
✔ Visible on x-small and large
✔ Visible on small and medium

Hidden on...

Here, green checkmarks also indicate the element is hidden in your current viewport.

✔ Hidden on x-small
✔ Hidden on small
Medium ✔ Hidden on medium
✔ Hidden on large
✔ Hidden on x-small and small
✔ Hidden on medium and large
✔ Hidden on x-small and medium
✔ Hidden on small and large
✔ Hidden on x-small and large
✔ Hidden on small and medium