Display Utility

Quickly and responsively toggle the display value of components and more with our display utilities. Classes can be combined for various effects as you need.

Basic Uses

These utilities classes allow to set display property of an element.

Class Reference Name
.d-{name} none | inline | inline-block | block | table | table-cell | table-row | flex | inline-flex
.d-{breakpoint}-{name} Use {breakpoint} as sm, md, lg, and xl to effect on screen width.
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.
Uses Example
<div class="d-block"> ... </div>

Hiding elements

For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device.

Class Reference Screen Size
.d-none Hidden on all
.d-none .d-sm-block Hidden only on xs
.d-sm-none .d-md-block Hidden only on sm
.d-md-none .d-lg-block Hidden only on md
.d-lg-none .d-xl-block Hidden only on lg
.d-xl-none Hidden only on xl
.d-block Visible on all
.d-block .d-sm-none Visible only on xs
.d-none .d-sm-block .d-md-none Visible only on sm
.d-none .d-md-block .d-lg-none Visible only on md
.d-none .d-lg-block .d-xl-none Visible only on lg
.d-none .d-xl-block Visible only on xl
Uses Example
<div class="d-none d-sm-block"> ... </div>