Display

Controls the display box type of an element.

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="bg-indigo d-i p-4 rad-1 tc-white">A</div>
<div class="bg-indigo d-i p-4 rad-1 tc-white">B</div>
<div class="bg-indigo d-i p-4 rad-1 tc-white">C</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 ta-c tc-white">
  <div class="bg-indigo mt-4 p-4 rad-1">A</div>
  <div class="bg-indigo mt-4 p-4 rad-1">B</div>
  <div class="bg-indigo mt-4 p-4 rad-1">C</div>
</div>

Flex

Makes the element a flex container, enabling the use of flexbox layout properties for its children.

<div class="d-f g-4 ta-c tc-white">
  <div class="ai-c bg-indigo d-b d-g d-14 jc-c p-4 rad-1">A</div>
  <div class="ai-c bg-indigo d-b d-g d-14 jc-c p-4 rad-1">B</div>
  <div class="ai-c bg-indigo d-b d-g d-14 jc-c p-4 rad-1">C</div>
</div>

Flow Root

Creates a new block formatting context, allowing for better control of floated children.

<div class="d-fr ta-c tc-white">
  <div class="ai-c bg-indigo d-f d-18 flo-l jc-c p-a rad-1 zi-10">A</div>
  <div class="h-18"></div>
</div>

Grid

Makes the element a grid container, enabling the use of grid layout properties for its children.

<div class="d-g g-4 gtc-2 ta-c tc-white">
  <div class="bg-indigo p-4 rad-1">A</div>
  <div class="bg-indigo p-4 rad-1">B</div>
  <div class="bg-indigo p-4 rad-1">C</div>
</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 g-4 ta-c tc-white">
  <div class="bg-indigo d-ib p-4 rad-1 w-32">A</div>
  <div class="bg-indigo d-ib p-4 rad-1 w-32">B</div>
  <div class="bg-indigo d-ib p-4 rad-1 w-32">C</div>
</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="ta-c tc-white">
  <span class="bg-indigo d-ib ml-4 p-4 rad-1 w-32">A</span>
  <span class="bg-indigo d-ib ml-4 p-4 rad-1 w-32">B</span>
  <span class="bg-indigo d-ib ml-4 p-4 rad-1 w-32">C</span>
</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 gtc-2 g-4 ta-c ta-c tc-white">
  <div class="bg-indigo d-ib p-4 rad-1 w-32">A</div>
  <div class="bg-indigo d-ib p-4 rad-1 w-32">B</div>
  <div class="bg-indigo d-ib p-4 rad-1 w-32">C</div>
</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-g rg-4 ta-c tc-white">
  <div class="bg-indigo d-none p-4 rad-1">A</div>
  <div class="bg-indigo p-4 rad-1">B</div>
  <div class="bg-indigo p-4 rad-1">C</div>
</div>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Using media queries

You can combine responsive breakpoints like sm:d-*, md:d-*, lg:d-*, and xxl:d-* to allow targeting specific utilities in different viewports.

Using hover states

Alternatively, you can apply :hover by using h:d-* utility to override elements and change their values when hovering over them.