Skip to main content

​
Overview

Use display utilities to control how elements are rendered. These utilities set the CSS display property and are fundamental to building layouts in Elementor v4.

​
Display Utilities

Display Properties

.blockBlockdisplay: block;Full-width block element
.inline-blockInline-blockdisplay: inline-block;Inline with block properties
.flexFlexdisplay: flex;Flexbox container
.inline-flexInline-flexdisplay: inline-flex;Inline flexbox container
.hiddenHiddendisplay: none;Hide element

​
Block

Use .block to make an element a block-level element. Block elements take up the full width of their container and start on a new line. 
<div class="block p-4 bg-blue text-white">This is a block element</div>

​
Common Use Cases

  • Creating full-width containers
  • Stacking elements vertically
  • Form elements that need full width
<div class="block p-4 bg-gray-light mb-4">Block 1</div>
<div class="block p-4 bg-gray-light mb-4">Block 2</div>
<div class="block p-4 bg-gray-light">Block 3</div>

​
Inline Block

Use .inline-block to make an element inline but with block-level properties. Elements can sit side-by-side but still respect width and height. 
<span class="inline-block p-2 bg-blue text-white rounded">
  Inline Block 1
</span>
<span class="inline-block p-2 bg-green text-white rounded">
  Inline Block 2
</span>

​
Common Use Cases

  • Buttons in navigation
  • Icon and text combinations
  • Elements that need to flow inline but respect dimensions
<div class="text-center">
  <button class="inline-block px-6 py-3 bg-blue text-white rounded">
    Button 1
  </button>
  <button class="inline-block px-6 py-3 bg-green text-white rounded">
    Button 2
  </button>
</div>

​
Flex

Use .flex to create a flexbox container. This is the foundation for most modern layouts. 
<div class="flex items-center gap-4">
  <div class="p-4 bg-blue text-white">Item 1</div>
  <div class="p-4 bg-green text-white">Item 2</div>
  <div class="p-4 bg-red text-white">Item 3</div>
</div>

​
Common Use Cases

  • Navigation bars
  • Card grids
  • Centered content
  • Responsive layouts
Combine .flex with other flexbox utilities like .items-center, .justify-between, and .gap-4 for powerful layouts. See the Flexbox documentation for complete flexbox utilities.

​
Inline Flex

Use .inline-flex to create an inline flexbox container. Useful when you want flexbox behavior but need the container to flow inline with other elements. 
<div class="text-center">
  <div class="inline-flex items-center gap-2 bg-gray-light p-2 rounded">
    <span>Icon</span>
    <span>Label</span>
  </div>
  <div class="inline-flex items-center gap-2 bg-gray-light p-2 rounded">
    <span>Icon</span>
    <span>Label</span>
  </div>
</div>

​
Common Use Cases

  • Badges and tags
  • Icon-text combinations in paragraphs
  • Inline form elements

​
Hidden

Use .hidden to completely hide an element from the page. The element is removed from the document flow and takes up no space. 
<div class="hidden">This content is hidden</div>
The .hidden utility uses display: none, which removes the element from accessibility trees. For screen reader accessibility, consider using visibility utilities or conditional rendering instead.

​
Common Use Cases

  • Conditionally showing/hiding content
  • Mobile menu toggles
  • Progressive disclosure patterns

​
Display Examples

<nav class="flex items-center justify-between p-6 bg-white">
  <h1 class="text-2xl font-bold">Logo</h1>
  <div class="flex gap-6">
    <a href="#" class="text-gray">Home</a>
    <a href="#" class="text-gray">About</a>
    <a href="#" class="text-gray">Contact</a>
  </div>
</nav>

​
Card Grid

<div class="flex flex-wrap gap-6">
  <div class="w-1-3">
    <div class="card p-6">Card 1</div>
  </div>
  <div class="w-1-3">
    <div class="card p-6">Card 2</div>
  </div>
  <div class="w-1-3">
    <div class="card p-6">Card 3</div>
  </div>
</div>

​
Centered Content

<div class="flex items-center justify-center min-h-screen">
  <div class="text-center">
    <h1 class="text-4xl font-bold mb-4">Centered Content</h1>
    <p class="text-lg text-gray">Perfectly centered</p>
  </div>
</div>

​
Best Practices

1

Choose the Right Display

Use .block for full-width elements, .flex for layouts, and .inline-block for inline elements that need dimensions.
2

Combine with Other Utilities

Display utilities work best when combined with spacing, sizing, and alignment utilities.
3

Use Flexbox for Layouts

Prefer .flex over floats or positioning for modern layouts. It’s more predictable and easier to maintain.
4

Consider Accessibility

Be mindful of how display changes affect screen readers and keyboard navigation.

Flexbox

Complete flexbox utilities for layouts

Spacing

Margin and padding for display spacing

Sizing

Width and height utilities

Overflow

Control content overflow behavior