Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Display

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

How it works

Specify the elements display property, the classes can be used with all breakpoints from xs to xl

The propertys

  • .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
d-block
d-inline
d-inline
Hide code example
Edit on TryMudBlazor
Copy Code
<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 a element based on the current viewport. The same brakepoint classes apply from the bottom up. That means .d-none apply 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
Hide code example
Edit on TryMudBlazor
Copy Code
<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 🗙