Container

Responsive max width container wrapper enforcing consistent horizontal padding and center alignment across screen sizes.

Component Syntax

blade

<x-aura::container size="7xl">
    <!-- Page content -->
</x-aura::container>

1. Default Container

blade

Container Content (sm size)

<x-aura::container size="sm">

    <x-aura::card size="full" gap="2">

        <x-aura::text size="sm">
            Container Content (sm size)
        </x-aura::text>

    </x-aura::card>

</x-aura::container>

2. Custom Container Sizes

blade

size="md" (max-w-md)

size="xl" (max-w-xl)

<x-aura::container size="md">

    <x-aura::card size="full" gap="2">

        <x-aura::text size="sm">
            size="md" (max-w-md)
        </x-aura::text>

    </x-aura::card>

</x-aura::container>

<x-aura::container size="xl">

    <x-aura::card size="full" gap="2">

        <x-aura::text size="sm">
            size="xl" (max-w-xl)
        </x-aura::text>

    </x-aura::card>

</x-aura::container>

Component Props

Available properties and configurations for the container component.

Prop	Default	Available Values
size	6xl	sm md lg xl 2xl 3xl 4xl 5xl 6xl 7xl full
gap	null	1 2 3 4 6 8
padding	true	true false top bottom x y sm md lg
center	false	true false
as	div	div section article main

Aura Wire

Component Library

Container

Component Syntax

1. Default Container

2. Custom Container Sizes

Component Props

Pagination

Grid

Aura Wire