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 |
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
.
The classes .visible-xs
, .visible-sm
, .visible-md
, and .visible-lg
also exist, but are deprecated as of v3.2.0. They are approximately equivalent to .visible-*-block
, except with additional special cases for toggling <table>
-related elements.