Edit page

Display

Responsive display helper classes enable to change the display CSS property, including hiding the content.

Naming System

The classes are named using the format d-[value] for xs and d-[breakpoint]-[value] for sm, md, lg, xl, x2l, and x3l breakpoints.

Where value is one of:

  • block
  • flex
  • inline
  • inline-block
  • inline-flex
  • none

Examples

Hiding Content

To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl,x2l,x3l}-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 will hide the element for all screen sizes except on the md size.

👉 It's perfectly OK to hide the content with the .d-none helper class. Just note that it can be even easier with the less known hidden HTML attribute. Browser support is awesome, so why not to use it!