How it works
Specify the elements display
property, the classes can be used with all breakpoints from xs
to xl
The propertys
.d-{value}
- forxs
.d-{breakpoint}-{value}
- forsm
,md
,lg
andxl
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-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 a element based on t he current viewport. The same brakepoint classes apply from the buttom 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 |
<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>