twbs--bootstrap/docs/layout/responsive-utilities.md

layout	title
page	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.

Available classes

Use a single or combination of the available classes for toggling content across viewport breakpoints.

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

As of v3.2.0, the .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below.

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

So, for extra small (xs) screens for example, the available .visible-*-* classes are: .visible-xs-block, .visible-xs-inline, and .visible-xs-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	Hidden	Visible
.hidden-print	Visible	Hidden

Test cases

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

Visible on...

Green checkmarks indicate the element is visible in your current viewport.

Extra small ✔ Visible on x-small

Small ✔ Visible on small

Medium ✔ Visible on medium

Large ✔ Visible on large

Extra small and small ✔ Visible on x-small and small

Medium and large ✔ Visible on medium and large

Extra small and medium ✔ Visible on x-small and medium

Small and large ✔ Visible on small and large

Extra small and large ✔ Visible on x-small and large

Small and medium ✔ Visible on small and medium

Hidden on...

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

Extra small ✔ Hidden on x-small

Small ✔ Hidden on small

Medium ✔ Hidden on medium

Large ✔ Hidden on large

Extra small and small ✔ Hidden on x-small and small

Medium and large ✔ Hidden on medium and large

Extra small and medium ✔ Hidden on x-small and medium

Small and large ✔ Hidden on small and large

Extra small and large ✔ Hidden on x-small and large

Small and medium ✔ Hidden on small and medium