MudBlazor - Blazor Component Library

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

<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

<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>