Display

Utilities for controlling the display box type of an element.

Class Name	CSS Equivalent
block	display: block;
inline	display: inline;
inline-block	display: inline-block;
flex	display: flex;
inline-flex	display: inline-flex;
grid	display: grid;
inline-grid	display: inline-grid;
flow-root	display: flow-root;
contents	display: contents;
table	display: table;
table-row	display: table-row;
list-item	display: list-item;
hidden	display: none;

Block & Inline Classes

Block

Use the .block class to set an element's display property to block. This makes the element behave as a block-level element, taking up the full width of its parent container.

<div class="block">
  <!-- Your content here -->
</div>

Inline

The .inline class sets an element's display property to inline. This allows the element to flow inline with the surrounding content, and it does not start on a new line.

<span class="inline">Inline Element</span>

Inline Block

The .inline-block class sets an element's display property to inline-block. This combines the behavior of inline and block elements, allowing the element to flow inline while maintaining block-level properties.

<span class="inline-block">Inline Block Element</span>

Flexbox Classes

Flex

Use the .flex class to create a block-level flex container. This class enables flexible layouts and is often used for building responsive designs.

<div class="flex">
  <!-- Flexbox content here -->
</div>

Inline Flex

The .inline-flex class creates an inline flex container that flows with text. It's useful for creating inline elements with flexible layouts.

<span class="inline-flex">Inline Flex Element</span>

Grid Classes

Grid

Use the .grid class to create a grid container. Grid layouts are excellent for creating complex two-dimensional layouts with rows and columns.

<div class="grid">
  <!-- Grid content here -->
</div>

Inline Grid

The .inline-grid class creates an inline grid container. It flows with text and is suitable for creating inline grid-based designs.

<span class="inline-grid">Inline Grid Element</span>

Other Display and Layout Classes

Flow Root

The .flow-root class is used to create a block-level element with its own block formatting context. It's helpful for containing and clearing floated elements.

<div class="flow-root">
  <!-- Flow Root content here -->
</div>

Contents

The .contents class creates a "phantom" container whose children act like direct children of the parent. It's useful for controlling the layout of child elements.

<div class="contents">
  <!-- Contents content here -->
</div>

Table and List Classes

Table

The .table class and related table classes allow you to create elements that behave like their respective table elements. This is useful for creating structured data tables and other table-related layouts.

<div class="table">
  <!-- Table content here -->
</div>

Table Row

Use the .table-row class to define elements that behave as table rows within a table layout.

<div class="table-row">
  <!-- Table Row content here -->
</div>

List Item

The .list-item class is used for elements that should behave like list items. It's handy for creating custom list-style layouts.

<div class="list-item">
  <!-- List Item content here -->
</div>

Visibility Classes

Hidden

The .hidden class sets an element's display property to none, effectively hiding it from the page layout. This is often used to toggle the visibility of elements dynamically.

<div class="hidden">
  <!-- Hidden content here -->
</div>

Visually Hidden

The .visually-hidden class is used for creating elements that are visually hidden but still accessible for screen readers. It clips the element to a 1x1 pixel area and hides it from view while maintaining accessibility.

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

<span class="visually-hidden">Visually Hidden Text</span>