Display
Display atomic classes allow you to change an element’s display quickly.
| 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 |
||
.d-table-cell |
display: table-cell; |
These elements behave like |
||
.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 |
||
.d-unset |
display: unset; |
Removes any display property from the element. |
<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>