Display

Utilities for controlling the display box type of an element.

Class	Properties
.d-block	display: block;
.d-inline-block	display: inline-block;
.d-inline	display: inline;
.d-flex	display: flex;
.d-inline-flex	display: inline-flex;
.d-table	display: table;
.d-table-row	display: table-row;
.d-table-cell	display: table-cell;
.d-none	display: none;

Block

Use .d-block to create a block-level element.

1

2

3

Inline Block

Use .d-inline-block to create an inline block-level element.

1

2

3

Inline

Use .d-inline to create an inline element.

1

2

3

Flex

Use .d-flex to create a block-level flex container.

1

2

3

Inline Flex

Use .d-inline-flex to create an inline flex container.

1

2

3

Table

Use the .table, .table-row, and .table-cell to create elements that behave like a table or td element, respectively.

A cell with more content

Cell 2

Cell 3

Cell 4

A cell with more content

Cell 6

None

Use .d-none to set an element to display: none and remove it from the page layout.

1

2

3

Responsive

To control the display property at a specific breakpoint, add @{breakpoint} the end of the utility.

Variants

By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.