Utilities
Spacing
To define spacing between components you have an option to use a fluent-builder pattern. This way you can combine multiple spacings at once.
The following example will set the margins for mobile(xs) and desktop(md) breakpoints:
<CardBody Margin="Margin.Is2.OnMobile.Is5.OnDesktop">
Note: The same rules can also be applied for paddings.
Display
Quickly and responsively toggle the display value of components and more with display utilities.
<Paragraph Display="Display.None.Block.OnFullHD">
hide on screens smaller than lg
</Paragraph>
ColumnSize
Similar to the spacing builder you can also define column sizes using the same pattern.
<Column ColumnSize="ColumnSize.Is4.OnTablet.Is3.OnWidescreen.Is12.OnMobile">
Breakpoints by frameworks
Blazorise | Bootstrap | Material | Bulma |
---|---|---|---|
Mobile | xs | xs | mobile |
Tablet | sm | sm | tablet |
Desktop | md | md | desktop |
Widescreen | lg | lg | widescreen |
FullHD | xl | xl | fullhd |