Responsive utilities

Inspiration comes of working every day.

I am visible only on Large devices: Desktops (large) :)

I am visible only on Medium devices: Laptop :)

I am visible only on Small devices: Tablets :)

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

Print classes

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

Classes Browser Print
.visible-print-block
.visible-print-inline
.visible-print-inline-block
Visible
.hidden-print Visible