Display helpers
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.
Device | Code | Type | Range |
---|---|---|---|
Extra small | xs | Small to large phone | < 600px |
Small | sm | Small to medium tablet | 600px > < 960px |
Medium | md | Large tablet to laptop | 960px > < 1280px |
Large | lg | Laptop to desktop | 1280px > < 1920px |
Extra large | xl | 1080p to 1440p desktop | 1920px > < 2560px |
Extra extra large | xxl | 4k and ultra-wide | > 2560px |
Specification |
Display
Specify the elements display
property. These classes can be applied to all breakpoints from xs
to xl
. When using a base class,.d-{value}
, it is inferred to be .d-xs-{value}
.
.d-{value}
forxs
.d-{breakpoint}-{value}
forsm
,md
,lg
andxl
The value property 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 size | Class |
---|---|
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 |
Additionally you can also display an element based upon the current viewport using lateral display helper classes. These classes can be applied using the following format hidden-{breakpoint}-{condition}
The condition applies the class base on:
only
- hide the element only onxs
throughxl
breakpointsand-down
- hide the element on the specified breakpoint and downsm
throughlg
breakpointsand-up
- hide the element on the specified breakpoint and upsm
throughlg
breakpoints
Additionally, media types can be targeted using the only
condition. Both hidden-screen-only
and hidden-print-only
are currently supported.
Caveats
It is important to note that using any of the display classes above will result in any display style previously added being overwritten. This is because of the classes using !important
in their display styling.
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.
Accessibility
Screen readers
Use the d-sr
utility classes to conditionally hide content on all devices except screen readers.
d-sr-only
visually hides elements but will still announce to screen readers.d-sr-only-focusable
visually hides an element until it is focused. This is useful when implementing skip links.