Blazorise Utilities
Simplify your component styling and layout management with Blazorise utility helpers.
Blazorise Utilities offer a set of helper methods and classes designed to streamline your front-end development. With a focus on flexibility and responsiveness, these utilities let you easily define spacing, flex behavior, overflow handling, and more, all through C# fluent builders that adapt to various breakpoints.
Whether you're fine-tuning the layout of a single component or building complex responsive interfaces, Blazorise Utilities help you maintain a clean and consistent design system.
How it works
Utilities are exposed through fluent builders like Margin, Display, Flex, and Border.
You can chain sizes, sides, and breakpoints to keep responsive layout rules close to the components that use them.
Utility pages
- Spacing - Margin and padding builders with breakpoints.
- Display - Responsive visibility and display modes.
- Column Size - Responsive column widths for grid columns.
- Flex - Direction, alignment, wrapping, and ordering helpers.
- Border - Border sizes, colors, and radius.
- Overflow - Scroll and clip behavior.
- Position - Relative and absolute placement helpers.
- Grid - Flexbox grid system and containers.
- CSS Grid - Two-dimensional layouts with grid utilities.
- Gutters - Horizontal and vertical spacing between columns.
- Object Fit - Image and media fitting.
- Sizing - Width and height builders with classes or styles.
Each utility page includes usage details and examples tailored to that helper.
Breakpoints by framework
Different CSS frameworks use their own naming conventions for responsive breakpoints. While the behavior (e.g., mobile, tablet, desktop) is conceptually similar across all frameworks, the specific identifiers can vary.
The table below shows how Blazorise maps these breakpoints across Bootstrap, Material, Bulma, Fluent, and AntDesign.
| Blazorise | Bootstrap | Material | Bulma | Fluent | AntDesign |
|---|---|---|---|---|---|
| Mobile | xs | xs | mobile | sm | xs |
| Tablet | sm | sm | tablet | md | sm |
| Desktop | md | md | desktop | lg | md |
| Widescreen | lg | lg | widescreen | xl | lg |
| Full HD | xl | xl | fullhd | xxl | xl |
In summary, while each framework uses slightly different names, their purpose is the same: to define responsive behavior across various screen sizes. Blazorise provides a unified Breakpoint abstraction layer, letting you use a consistent API regardless of the underlying CSS provider.