The display helpers allow you to control the display of content. This includes being conditionally visible based upon the current viewport, or the actual element display type.

Material Design Viewport Breakpoints
DeviceCodeTypesRange
Extra smallxssmall to large handset< 600px
Smallsmsmall to medium tablet600px > < 960px
Mediummdlarge tablet to laptop960px > < 1264*
Largelgdesktop1264 > < 1904px*
Extra largexl4k and ultra-wides> 1904px*
* -16px on Desktop

Display

Specify the elements display property. These classes can be applied to all breakpoints, from xs to xl and have no specified breakpoint.

  • .d-{value} for xs
  • .d-{breakpoint}-{value} for sm, md, lg and xl

The value propety is one of:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

When setting a specific breakpoint for a display helper class, it will apply to all screen widths from the designation and up. For example, d-lg-flex will apply to lg and xl size screens.

Visibility

Conditionally display an element based upon the current viewport. Breakpoint utility classes always apply from the bottom up. That means if you have .d-none, it will apply to all breakpoints. However, .d-md-none will apply to only md and up.

Screen SizeClass
Hidden on all.d-none
Hidden only on xs.d-none .d-sm-flex
Hidden only on sm.d-sm-none .d-md-flex
Hidden only on md.d-md-none .d-lg-flex
Hidden only on lg.d-lg-none .d-xl-flex
Hidden only on xl.d-xl-none
Visible on all.d-flex
Visible only on xs.d-flex .d-sm-none
Visible only on sm.d-none .d-sm-flex .d-md-none
Visible only on md.d-none .d-md-flex .d-lg-none
Visible only on lg.d-none .d-lg-flex .d-xl-none
Visible only on xl.d-none .d-xl-flex

Display in print

You can also change the display property when printing.

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

Print utility classes can also be combined with none print display utilities.

Edit this page | language on Github
Vuetify
StoreFor Enterprise