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