Sizing
Sizing utility CSS classes for width and height can be used to control the overall layout of elements.
Width percentage CSS classes link
You can use the predefined utility classes for width of 25%, 50%, 75%, 100%.
Width keyword CSS classes link
There are width keyword values exposed as CSS classes such as fit-content, min-content, max-content, and stretch.
Width viewport CSS classes link
These are viewport width values exposed as CSS classes.
Max-width and min-width CSS classes link
Use these CSS classes to set desired minimum and maximum width class="rz-min-w-100".
| Width value | Width CSS class | Min-width CSS class | Max-width CSS class |
|---|---|---|---|
| 25% | .rz-w-25 | .rz-min-w-25 | .rz-max-w-25 |
| 50% | .rz-w-50 | .rz-min-w-50 | .rz-max-w-50 |
| 75% | .rz-w-75 | .rz-min-w-75 | .rz-max-w-75 |
| 100% | .rz-w-100 | .rz-min-w-100 | .rz-max-w-100 |
Height percentage CSS classes link
You can use the predefined utility classes for height of 25%, 50%, 75%, 100%.
Height viewport CSS classes link
These are viewport height values exposed as CSS classes.
Max-height and min-height CSS classes link
Use these CSS classes to set desired minimum and maximum height class="rz-min-h-100".
| Height value | Height CSS class | Min-height CSS class | Max-height CSS class |
|---|---|---|---|
| 25% | .rz-h-25 | .rz-min-h-25 | .rz-max-h-25 |
| 50% | .rz-h-50 | .rz-min-h-50 | .rz-max-h-50 |
| 75% | .rz-h-75 | .rz-min-h-75 | .rz-max-h-75 |
| 100% | .rz-h-100 | .rz-min-h-100 | .rz-max-h-100 |
Responsive sizing link
You can set a specific size value for different screen sizes by inserting the respective breakpoint abbreviation.
For example .rz-w-{breakpoint}-100, where {breakpoint} can be xs, sm, md, lg, xl, xx.
Learn more about Breakpoints.
Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under
MIT