Display

Utilities for controlling the CSS display property.

Classes

Class	display
d-none	none
d-block	block
d-inline	inline
d-inline-block	inline-block
d-flex	flex
d-inline-flex	inline-flex
d-grid	grid
d-inline-grid	inline-grid
d-table	table
d-table-row	table-row
d-table-cell	table-cell
d-contents	contents

Responsive variants

All classes support responsive prefixes — useful for showing/hiding or changing display type at different breakpoints:

Example	Result
d-none md:d-block	Hidden on mobile, block on tablet+
d-block md:d-none	Block on mobile, hidden on tablet+
d-block md:d-flex	Block on mobile, flex on tablet+

Examples

<!-- Hide on mobile -->
<div class="d-none md:d-block">
  Visible on tablet and wider only
</div>

<!-- Show only on mobile -->
<div class="d-block md:d-none">
  Visible on mobile only
</div>

<!-- Inline flex for icon + label -->
<span class="d-inline-flex items-center gap-2">
  <i class="icon"></i>
  Label
</span>

<!-- Grid container -->
<div class="d-grid gap-4">
  <div>Cell 1</div>
  <div>Cell 2</div>
</div>