Radzen Blazor Components

API Reference About Radzen GitHub

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%.

Example
Edit Source

.rz-w-25

.rz-w-50

.rz-w-75

.rz-w-100

.rz-w-auto

Width keyword CSS classes link

There are width keyword values exposed as CSS classes such as fit-content, min-content, max-content, and stretch.

Example
Edit Source

This container has .rz-w-fit-content width class applied.

This container has .rz-w-min-content width class applied.

This container has .rz-w-max-content width class applied.

This container has .rz-w-stretch width class applied.

Width viewport CSS classes link

These are viewport width values exposed as CSS classes.

Example
Edit Source

.rz-vw-25

.rz-vw-50

.rz-vw-75

.rz-vw-100

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%.

Example
Edit Source

.rz-h-25

.rz-h-50

.rz-h-75

.rz-h-100

.rz-h-auto

Height viewport CSS classes link

These are viewport height values exposed as CSS classes.

Example
Edit Source

.rz-vh-25

.rz-vh-50

.rz-vh-75

.rz-vh-100

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.

Supercharge your Blazor development with Radzen

Whether you prefer a standalone environment or integration directly within Visual Studio, Radzen provides a powerful toolkit to increase development speed, reduce repetitive coding, and focus on building exceptional applications.

Pro

Radzen Blazor Studio

Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles.

Learn More

New

Radzen Blazor for Visual Studio

Radzen Blazor for Visual Studio extension streamlines Blazor development within the Visual Studio environment. The Blazor extension you need to boost productivity!

Download Learn More

Save $100 with promo code CHEERS2025