MudBlazor - Blazor Component Library

Class	Properties
align-baseline	align-items: baseline;
align-center	align-items: center;
align-end	align-items: flex-end;
align-start	align-items: flex-start;
align-stretch	align-items: stretch;

Basic Usage

Start

<MudPaper Class="d-flex align-start flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="py-8 d-flex flex-1 mud-theme-primary"/>
    <MudPaper Class="py-16 d-flex flex-1 mud-theme-primary"/>
    <MudPaper Class="py-12 d-flex flex-1 mud-theme-primary"/>
</MudPaper>

Center

<MudPaper Class="d-flex align-center flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="py-4 d-flex flex-1 mud-theme-primary"/>
    <MudPaper Class="py-16 d-flex flex-1 mud-theme-primary"/>
    <MudPaper Class="py-8 d-flex flex-1 mud-theme-primary"/>
</MudPaper>

End

<MudPaper Class="d-flex align-end flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="py-4 d-flex flex-1 mud-theme-primary"/>
    <MudPaper Class="py-16 d-flex flex-1 mud-theme-primary"/>
    <MudPaper Class="py-8 d-flex flex-1 mud-theme-primary"/>
</MudPaper>

Baseline

<MudPaper Class="d-flex align-baseline flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="pt-4 pb-12 d-flex flex-1 mud-theme-primary"><MudPaper Square="true" Elevation="0" Height="4px" Width="100%"/></MudPaper>
    <MudPaper Class="pt-16 pb-16 d-flex flex-1 mud-theme-primary"><MudPaper Square="true" Elevation="0" Height="4px" Width="100%"/></MudPaper>
    <MudPaper Class="pt-12 pb-4 d-flex flex-1 mud-theme-primary"><MudPaper Square="true" Elevation="0" Height="4px" Width="100%"/></MudPaper>
</MudPaper>

Stretch

<MudPaper Class="d-flex align-stretch flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="py-4 d-flex flex-1 mud-theme-primary"/>
    <MudPaper Class="py-16 d-flex flex-1 mud-theme-primary"/>
    <MudPaper Class="py-8 d-flex flex-1 mud-theme-primary"/>
</MudPaper>

Applying conditionally

Breakpoints

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

<div class="...align-md-end">
  ...
</div>

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

Align Items