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 |