Display

The d-* family sets the CSS display property. Values include block, inline-block, flex, inline-flex, grid, inline-grid, contents, and none.

Basic display values

Use d-block for full-width block elements, d-inline-block to flow inline while accepting width and height, d-flex for flexbox layout, and d-none to hide elements.

<div class="d-block border rounded-sm p-2 mb-3">d-block</div>
<div class="mb-3">
  <span class="d-inline-block bg-surface-raised rounded-sm p-2">d-inline-block</span>
  <span class="d-inline-block bg-surface-raised rounded-sm p-2">d-inline-block</span>
</div>

<div class="d-flex gap-2 mb-3">
  <span class="bg-surface-raised rounded-sm p-2">d-flex item</span>
  <span class="bg-surface-raised rounded-sm p-2">d-flex item</span>
  <span class="bg-surface-raised rounded-sm p-2">d-flex item</span>
</div>

<p class="bg-surface-raised rounded-sm p-2">Visible. <span class="d-none">Hidden with d-none.</span> Visible again.</p>

d-block

d-inline-blockd-inline-block

d-flex itemd-flex itemd-flex item

Visible. Hidden with d-none. Visible again.

Grid and inline variants

Use d-grid for CSS grid layout, d-inline-flex and d-inline-grid for inline formatting contexts, and d-contents to make the element invisible to the box model while keeping its children in flow.

<div class="d-inline-flex gap-2 border rounded-sm p-2 mb-3">
  <span class="bg-surface-raised rounded-sm p-2">d-inline-flex</span>
  <span class="bg-surface-raised rounded-sm p-2">item</span>
</div>

<div class="d-inline-grid gap-2 border rounded-sm p-2">
  <span class="bg-surface-raised rounded-sm p-2">d-inline-grid</span>
  <span class="bg-surface-raised rounded-sm p-2">item</span>
</div>

d-inline-flexitem

d-inline-griditem

Responsive

Add breakpoint suffixes for responsive behavior: .d-*@sm, .d-*@md, .d-*@lg, .d-*@xl, .d-*@2xl.

<div class="d-none d-block@md border rounded-sm p-2 mb-3">Hidden on mobile, visible from md up</div>
<div class="d-block d-none@lg border rounded-sm p-2">Visible until lg, then hidden</div>

Visible until lg, then hidden

Reference

Class	Property	Responsive
`.d-none`	`display: none`	Yes
`.d-inline`	`display: inline`	Yes
`.d-inline-block`	`display: inline-block`	Yes
`.d-block`	`display: block`	Yes
`.d-flex`	`display: flex`	Yes
`.d-inline-flex`	`display: inline-flex`	Yes
`.d-grid`	`display: grid`	Yes
`.d-inline-grid`	`display: inline-grid`	Yes
`.d-contents`	`display: contents`	Yes