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.

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>

Similar to the spacing builder you can also define column sizes using the same pattern.

<Column ColumnSize="ColumnSize.Is4.OnTablet.Is3.OnWidescreen.Is12.OnMobile">

Blazorise	Bootstrap	Material	Bulma
Mobile	xs	xs	mobile
Tablet	sm	sm	tablet
Desktop	md	md	desktop
Widescreen	lg	lg	widescreen
FullHD	xl	xl	fullhd