Responsive utilities
Inspiration comes of working every day.I am visibile only on Large devices: Desktops (large) :)
I am visibile only on Medium devices: Desktops :)
I am visibile only on Small devices: Tablets :)
I am visibile only on Extra small devices: Phones :)
Available classes
Use a single or combination of the available classes for toggling content across viewport breakpoints.
| Available classes | 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 |
Print classes
Similar to the regular responsive classes, use these for toggling content for print.
| Classes | Browser | |
|---|---|---|
.visible-print-block
.visible-print-inline
.visible-print-inline-block |
Hidden | Visible |
.hidden-print |
Visible | Hidden |