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.
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 ||Hidden ||Hidden ||Hidden |
|Hidden ||Visible ||Hidden ||Hidden |
|Hidden ||Hidden ||Visible ||Hidden |
|Hidden ||Hidden ||Hidden ||Visible |
|Hidden ||Visible ||Visible ||Visible |
|Visible ||Hidden ||Visible ||Visible |
|Visible ||Visible ||Hidden ||Visible |
|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 |
So, for extra small (
xs) screens for example, the available
.visible-*-* classes are:
.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
Similar to the regular responsive classes, use these for toggling content for print.
|Classes ||Browser ||Print |
|Hidden ||Visible |
|Visible ||Hidden |
.visible-print also exists but is deprecated as of v3.2.0. It is approximately equivalent to
.visible-print-block, except with additional special cases for
Resize your browser or load on different devices to test the responsive utility classes.
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
✔ 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
Here, green checkmarks also indicate the element is hidden in your current viewport.