Display
Display helpers control content visibility and display type based on the viewport.
| Class | Properties |
|---|---|
| d-none | display: none; |
| d-sm-none | display: none; |
| d-md-none | display: none; |
| d-lg-none | display: none; |
| d-xl-none | display: none; |
| d-xxl-none | display: none; |
| d-sm-flex | display: flex; |
| d-md-flex | display: flex; |
| d-lg-flex | display: flex; |
| d-xl-flex | display: flex; |
| d-xxl-flex | display: flex; |
| d-sm-inline | display: inline; |
| d-md-inline | display: inline; |
| d-lg-inline | display: inline; |
| d-xl-inline | display: inline; |
| d-xxl-inline | display: inline; |
| d-sm-inline-block | display: inline-block; |
| d-md-inline-block | display: inline-block; |
| d-lg-inline-block | display: inline-block; |
| d-xl-inline-block | display: inline-block; |
| d-xxl-inline-block | display: inline-block; |
| d-sm-table | display: table; |
| d-md-table | display: table; |
| d-lg-table | display: table; |
| d-xl-table | display: table; |
| d-xxl-table | display: table; |
| d-sm-table-cell | display: table-cell; |
| d-md-table-cell | display: table-cell; |
| d-lg-table-cell | display: table-cell; |
| d-xl-table-cell | display: table-cell; |
| d-xxl-table-cell | display: table-cell; |
| d-sm-table-row | display: table-row; |
| d-md-table-row | display: table-row; |
| d-lg-table-row | display: table-row; |
| d-xl-table-row | display: table-row; |
| d-xxl-table-row | display: table-row; |
| d-sm-flex | display: flex; |
| d-md-flex | display: flex; |
| d-lg-flex | display: flex; |
| d-xl-flex | display: flex; |
| d-xxl-flex | display: flex; |
| d-sm-inline-flex | display: inline-flex; |
| d-md-inline-flex | display: inline-flex; |
| d-lg-inline-flex | display: inline-flex; |
| d-xl-inline-flex | display: inline-flex; |
| d-xxl-inline-flex | display: inline-flex; |
| d-print-none | display: none; |
| d-print-inline | display: inline; |
| d-print-inline-block | display: inline-block; |
| d-print-block | display: block; |
| d-print-table | display: table; |
| d-print-table-cell | display: table-cell; |
| d-print-table-row | display: table-row; |
| d-print-flex | display: flex; |
| d-print-inline-flex | display: inline-flex; |
| d-sr-only | display: none; |
| d-sr-only-focusable | display: none; |
| Device | Code | Type | Range |
|---|---|---|---|
| Extra small | xs | Small to large phone | < 600px |
| Small | sm | Small to medium tablet | 600px > < 840px |
| Medium | md | Large tablet to laptop | 840px > < 1145px |
| Large | lg | Laptop to desktop | 1145px > < 1545px |
| Extra large | xl | 1080p to 1440p desktop | 1545px > < 2138px |
| Extra extra large | xxl | 4k and ultra-wide | > 2138px |
| Specification | |||
Usage
Specify the element’s display property. These classes can be applied to all breakpoints from xs to xxl. When using a base class,.d-{value}, it is inferred to be .d-xs-{value}.
.d-{value}forxs.d-{breakpoint}-{value}forsm,md,lg,xl, andxxl
The value property is one of:
noneinlineinline-blockblocktabletable-celltable-rowflexinline-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, xl and xxl 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 .d-xxl-flex |
| Hidden only on xxl | .d-xxl-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 .d-xxl-none |
| Visible only on xxl | .d-none .d-xxl-flex |
Alternatively you can hide 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:
- nothing - hide the element only on the specified breakpoint
and-down- hide the element on the specified breakpoint and down -smthroughxlonlyand-up- hide the element on the specified breakpoint and up -smthroughxlonly
hidden-{breakpoint}-and-up is equivalent to d-{breakpoint}-none.
Media types can also 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. 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-onlyvisually hides elements but will still announce to screen readers.d-sr-only-focusablevisually hides an element until it is focused. This is useful when implementing skip links.