Display

Control how elements participate in layout with the bundled display utilities.

Overview

Display utilities control how elements render in layout. They are the starting point for most framework composition: block flow, inline layout, flex layout, and visibility toggles.

Class	CSS	Usage
.block	display: block;	Full-width block element
.inline-block	display: inline-block;	Inline with box-model sizing
.flex	display: flex;	Flex container
.inline-flex	display: inline-flex;	Inline flex container
.hidden	display: none;	Remove from layout

Block

.block makes an element start on a new line and fill the full width of its parent. This is the default for divs and section elements.

<div class="elementor-element block padding-4 background-primary text-white rounded">
  This is a block element
</div>

Inline and Inline Block

.inline-block gives an element inline flow (it sits alongside text) but lets you control width, height, padding, and margin like a block. Use it for badges, buttons, and compact UI controls.

<div class="elementor-element text-center">
  <button class="inline-block padding-horizontal-6 padding-vertical-3 background-primary text-white rounded">
    Button 1
  </button>
  <button class="inline-block padding-horizontal-6 padding-vertical-3 background-success text-white rounded">
    Button 2
  </button>
</div>

Flex

.flex turns an element into a flex container, laying children out in a horizontal row by default. This is the foundation for most modern layout composition.

<div class="elementor-element flex items-center gap-4">
  <div class="padding-4 background-primary text-white rounded">
    Item 1
  </div>
  <div class="padding-4 background-success text-white rounded">
    Item 2
  </div>
  <div class="padding-4 background-error text-white rounded">
    Item 3
  </div>
</div>

Inline Flex

.inline-flex creates a flex container that participates in inline flow. The container sizes to its content and sits alongside surrounding text. Use it for inline tag groups and compact controls.

<div class="elementor-element text-center">
  <div class="inline-flex items-center gap-2 background-gray-light padding-2 rounded">
    <span>
      Icon
    </span>
    <span>
      Label
    </span>
  </div>
</div>

Hidden

.hidden removes an element from layout entirely. It will not be visible or take up space.

The .hidden utility removes the element from layout and accessibility trees. Use it intentionally.

Best Practices

1. Use Flex for Layouts

   Prefer .flex for modern horizontal and vertical layout composition.

2. Use Block for Structural Elements

   Reach for .block when the element should start on a new line and fill the row.

3. Use Inline Block or Inline Flex for Compact UI

   Badges, buttons, and compact controls often benefit from inline formatting with layout control.

4. Use Responsive Suffixes Where Needed

   Display classes also support the bundled --on-* suffix pattern when layout behavior needs to change by viewport.

Related Utilities

Flexbox

Complete flexbox utilities for layouts

Spacing

Margin, padding, and gap utilities