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;

This turns any element into an inline element that flows like text.

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

This 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;

The lays out an element and its contents using flow layout.

.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-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.

Note: The unset property is a combination property that resets a property to its inherited value. It behaves like the inherit and the initial keywords, but it properly selects the right value for you. Unfortunately, unset is not fully supported in Internet Explorer. Because of this all unset values have the correct inherit or initial value applied.

Examples

1
2
3
4
5
6
7
<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