Display

Toggle the display value of components and more with our display utilities. Includes responsive support.

Enable display behavior

Use .d-block, .d-inline, .d-inline-block, .d-flex and .d-inline-flex to adjust display properties.

I am a block container

<div class="d-block">I am a block container</div>

I am an inline container

<div class="d-inline">I am an inline container</div>

I am an inline-block container

<div class="d-inline-block">I am an inline-block container</div>

Hide an element

Using .d-none class hides an element.

The hidden element is above this box.

<div class="d-none">I am hidden</div>

Responsive variations

Every display value is available without a breakpoint and for each responsive breakpoint. When several display utilities match, the utility for the later breakpoint takes precedence.

Hidden from md

Visible as flex from md to lg

<div class="d-flex d-md-none">Hidden from md</div>
<div class="d-none d-md-flex d-lg-none">Visible as flex from md to lg</div>

Available values are none, block, inline, inline-block, flex and inline-flex. Combine a value with sm, md, lg, xl or xxl, for example .d-lg-inline-flex.