Display
Controls the display box type of an element.
Widely available
This feature is well established and works across many devices and browser versions.
| Class | Style |
|---|---|
d-b | display: block; |
d-f | display: flex; |
d-fr | display: flow-root; |
d-g | display: grid; |
d-i | display: inline; |
d-ib | display: inline-block; |
d-if | display: inline-flex; |
d-ig | display: inline-grid; |
d-it | display: inline-table; |
d-none | display: none; |
d-t | display: table; |
d-tc | display: table-cell; |
d-tco | display: table-column; |
d-tr | display: table-row; |
Inline
Initial value
Makes the element an inline element, allowing it to sit within a line of text without breaking the flow.
<div class="d-i ...">A</div>Block
Makes the element a block-level element, causing it to take up the full width available and start on a new line.
<div class="d-b ...">A</div>Flex
Makes the element a flex container, enabling the use of flexbox layout properties for its children.
<div class="d-f ...">A</div>Flow Root
Creates a new block formatting context, allowing for better control of floated children.
<div class="d-fr ...">A</div>Grid
Makes the element a grid container, enabling the use of grid layout properties for its children.
<div class="d-g ...">A</div>Inline Flex
Makes the element an inline flex container, allowing it to sit within a line of text while enabling flexbox layout properties for its children.
<div class="d-if ...">A</div>Inline Block
Makes the element an inline-block element, allowing it to sit within a line of text while also respecting width and height properties.
<div class="d-ib ...">A</div>Inline Grid
Makes the element an inline grid container, allowing it to sit within a line of text while enabling grid layout properties for its children.
<div class="d-ig ...">A</div>Inline Table
Makes the element an inline table, allowing it to sit within a line of text while behaving like a table element.
<div class="d-it ..."></div>Table
Makes the element a block-level table, allowing it to contain table rows and cells.
<div class="d-t ..."></div>None
Hides the element, preventing it from being displayed in the layout.
<div class="d-none ...">A</div>Using utility variants
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
Targeting different viewports
You can combine responsive breakpoints like sm:d-*, md:d-*, lg:d-*, and xxl:d-* to allow targeting specific utilities in different viewports.
Targeting hover states
Alternatively, you can apply :hover by using h:d-* utility to override elements and change their values when hovering over them.