Visibility

Use these classes for toggling visibility by device viewport, in print, and for screenreaders.

Show/Hide Content on All Device Viewports

Show/Hide Classes
Class Name Description
.show This forces an element to be shown and display as block.
.hidden This forces an element to be hidden and display as none.
.invisible This forces an element to be hidden, but it will still take up the same space as before. It will also still read by screen readers.

Responsive Toggles

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

Responsive Toggle Classes
Class name Extra small devices Small devices Medium devices Large devices
.visible-xs-block Visible Hidden Hidden Hidden
.visible-xs-inline Visible Hidden Hidden Hidden
.visible-xs-inline-block Visible Hidden Hidden Hidden
.visible-sm-block Hidden Visible Hidden Hidden
.visible-sm-inline Hidden Visible Hidden Hidden
.visible-sm-inline-block Hidden Visible Hidden Hidden
.visible-md-block Hidden Hidden Visible Hidden
.visible-md-inline Hidden Hidden Visible Hidden
.visible-md-inline-block Hidden Hidden Visible Hidden
.visible-lg-block Hidden Hidden Hidden Visible
.visible-lg-inline Hidden Hidden Hidden Visible
.visible-lg-inline-block 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

Show/Hide Content for Print

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

Print Classes
Class Name Browser Print
.visible-print-block
.visible-print-inline
.visible-print-inline-block
Hidden Visible
.hidden-print Visible Hidden

Show/Hide Content for Screen Readers

There are a couple of classes to make elements visible only to the screen reader.

Screen Reader Classes
Class Name Description
.sr-only This default Bootstrap class makes elements visible only to screen readers. Although this seems to work in practice, accessibility checkers like SiteImprove tend to flag it.
.sr-only-focusable Use this in combination with .sr-only to make the text viewable on focus. We use this for the "skip to content" link in the template.
.font-size-zero This class does basically the same thing except it can only be used on text elements or container elemnts with text in them. Accessibility checkers do not flag this method.