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, xxl, and xxxl breakpoints.

Where value is one of:

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

Examples

.d-inline-block
.d-inline-block
.d-block
.d-block

Hiding Content

To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl,xxl,xxxl}-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.

This element is hidden on small screens and it becomes visible on screens starting from the md breakpoint.

👉 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!

Invisible elements 🙈 . Nothing here!
You cannot see me!