Display

Display atomic classes allow you to change an element’s display quickly.

Classes

Class Output Definition Responsive? Print?
.d-block display: block;

This turns any element into a block-level element.

.d-inline display: inline;

Turns any element into an inline element that flows like text.

.d-inline-block display: inline-block;

Turns any element into a block-level box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)

.d-flex display: flex;

Lays out its content according to the flexbox model.

.d-inline-flex display: inline-flex;

This makes the element behave like an inline element and lays out its content according to the flexbox model.

.d-grid display: grid;

This lays out an element and its contents using grid layout.

.d-inline-grid display: inline-grid;

This makes the element behave like an inline element and lays out its content according to the grid model.

.d-table display: table;

This makes your element behave like table HTML elements. It defines a block-level box.

.d-table-cell display: table-cell;

These elements behave like td HTML elements.

.d-none display: none;

Effectively removes the element from the DOM. Useful for showing / hiding elements.

To hide things when the page is printed, apply .print:d-none

.d-unset display: unset;

Removes any display property from the element.

Examples

<div class="d-block"></div>
<div class="d-inline"></div>
<div class="d-inline-block"></div>
<div class="d-table"></div>
<div class="d-table-cell"></div>
<div class="d-none"></div>
<div class="d-unset"></div>
.d-block

.d-inline
.d-inline
.d-inline


.d-inline-block
.d-inline-block
.d-inline-block
.d-table-cell inside .d-table
.d-table-cell inside .d-table
.d-table-cell inside .d-table