Display

The display classes help you set the display type or change it upon viewport.

Class Properties
d-block display: block;
d-flex display: flex;
d-inline display: inline;
d-inline-block display: inline-block;
d-inline-flex display: inline-flex;
d-none display: none;
d-table display: table;
d-table-cell display: table-cell;
d-table-row display: table-row;
Basic Usage
Block
d-block
d-block
<div>
    <div class="d-block pa-2 mud-theme-primary">d-block</div>
    <div class="d-block pa-2 mud-theme-dark">d-block</div>
</div>
Inline
d-inline
d-inline
<div>
    <div class="d-inline pa-2 mud-theme-primary">d-inline</div>
    <div class="d-inline pa-2 mud-theme-dark">d-inline</div>
</div>
Visibility

Display an element based on the current viewport. The same breakpoint classes apply from the bottom up. That means .d-none applies to all breakpoints, but .d-md-none will only apply to md and up.

Screen size Class
Hidden on all .d-none
Hidden only on xs .d-none .d-sm-flex
Hidden only on sm .d-sm-none .d-md-flex
Hidden only on md .d-md-none .d-lg-flex
Hidden only on lg .d-lg-none .d-xl-flex
Hidden only on xl .d-xl-none .d-xxl-flex
Hidden only on xxl .d-xxl-none
Visible on all .d-flex
Visible only on xs .d-flex .d-sm-none
Visible only on sm .d-none .d-sm-flex .d-md-none
Visible only on md .d-none .d-md-flex .d-lg-none
Visible only on lg .d-none .d-lg-flex .d-xl-none
Visible only on xl .d-none .d-xl-flex .d-xxl-none
Visible only on xxl .d-none .d-xxl-flex
<MudPaper Elevation="0" Class="pa-4" Style="height:100px; width:180px;">
    <div class="d-none d-sm-flex d-md-none mud-theme-primary rounded" style="height:100%; width:100%;"></div>
</MudPaper>
<MudPaper Elevation="0" Class="pa-4" Style="height:100px; width:180px;">
    <div class="d-lg-none mud-theme-secondary rounded" style="height:100%; width:100%;"></div>
</MudPaper>
<MudPaper Elevation="0" Class="pa-4" Style="height:100px; width:180px;">
    <div class="d-none d-lg-block mud-theme-tertiary rounded" style="height:100%; width:100%;"></div>
</MudPaper>

Copyright © 2020-2024 MudBlazor.

Powered by .NET 8.0.1

An unhandled error has occurred. Reload 🗙