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