v4 Beta now available! Try it out! Feedback welcome!
Looking for v3 docs?

Display

Responsively control an element's display property.

Page Contents

Overview #

Responsively control an element's display property. Also included are some classes to control display for printing.

Notation #

While there is a large number of display properties available, we only support a handful of the more commonly used ones. Sorry, but we can't support all of them, so if you need one that is not in the list below, you will need to use custom CSS.

Available utilities:

  • .d-none sets display: none;
  • .d-block sets display: block;
  • .d-flex sets display: flex;
  • .d-inline sets display: inline;
  • .d-inline-block sets display: inline-block;
  • .d-inline-flex sets display: inline-flex;
  • .d-table sets display: table;
  • .d-table-row sets display: table-row;
  • .d-table-cell sets display: table-cell;

These classes are also available in responsive variants, in the form of .d{-breakpoint}-{value}, such as .d-lg-block. Please refer to how our breakpoint nomenclature is used.

Examples #

d-inline
d-inline
<div class="d-inline p-0_5 bg-primary text-white">d-inline</div>
<div class="d-inline p-0_5 bg-secondary text-white">d-inline</div>
d-block
d-block
<div class="d-block p-0_5 bg-primary text-white">d-block</div>
<div class="d-block p-0_5 bg-secondary text-white">d-block</div>

Responsively Hiding Content #

To ease hiding content across various breakpoints, we also include responsive .d-*-down-none classes. This should make it easier for those circumstances where resetting the correct display property on a component for larger breakpoints can be confusing.

Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

  • The .d-*-none classes hide the element when the viewport is at the given breakpoint or wider. For example, .d-md-none hides an element on medium, large, and extra-large viewports.
  • The .d-*-down-none classes hide the element when the viewport is at the given breakpoint or smaller. For example, .d-md-down-none hides an element on extra-small, small, and medium viewports.
  • There are no explicit "visible"/"show" responsive utility classes; you make an element visible by simply not hiding it at that breakpoint size.
  • You can combine one .d-*-none class with one .d-*-down-none class to show an element only on a given interval of screen sizes. For example, .d-sm-down-none.d-xl-none shows the element only on medium and large viewports. Using multiple .d-*-none classes or multiple .d-*-down-none classes is redundant and pointless.
  • These classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases.

Heads up! There is no .d-*-down-none class created for the largest breakpoint, .d-xl-down-none, since it is functionally equivalent to using .d-none.

Extra small devices Portrait phones (<576px) Small devices Landscape phones (≥576px - <768px) Medium devices Tablets (≥768px - <992px) Large devices Desktops (≥992px - <1200px) Extra large devices Desktops (≥1200px)
.d-xs-down-none Visible Visible Visible Visible
.d-sm-down-none Visible Visible Visible
.d-md-down-none Visible Visible
.d-lg-down-none Visible
.d-none
.d-sm-none Visible
.d-md-none Visible Visible
.d-lg-none Visible Visible Visible
.d-xl-none Visible Visible Visible Visible

Test Cases #

Resize your browser or load on different devices to test the responsive utility classes.

Green checkmarks indicate the element is visible in your current viewport.

✔ Visible on extra small Extra small
✔ Visible on small or narrower Small or narrower
✔ Visible on medium or narrower Medium or narrower
✔ Visible on large or narrower Large or narrower

✔ Visible on small or wider Small or wider
✔ Visible on medium or wider Medium or wider
✔ Visible on large or wider Large or wider
✔ Visible on extra large Extra large

✔ Your viewport is exactly extra small Your viewport is NOT exactly extra small
✔ Your viewport is exactly small Your viewport is NOT exactly small
✔ Your viewport is exactly medium Your viewport is NOT exactly medium
✔ Your viewport is exactly large Your viewport is NOT exactly large
✔ Your viewport is exactly extra large Your viewport is NOT exactly extra large

These utilities only affect the display property. Includes support for the same display values as our responsive .d-* utilities.

You will need to take into account any other CSS properties, such as visibility, that might cause issues for the print layout.

  • .print-none
  • .print-block
  • .print-flex
  • .print-inline
  • .print-inline-block
  • .print-inline-flex
  • .print-table
  • .print-table-row
  • .print-table-cell

SASS Reference #

Variables #

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Name Type Default Description
$enable-utility-display boolean true Enable the generation of the display utility classes. Smaller segements of the display utilities can be disabled with the following $enable-* variables.
$enable-utility-display-down-none boolean true Enable the generation of the `down-none` responsive hiding display rules as utility classes.
$enable-utility-display-print boolean true Enable the generation of the print display utility classes.
$utility-display-breakpoints string map-keys($grid-breakpoints) Map of breakpoints that will be used to generate responsive display utilities.
$utility-display string none, block, flex, inline, inline-block, inline-flex, table, table-row, table-cell List of display values that will be used to generate responsive display utilities.

Mixins #

No mixins available.