Normal Visibility Classes


Class Name Description Example (if visible)
.show Should always be completely visible
.hidden Invisible to both browsers and SCR
.invisible Only seen by screen readers

Form-Factor Visiblity Classes

When using the .visible-*-* classes, replace the first star in the className with the target breakpoint size in which the element's visibility should change. For example, an element with the CSS class .visible-sm-block will be hidden at all times, except on the "phone" breakpoint, where it will be displayed as a block element.

When using the .hidden-* classes, the opposite rules apply. The element will be display as normal, with the exception of the target breakpoint size.

Badges below will display in Azure if the browser window's current form factor matches.

Current Form Factor: Phone Tablet Tablet Desktop Extra Large

Class Name Breakpoint Sizes Description
.visible-xs-* 0px - 480px Only visible on Smaller Phone
.hidden-xs 0px - 480px Visible on anything BUT Smaller Phone
.visible-sm-* 0px - 767px Only visible on Phone
.hidden-sm 0px - 767px Visible on anything BUT Phone
.visible-md-* 768px - 1023px Only visible on Tablet Only visible on Tablet
.hidden-md 768px - 1023px Visible on anything BUT Tablet Visible on anything BUT Tablet
.visible-lg-* 1024px - 1299px Only visible on Desktop
.hidden-lg 1024px - 1299px Visible on anything BUT Desktop
.visible-xl-* 1300px and up Only visible on Extra-Large Displays
.hidden-xl 1300px and up Visible on anything BUT Extra-Large Displays

How to use Form Factor Visibility

When using the .visible-*-* classes, replace the last star in the className with the target display property to use when the element becomes visible. For example:

Visibility Class Corresponding CSS Property
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

Print Visibility Classes

Emulate the print media-type in Firebug/Dev Tools to see the results