Skip to main content

​
Overview

Centered container with max-width and responsive padding. The container component provides a consistent way to center content and constrain width across different screen sizes.

​
Container Base

Container Base

.cont {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
Reserved Name: The class name is .cont because “container” is a reserved keyword in Elementor.

​
Examples

​
Basic Container

<div class="cont">
  <h1 class="text-3xl font-bold mb-6">Page Title</h1>
  <p class="text-lg text-gray">Centered content with max width</p>
</div>

​
Container with Card Grid

<div class="cont">
  <div class="flex gap-6 flex-wrap">
    <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>
</div>

​
Container with Section

<section class="py-12">
  <div class="cont">
    <h2 class="text-3xl font-bold mb-6">Section Title</h2>
    <p class="text-lg text-gray">Section content</p>
  </div>
</section>

​
Common Patterns

​
Full Page Layout

<div class="cont">
  <header class="py-6 border-b border-gray-light">
    <h1 class="text-2xl font-bold">Site Title</h1>
  </header>
  
  <main class="py-12">
    <h2 class="text-3xl font-bold mb-6">Main Content</h2>
    <p class="text-lg text-gray">Content goes here</p>
  </main>
  
  <footer class="py-6 border-t border-gray-light">
    <p class="text-gray">Footer content</p>
  </footer>
</div>

​
Responsive Container

<div class="cont">
  <div class="flex flex-col md:flex-row gap-6">
    <div class="flex-1">
      <div class="card p-6">Content 1</div>
    </div>
    <div class="flex-1">
      <div class="card p-6">Content 2</div>
    </div>
  </div>
</div>

​
Best Practices

  • Use for page structure: Wrap main page content in containers
  • Combine with sections: Use containers inside sections for consistent spacing
  • Responsive padding: Container includes responsive padding that works on all screen sizes
  • Max width: Container constrains content width for better readability

Button

Button component

Card

Card component

Sizing

Width and max-width utilities

Components Overview

Complete components overview