Display

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

Visibility

Conditionally display an element based upon the current viewport. These classes can be applied using the following format hidden-{breakpoint}-{condition}

The breakpoint sets the viewport size:

  • xs - extra small devices
  • sm - small devices
  • md - medium devices
  • lg - large devices
  • xl - extra large

The condition applies the class base on:

  • only - hide the element only on xs through xl breakpoints
  • and-down - hide the element on the specified breakpoint and down sm through lg breakpoints
  • and-up - hide the element on the specified breakpoint and up sm through lg breakpoints

Additionally, media types can be targeted using the only condition. Both hidden-screen-only and hidden-print-only are currently supported.

Overflow

Set the overflow for an element with overflow-{axis}-hidden or simply overflow-hidden.

  • overflow-hidden - hide overflow on both the x and y axis
  • overflow-y-hidden - hide overflow on the y axis
  • overflow-x-hidden - hide overflow on the x axis

Display

Specify the elements display property. These classes can be applied using the following format d-{display}.

  • d-inline-flex - sets the element display property to inline-flex
  • d-flex - sets the element display property to flex
  • d-inline-block - sets the element display property to inline-block
  • d-block - sets the element display property to block
  • d-inline - sets the element display property to inline
  • d-none - sets the element display property to none

Examples

Resize your screen to see the elements conditionally hide.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore