0build.dev
Choose a layout

display

Report an Issue
Class Description

display-block

Sets display: block. Constant class — no variable needed.

CSS Rules 

.display-block {
  display: block;
}

Usage 

<element class="display-block" />

Responsive

Prefix .display-block utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:display-block" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="display-block:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="display-block:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before display-block::before" />

<element class="content-after display-block::after" />
 .display-block Sets display: block. Constant class — no variable needed.

display-inline-block

Sets display: inline-block.

CSS Rules 

.display-inline-block {
  display: inline-block;
}

Usage 

<element class="display-inline-block" />

Responsive

Prefix .display-inline-block utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:display-inline-block" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="display-inline-block:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="display-inline-block:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before display-inline-block::before" />

<element class="content-after display-inline-block::after" />
 .display-inline-block Sets display: inline-block.

display-inline

Sets display: inline.

CSS Rules 

.display-inline {
  display: inline;
}

Usage 

<element class="display-inline" />

Responsive

Prefix .display-inline utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:display-inline" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="display-inline:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="display-inline:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before display-inline::before" />

<element class="content-after display-inline::after" />
 .display-inline Sets display: inline.

display-flex

Sets display: flex. Constant class — no variable needed.

CSS Rules 

.display-flex {
  display: flex;
}

Usage 

<element class="display-flex" />

Responsive

Prefix .display-flex utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:display-flex" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="display-flex:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="display-flex:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before display-flex::before" />

<element class="content-after display-flex::after" />
 .display-flex Sets display: flex. Constant class — no variable needed.

display-inline-flex

Sets display: inline-flex.

CSS Rules 

.display-inline-flex {
  display: inline-flex;
}

Usage 

<element class="display-inline-flex" />

Responsive

Prefix .display-inline-flex utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:display-inline-flex" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="display-inline-flex:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="display-inline-flex:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before display-inline-flex::before" />

<element class="content-after display-inline-flex::after" />
 .display-inline-flex Sets display: inline-flex.

display-table

Sets display to table, making the element behave like a standard HTML table element.

CSS Rules 

.display-table {
  display: table;
}

Usage 

<element class="display-table" />

Responsive

Prefix .display-table utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:display-table" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="display-table:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="display-table:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before display-table::before" />

<element class="content-after display-table::after" />
 .display-table Sets display to table, making the element behave like a standard HTML table element.

display-inline-table

Sets display to inline-table.

CSS Rules 

.display-inline-table {
  display: inline-table;
}

Usage 

<element class="display-inline-table" />

Responsive

Prefix .display-inline-table utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:display-inline-table" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="display-inline-table:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="display-inline-table:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before display-inline-table::before" />

<element class="content-after display-inline-table::after" />
 .display-inline-table Sets display to inline-table.

display-table-caption

Sets display to table-caption.

CSS Rules 

.display-table-caption {
  display: table-caption;
}

Usage 

<element class="display-table-caption" />

Responsive

Prefix .display-table-caption utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:display-table-caption" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="display-table-caption:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="display-table-caption:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before display-table-caption::before" />

<element class="content-after display-table-caption::after" />
 .display-table-caption Sets display to table-caption.

display-table-cell

Sets display to table-cell, behaving like a <td> element.

CSS Rules 

.display-table-cell {
  display: table-cell;
}

Usage 

<element class="display-table-cell" />

Responsive

Prefix .display-table-cell utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:display-table-cell" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="display-table-cell:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="display-table-cell:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before display-table-cell::before" />

<element class="content-after display-table-cell::after" />
 .display-table-cell Sets display to table-cell, behaving like a <td> element.

display-table-column

Sets display to table-column.

CSS Rules 

.display-table-column {
  display: table-column;
}

Usage 

<element class="display-table-column" />

Responsive

Prefix .display-table-column utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:display-table-column" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="display-table-column:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="display-table-column:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before display-table-column::before" />

<element class="content-after display-table-column::after" />
 .display-table-column Sets display to table-column.

display-table-column-group

Sets display to table-column-group.

CSS Rules 

.display-table-column-group {
  display: table-column-group;
}

Usage 

<element class="display-table-column-group" />

Responsive

Prefix .display-table-column-group utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:display-table-column-group" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="display-table-column-group:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="display-table-column-group:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before display-table-column-group::before" />

<element class="content-after display-table-column-group::after" />
 .display-table-column-group Sets display to table-column-group.
.display-table-footer-group Sets display to table-footer-group.

display-table-header-group

Sets display to table-header-group.

CSS Rules 

.display-table-header-group {
  display: table-header-group;
}

Usage 

<element class="display-table-header-group" />

Responsive

Prefix .display-table-header-group utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:display-table-header-group" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="display-table-header-group:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="display-table-header-group:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before display-table-header-group::before" />

<element class="content-after display-table-header-group::after" />
 .display-table-header-group Sets display to table-header-group.

display-table-row-group

Sets display to table-row-group.

CSS Rules 

.display-table-row-group {
  display: table-row-group;
}

Usage 

<element class="display-table-row-group" />

Responsive

Prefix .display-table-row-group utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:display-table-row-group" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="display-table-row-group:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="display-table-row-group:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before display-table-row-group::before" />

<element class="content-after display-table-row-group::after" />
 .display-table-row-group Sets display to table-row-group.

display-table-row

Sets display to table-row, behaving like a <tr> element.

CSS Rules 

.display-table-row {
  display: table-row;
}

Usage 

<element class="display-table-row" />

Responsive

Prefix .display-table-row utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:display-table-row" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="display-table-row:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="display-table-row:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before display-table-row::before" />

<element class="content-after display-table-row::after" />
 .display-table-row Sets display to table-row, behaving like a <tr> element.

display-flow-root

Sets display to flow-root, establishing a new block formatting context.

CSS Rules 

.display-flow-root {
  display: flow-root;
}

Usage 

<element class="display-flow-root" />

Responsive

Prefix .display-flow-root utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:display-flow-root" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="display-flow-root:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="display-flow-root:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before display-flow-root::before" />

<element class="content-after display-flow-root::after" />
 .display-flow-root Sets display to flow-root, establishing a new block formatting context.

display-grid

Sets display: grid.

CSS Rules 

.display-grid {
  display: grid;
}

Usage 

<element class="display-grid" />

Responsive

Prefix .display-grid utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:display-grid" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="display-grid:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="display-grid:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before display-grid::before" />

<element class="content-after display-grid::after" />
 .display-grid Sets display: grid.

display-inline-grid

Sets display to inline-grid.

CSS Rules 

.display-inline-grid {
  display: inline-grid;
}

Usage 

<element class="display-inline-grid" />

Responsive

Prefix .display-inline-grid utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:display-inline-grid" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="display-inline-grid:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="display-inline-grid:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before display-inline-grid::before" />

<element class="content-after display-inline-grid::after" />
 .display-inline-grid Sets display to inline-grid.

display-contents

Sets display: contents. Element does not generate a box; children participate in layout directly.

CSS Rules 

.display-contents {
  display: contents;
}

Usage 

<element class="display-contents" />

Responsive

Prefix .display-contents utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:display-contents" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="display-contents:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="display-contents:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before display-contents::before" />

<element class="content-after display-contents::after" />
 .display-contents Sets display: contents. Element does not generate a box; children participate in layout directly.

display-list-item

Sets display to list-item.

CSS Rules 

.display-list-item {
  display: list-item;
}

Usage 

<element class="display-list-item" />

Responsive

Prefix .display-list-item utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:display-list-item" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="display-list-item:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="display-list-item:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before display-list-item::before" />

<element class="content-after display-list-item::after" />
 .display-list-item Sets display to list-item.

display-hidden

Sets display: none. Hides element entirely, removing it from layout flow.

CSS Rules 

.display-hidden {
  display: none;
}

Usage 

<element class="display-hidden" />

Responsive

Prefix .display-hidden utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:display-hidden" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="display-hidden:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="display-hidden:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before display-hidden::before" />

<element class="content-after display-hidden::after" />
 .display-hidden Sets display: none. Hides element entirely, removing it from layout flow.