Use display utilities to quickly style the display of an element.
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. |
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 |