Responsive utilities

For faster mobile-friendly development, use these utility classes for hiding content by device via media query.

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.

Contents

Available classes

  • The .d-*-down-none classes hide the element when the viewport is at the given breakpoint or smaller. For example, .d-lg-down-none hides an element on small, and medium viewports.
Extra small devices Portrait phones (<544px) Small devices Landscape phones (≥544px - <768px) Medium devices Tablets (≥768px - <992px) Large devices Desktops (≥992px - <1200px) Extra large devices Desktops (≥1200px)
.d-xs-down-none Visible Visible Visible Visible
.d-sm-down-none Visible Visible Visible
.d-md-down-none Visible Visible
.d-lg-down-none Visible