display property accepts a handful of values and we support many of them with utility classes..d-none.d-inline.d-inline-block.d-block.d-table.d-table-cell.d-flex.d-inline-flexYou could use the inline, block, or inline-block utilities (the same applies to the other classes).
<div class="d-inline bg-primary">d-inline</div>
<div class="d-inline bg-success">d-inline</div>
<div class="d-inline bg-warning">d-inline</div><span class="d-block bg-primary">d-block (Free Time Learning)</span><div class="d-inline-block bg-primary">d-inline-block</div>
<div class="d-inline-block bg-success">d-inline-block</div>
<div class="d-inline-block bg-warning">d-inline-block</div>Responsive variations also exist for every single utility mentioned above.
.d-none.d-inline.d-inline-block.d-block.d-table.d-table-cell.d-flex.d-inline-flex.d-sm-none.d-sm-inline.d-sm-inline-block.d-sm-block.d-sm-table.d-sm-table-cell.d-sm-flex.d-sm-inline-flex.d-md-none.d-md-inline.d-md-inline-block.d-md-block.d-md-table.d-md-table-cell.d-md-flex.d-md-inline-flex.d-lg-none.d-lg-inline.d-lg-inline-block.d-lg-block.d-lg-table.d-lg-table-cell.d-lg-flex.d-lg-inline-flex.d-xl-none.d-xl-inline.d-xl-inline-block.d-xl-block.d-xl-table.d-xl-table-cell.d-xl-flex.d-xl-inline-flexTo hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.
To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class, for example .d-none, .d-md-block, .d-xl-none will hide the element for all screen sizes except on medium and large devices.
| 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 |
| 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 |
Change the display value of elements when printing with our print display utilities.
| Class | Print style |
|---|---|
.d-print-block |
Applies display: block to the element when printing |
.d-print-inline |
Applies display: inline to the element when printing |
.d-print-inline-block |
Applies display: inline-block to the element when printing |
.d-print-none |
Applies display: none to the element when printing |