Display

Quickly and responsively toggle the display value of components and more, with our display utilities.

Examples

Change the display property with our responsive display utility classes. Include support for some of the more common values, as well as some extras for controlling printing.

d-inline

d-block d-block

flex item

grid 1

Syntax & responsive

Use a breakpoint suffix to only apply the display value from that breakpoint upward: .d-sm-block, .d-md-flex, .d-lg-grid, .d-xl-inline-flex, .d-xxl-none.

<div class="d-print-none">Hidden when printing</div>
<div class="d-none d-md-block">Hidden on mobile, block at md+</div>
<div class="d-lg-flex align-items-center">Flexbox at large+</div>

Print display

Change the display value of elements when printing with our print utility classes: .d-print-none, .d-print-inline, .d-print-block, .d-print-flex, and more.

Available values

All display values: none, inline, inline-block, block, grid, inline-grid, table, inline-table, table-row, table-cell, flex, inline-flex, and flow-root.