Display - MudBlazor

How it works

Specify the element's display property, the classes can be used with all breakpoints from xs to xl.

The properties

.d-{value} - for xs
.d-{breakpoint}-{value} - for sm, md, lg and xl

The value property is one of these

none
inline
inline-block

block
table
table-cell

table-row
flex
inline-flex

When setting a specific breakpoint for a display helper class, it will apply to all screen widths from the designation and up.

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

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