Display

Set the display box type of an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

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;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:d-(value)
Small≥640px
md:d-(value)
Medium≥768px
lg:d-(value)
Large≥1024px
xxl:d-(value)
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:d-(value)