Change the value of the display property with our responsive display utility classes. We support all common values while adding responsive variations for each breakpoint. You can also use the Visibility Generator Page to automate the CSS generation.

Displaying elements

For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.

To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl,xxl}-none classes for any responsive screen variation.

To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class, for example .d-none .d-md-block .d-xl-none .d-xxl-none will hide the element for all screen sizes except on medium and large devices.

Description Screen size Class
Hidden on all *.* .d-none
Hidden only on xs 576px .d-none .d-sm-block
Hidden only on sm 576px .d-sm-none .d-md-block
Hidden only on md 768px .d-md-none .d-lg-block
Hidden only on lg 1024px .d-lg-none .d-xl-block
Hidden only on xl 1280px .d-xl-none .d-xxl-block
Hidden only on xxl 1400px .d-xxl-none
Hidden only on xxxl 1600px .d-xxxl-none
Visible on all *.* .d-block
Visible only on xs 576px .d-block .d-sm-none
Visible only on sm 576px .d-none .d-sm-block .d-md-none
Visible only on md 768px .d-none .d-md-block .d-lg-none
Visible only on lg 1024px .d-none .d-lg-block .d-xl-none
Visible only on xl 1280px .d-none .d-xl-block .d-xxl-none
Visible only on xxl 1400px .d-none .d-xxl-block
Visible only on xxxl 1600px .d-none .d-xxxl-block

Change the display value of elements when printing with our print display utility classes. Includes support for the same display values as our responsive .d-* utilities.

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-grid
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex