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
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
  • 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