Answer»
We can quickly Quickly and responsively toggle the display value of components and more with the help of display utilities.
| d-*-block | display block with a specific styling. |
<span class="d-block bg-primary">display block</span>
<span class="d-sm-block bg-success">display small block</span> |
|---|
| d-*-flex | display flex items with a specific styling. |
<div class="d-flex bg-secondary">...</div>
<span class="d-md-flex bg-info">...</span> |
|---|
| d-*-inline | inline display with a specific styling. |
<div class="d-inline bg-secondary">...</div> |
|---|
| d-*-inline-block | display inline-block. |
<div class="d-inline-block bg-secondary">...</div>
<div class="d-lg-inline-block bg-info">...</div> |
|---|
| d-*-inline-flex | styling for inline flex. |
<div class="d-inline-flex bg-secondary">...</div>
<div class="d-lg-inline-flex bg-info">...</div> |
|---|
| d-*-none | hide display for certain elements (same as display: none). |
<div class="d-none">...</div>
<div class="d-lg-none">...</div> |
|---|
| d-*-table | display styling for the table. |
<div class="d-table">...</div>
<div class="d-lg-table">...</div> |
|---|
| d-*-table-cell | styling for a table cell. |
<div class="d-table-cell">...</div>
<div class="d-lg-table-cell">...</div> |
|---|
| d-print-... | controls how elements have to be displayed while printing. Value can be none, block, inline, inline-block, table, table-row,table-cell, flex, inline-flex. |
<div class="d-print-block">Display content as block on print</div> |
|---|
|
