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