MudBlazor - Blazor Component Library

Class	Properties
justify-center	justify-content: center;
justify-end	justify-content: flex-end;
justify-space-around	justify-content: space-around;
justify-space-between	justify-content: space-between;
justify-space-evenly	justify-content: space-evenly;
justify-start	justify-content: flex-start;

Basic Usage

Start

<MudPaper Class="d-flex justify-start flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
</MudPaper>

Center

<MudPaper Class="d-flex justify-center flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
</MudPaper>

End

<MudPaper Class="d-flex justify-end flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
</MudPaper>

Space between

<MudPaper Class="d-flex justify-space-between flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
</MudPaper>

Space around

<MudPaper Class="d-flex justify-space-around flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
</MudPaper>

Applying conditionally

Breakpoints

You can use the utility class to target media queries like responsive breakpoints. For example, use justify-md-center to apply the justify-center utility at only medium screen sizes and above.

<div class="...justify-md-center">
  ...
</div>

To learn more, check out the documentation on Breakpoints and other modifiers you can use.

Justify Content