Container: Blazor container component

Examples

Max width

MaxWidth picks the breakpoint the column stops growing at; MaxWidth.False removes the cap so you can set your own.

MaxWidth.Small: an article column, capped at the sm breakpoint (640px).

MaxWidth.Large (default): the usual page column, capped at 1024px.

MaxWidth.False plus your own max-w-xs.

website/Examples/Layout/ContainerMaxWidthExample.razor Source

Gutters

Gutters (on by default) adds 1rem of side padding; turn it off when the child brings its own.

Gutters on (default): 1rem of side padding keeps text off the screen edge.

Gutters="false": content runs flush to the edge, handy when the child brings its own padding.

website/Examples/Layout/ContainerGuttersExample.razor Source

API

<Container>

DaisyBlazor

Parameters

Gutters bool
= true
Adds horizontal padding (px-4) to the container; defaults to true.
MaxWidth MaxWidth
= MaxWidth.Large
Maximum width mapped to a max-w-screen-* class (e.g. Large to max-w-screen-lg); defaults to Large.
Class string
= null
Extra CSS classes merged onto the root container element.
Style string
= null
Inline CSS styles applied to the root container element.

Name	Type	Default	Description
Gutters	bool	true	Adds horizontal padding (px-4) to the container; defaults to true.
MaxWidth	MaxWidth	MaxWidth.Large	Maximum width mapped to a max-w-screen-* class (e.g. Large to max-w-screen-lg); defaults to Large.
Class	string	null	Extra CSS classes merged onto the root container element.
Style	string	null	Inline CSS styles applied to the root container element.

Content

ChildContent RenderFragment
Content rendered inside the centered container.

Name	Type	Description
ChildContent	RenderFragment	Content rendered inside the centered container.

From MudContainer

Container keeps MudContainer's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.