Display

Controls the display box type of an element.

Class	Properties
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-t	`display: table;`
d-none	`display: none;`

Block

This example sets the display to block. The d-b utility 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

This example sets the display to flex. The d-f utility 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 dim-14 jc-c p-4 rad-1">A</div>
  <div class="ai-c bg-indigo d-b d-g dim-14 jc-c p-4 rad-1">B</div>
  <div class="ai-c bg-indigo d-b d-g dim-14 jc-c p-4 rad-1">C</div>
</div>

Flow Root

This example sets the display to flow-root. The d-fr utility 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 dim-18 flo-l jc-c p-a rad-1 zi-10">A</div>
  <div class="h-18"></div>
</div>

Grid

This example sets the display to grid. The d-g utility 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

This example sets the display to inline. The d-i utility 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">A</div>
<div class="bg-indigo d-i p-4 rad-1">B</div>
<div class="bg-indigo d-i p-4 rad-1">C</div>

Inline Flex

This example sets the display to inline-flex. The d-if utility 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

This example sets the display to inline-block. The d-ib utility makes the element an inline-block element, allowing it to sit within a line of text while also respecting width and height properties.

A B C

<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

This example sets the display to inline-grid. The d-ig utility 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

This example sets the display to inline-table. The d-it utility makes the element an inline table, allowing it to sit within a line of text while behaving like a table element.

We're working on this example.

<p class="fw-600 ta-c">We're working on this example.</p>

Table

This example sets the display to table. The d-t utility makes the element a block-level table, allowing it to contain table rows and cells.

We're working on this example.

<p class="fw-600 ta-c">We're working on this example.</p>

None

This example sets the display to none. The d-none utility 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>

Conditional styles

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

Media modifiers

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

<div class="d-none md:d-b ..."></div>

Hover modifiers

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

<div class="d-none h:d-b ..."></div>