Container
Center and constrain page content within a responsive, width-limited wrapper
Usage
<dui-container>...</dui-container>Examples
Basic
A container horizontally centers its content, constrains it to a responsive max-width, and applies responsive horizontal padding.
<dui-container class="rounded-lg border bg-muted py-8 text-center">
<h2 class="text-lg font-semibold">Plan your next journey</h2>
<p class="text-sm text-muted-foreground">
This content sits inside a container — horizontally centered, width-constrained, with
responsive horizontal padding.
</p>
</dui-container>Page layout
Use a container as the outermost page wrapper, then compose <dui-stack> and <dui-group> inside it to lay out the content vertically and horizontally.
<dui-container>
<dui-stack gap="StackGap.Large">
<dui-group justify="GroupJustify.SpaceBetween" align="GroupAlign.Center">
<h1 class="text-xl font-semibold">Destinations</h1>
<dui-button>
<dui-icon name="plus"/>
Add destination
</dui-button>
</dui-group>
<p class="text-sm text-muted-foreground">
Use a container to center and constrain your page, then Stack and Group handle the
vertical and horizontal rhythm of the content inside it.
</p>
</dui-stack>
</dui-container>API Reference
<dui-container>
The <dui-container> tag helper renders a <div> element that horizontally
centers its content (mx-auto), constrains it to Tailwind's responsive
container max-widths, and applies responsive horizontal padding. It has no
attributes of its own; it forwards any standard global HTML
attributes
(such as id or class) to the rendered element.