Containers

Default Container

The default container class provides a responsive max-width and horizontal padding. It centers content and maintains readable line lengths on larger screens.

<div class="container">
	Your content here
</div>

Container Padding Variations

Containers can have different padding using utility classes.

<div class="p-2">
	Small padding container
</div>
<div class="p-4">
	Large padding container
</div>

Nested Containers

Containers can be nested to create complex layouts.

<div class="container">
	Outer container content
	<div class="container">
		Nested container content
	</div>
</div>

Container with Grid

Containers work seamlessly with the grid system for complex layouts.

<div class="container">
	<div class="grid grid-cols-2 gap-3">
		<div>Column 1</div>
		<div>Column 2</div>
	</div>
</div>

Responsive Behavior

Containers automatically adjust their width based on screen size. Resize your browser to see how they respond.

/* CSS Variables */
:root {
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
	--breakpoint-xxl: 1400px;
}
.container {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	max-width: var(--breakpoint-xxl);
}

Container with Card

Combining containers with cards for common layout patterns.

<div class="card">
	<h3>Card Title</h3>
	<p>Card content...</p>
</div>

Container Best Practices

• Use containers to maintain consistent content width across your site
• Combine with grid system for complex layouts
• Avoid nesting containers unnecessarily
• Use padding utilities to adjust spacing when needed
• Remember containers are responsive by default