| Class | Properties |
|---|---|
| d-flex | display: flex; |
| d-inline-flex | display: inline-flex; |
Enabling Flexbox
With the display classes, you can turn any element into a flex container. Doing so will transform the child elements into flex items.
I'm a flexbox container.
I'm a flexbox container.
I'm an inline flexbox container.
I'm an inline flexbox container.
<MudPaper Class="d-flex pa-4"> I'm a flexbox container. </MudPaper> <MudPaper Class="d-flex pa-4"> I'm a flexbox container. </MudPaper> <MudPaper Class="d-inline-flex pa-4"> I'm an inline flexbox container. </MudPaper> <MudPaper Class="d-inline-flex pa-4"> I'm an inline flexbox container. </MudPaper>
Applying conditionally
Breakpoints
You can use the utility class to target media queries like responsive breakpoints.
For example, use d-md-flex to apply the d-flex utility at only medium screen sizes and above.
<div class="...d-md-flex"> ... </div>
To learn more, check out the documentation on Breakpoints and other modifiers you can use.