MudBlazor

Display

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

How it works

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

The properties

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

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
d-block
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>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙