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
phone_iphoneExtra smallxssmall to large handset< 600px
tabletSmallsmsmall to medium tablet600px > < 960px
laptopMediummdlarge tablet to laptop960px > < 1264*
desktop_windowsLargelgdesktop1264 > < 1904px*
tvExtra largexl4k and ultra-wides> 1904px*
* -16px on Desktop
Classes
  • Visibility
  • hidden-xs-only - hidden on extra small viewports only
  • hidden-sm-and-down - hidden on small viewports and down
  • hidden-sm-and-up - hidden on small viewports and up
  • hidden-md-only - hidden on medium viewports only
  • hidden-md-and-down - hidden on medium viewports and down
  • hidden-md-and-up - hidden on medium viewports and up
  • hidden-lg-only - hidden on large viewports only
  • hidden-lg-and-down - hidden on large viewports and down
  • hidden-lg-and-up - hidden on large viewports and up
  • hidden-xl-only - hidden on extra large viewports only
  • Display
  • d-flex - sets element display to flex
  • d-inline-flex - sets element display to inline-flex
  • d-block - sets element display to block
  • d-inline-block - sets element display to inline-block
The toolbar links will be hidden on small viewport devices and down