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) |
|---|---|---|---|---|
d-block d-md-none |
Visible | Hidden | Hidden | Hidden |
d-none d-md-block d-lg-none |
Hidden | Visible | Hidden | Hidden |
d-none d-lg-block d-xl-none |
Hidden | Hidden | Visible | Hidden |
d-none d-xl-block |
Hidden | Hidden | Hidden | Visible |
d-none d-md-block |
Hidden | Visible | Visible | Visible |
d-md-none d-lg-block |
Visible | Hidden | Visible | Visible |
d-lg-none d-xl-block |
Visible | Visible | Hidden | Visible |
d-xl-none d-xl-block |
Visible | Visible | Visible | Hidden |
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 |