Display

Use display utilities to quickly style the display of an element.


Basic Display

The following display utilities classes will set display property of an element.

Class Description
.d-inline Set an inline display property of an element.
.d-inline-block Set an inline-block display property of an element.
.d-block Set a block display property of an element.

Hiding Elements

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

Class 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