Display property

Change the value of the display property with our responsive display utility classes. We purposely support only a subset of all possible values for display. Classes can be combined for various effects as you need.

Contents

Display classes

Notation

Display utility classes that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

As such, the classes are named using the format:

  • .d-{value} for xs
  • .d-{breakpoint}-{value} for sm, md, lg, and xl.

Where value is one of:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • flex
  • inline-flex

The media queries effect screen widths with the given breakpoint or larger. For example, .d-lg-none sets display: none; on both lg and xl screens.

Examples

d-inline
d-inline

<div class="d-inline p-2 bg-primary">d-inline</div>
<div class="d-inline p-2 bg-inverse">d-inline</div>
d-block d-block 

<span class="d-block p-2 bg-primary">d-block</span>
<span class="d-block p-2 bg-inverse">d-block</span>

Responsive hiding classes

For convenience, you can use .hidden-*-up and .hidden-*-down classes for showing and hiding content by breakpoint, as an alternative to combining multiple .d-* classes.

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.

Available classes

  • The .hidden-*-up classes hide the element when the viewport is at the given breakpoint or wider. For example, .hidden-md-up hides an element on medium, large, and extra-large viewports. They can be considered aliases to .d-*-none classes.
  • The .hidden-*-down classes hide the element when the viewport is at the given breakpoint or smaller. For example, .hidden-md-down hides an element on extra-small, small, and medium viewports.
  • You can combine one .hidden-*-up class with one .hidden-*-down class to show an element only on a given interval of screen sizes. For example, .hidden-sm-down.hidden-xl-up shows the element only on medium and large viewports. Using multiple .hidden-*-up classes or multiple .hidden-*-down classes is redundant and pointless.
Extra small devices Portrait phones (<544px) Small devices Landscape phones (≥544px - <768px) Medium devices Tablets (≥768px - <992px) Large devices Desktops (≥992px - <1200px) Extra large devices Desktops (≥1200px)
.hidden-xs-down Visible Visible Visible Visible
.hidden-sm-down Visible Visible Visible
.hidden-md-down Visible Visible
.hidden-lg-down Visible
.hidden-xl-down
.hidden-xs-up
.hidden-sm-up Visible
.hidden-md-up Visible Visible
.hidden-lg-up Visible Visible Visible
.hidden-xl-up 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

Similar to the responsive hiding classes noted above, use these for toggling content for print.

Class Browser Print
.visible-print-block Visible
(as display: block)
.visible-print-inline Visible
(as display: inline)
.visible-print-inline-block Visible
(as display: inline-block)
.hidden-print Visible