Example
d-inline
d-inline
d-block
d-block
Code Example
<div class="d-inline p-2 bg-primary text-white rounded-2">d-inline</div> <div class="d-inline p-2 bg-dark text-white rounded-2">d-inline</div> <div class="d-block p-2 bg-primary text-white rounded-2">d-block</div> <div class="d-block p-2 bg-dark text-white rounded-2">d-block</div>
Hiding elements
For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device.
| Screen size | Class |
|---|---|
| Hidden on all | .d-none |
| Hidden only on xs | .d-none .d-sm-block |
| Hidden only on sm | .d-sm-none .d-md-block |
| Hidden only on md | .d-md-none .d-lg-block |
| Hidden only on lg | .d-lg-none .d-xl-block |
| Hidden only on xl | .d-xl-none .d-xxl-block |
| Hidden only on xxl | .d-xxl-none |
| Visible on all | .d-block |
| Visible only on xs | .d-block .d-sm-none |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block .d-xxl-none |
| Visible only on xxl | .d-none .d-xxl-block |
Code Example
<div class="d-none d-sm-block">d-inline</div>