MudBlazor

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Container

A simple component to center content. Choose between fluid or fixed.

See Container API for parameter documentation.

Fluid

You can set the max width with the MaxWidth enum.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudPaper Height="400px" Width="100%">
    <MudContainer MaxWidth="MaxWidth.Small">
        <MudPaper Height="400px" Width="100%" Square="true" Class="mud-theme-primary"></MudPaper>
    </MudContainer>
</MudPaper>

Fixed

With the Fixed property set to true the container will "snap" to the closest breakpoint.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudPaper Height="400px" Width="100%">
    <MudContainer Fixed="true">
        <MudPaper Height="400px" Width="100%" Square="true" Class="mud-theme-primary"></MudPaper>
    </MudContainer>
</MudPaper>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙