Skip to content
Yumma CSS Logo Yumma CSS Logo Yumma CSS
Blog
Support Yumma CSS by starring us on GitHub!

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 class makes the element a block-level element, causing it to take up the full width available and start on a new line.

A
B
C
 
<div class="d-b s-y-4 stripes tc-white">
  <div class="bg-indigo p-4 rad-1 ta-c">A</div>
  <div class="bg-indigo p-4 rad-1 ta-c">B</div>
  <div class="bg-indigo p-4 rad-1 ta-c">C</div>
</div>

Flex

This example sets the display to flex. The d-f class makes the element a flex container, enabling the use of flexbox layout properties for its children.

A
B
C
 
<div class="d-f g-4 stripes 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 class creates a new block formatting context, allowing for better control of floated children.

A
 
<div class="d-fr 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 stripes"></div>
</div>

Grid

This example sets the display to grid. The d-g class makes the element a grid container, enabling the use of grid layout properties for its children.

A
B
C
 
<div class="d-g g-4 gtc-2 stripes tc-white">
  <div class="bg-indigo p-4 rad-1 ta-c">A</div>
  <div class="bg-indigo p-4 rad-1 ta-c">B</div>
  <div class="bg-indigo p-4 rad-1 ta-c">C</div>
</div>

Inline

This example sets the display to inline. The d-i class makes the element an inline element, allowing it to sit within a line of text without breaking the flow.

We're working on this example.

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

Inline Flex

This example sets the display to inline-flex. The d-if class makes the element an inline flex container, allowing it to sit within a line of text while enabling flexbox layout properties for its children.

A
B
C
 
<div class="d-if stripes g-4 tc-white">
  <div class="bg-indigo d-ib p-4 rad-1 ta-c w-32">A</div>
  <div class="bg-indigo d-ib p-4 rad-1 ta-c w-32">B</div>
  <div class="bg-indigo d-ib p-4 rad-1 ta-c w-32">C</div>
</div>

Inline Block

This example sets the display to inline-block. The d-ib class 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="stripes tc-white">
  <span class="bg-indigo d-ib p-4 rad-1 ta-c w-32">A</span>
  <span class="bg-indigo d-ib p-4 rad-1 ta-c w-32">B</span>
  <span class="bg-indigo d-ib p-4 rad-1 ta-c w-32">C</span>
</div>

Inline Grid

This example sets the display to inline-grid. The d-ig class makes the element an inline grid container, allowing it to sit within a line of text while enabling grid layout properties for its children.

A
B
C
 
<div class="d-ig gtc-2 g-4 stripes tc-white">
  <div class="bg-indigo d-ib p-4 rad-1 ta-c w-32">A</div>
  <div class="bg-indigo d-ib p-4 rad-1 ta-c w-32">B</div>
  <div class="bg-indigo d-ib p-4 rad-1 ta-c w-32">C</div>
</div>

Inline Table

This example sets the display to inline-table. The d-it class 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 class 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 class hides the element, preventing it from being displayed in the layout.

A
B
C
 
<div class="d-b stripes s-y-4 tc-white">
  <div class="bg-indigo d-none p-4 rad-1 ta-c">A</div>
  <div class="bg-indigo p-4 rad-1 ta-c">B</div>
  <div class="bg-indigo p-4 rad-1 ta-c">C</div>
</div>

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Responsive breakpoints

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>

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Hover states

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>