Display

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

Contents

Common Utilities

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-inline sets display: inline;
  • .d-table sets display: table;
  • .d-table-row sets display: table-row;
  • .d-table-cell sets display: table-cell;
  • .d-flex sets display: flex;
  • .d-inline-flex sets display: inline-flex;

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.

d-inline
d-inline
<div class="d-inline bg-success">d-inline</div>
<div class="d-inline bg-success">d-inline</div>
d-block
<span class="d-block bg-primary">d-block</span>
d-inline-block
d-inline-block
<div class="d-inline-block bg-warning">d-inline-block</div>
<div class="d-inline-block bg-warning">d-inline-block</div>
d-table
d-table-cell
d-table-cell
<div class="d-table bg-info">
    d-table
    <div class="d-table-row">
        <div class="d-table-cell bg-danger">d-table-cell</div>
        <div class="d-table-cell bg-danger">d-table-cell</div>
    </div>
</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. You will need to take into account any other CSS properties, such as visibility, that might cause issues for the print layout.

Class Screen Print
.print-only-block Visible
(as display: block)
.print-only-inline Visible
(as display: inline)
.print-only-inline-block Visible
(as display: inline-block)
.print-hide Visible
.print-show-block Any Visible
(as display: block)
.print-show-inline Any Visible
(as display: inline)
.print-show-inline-block Any Visible
(as display: inline-block)