Radzen Blazor Components

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

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

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.

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

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

.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

Supercharge your Blazor development with 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. Write less code and get more done.

open_in_new Learn More
>Radzen Blazor Studio

Radzen Blazor Components, © 2018-2024 Radzen.
Source Code licensed under MIT

Demos Configuration

Premium Themes

  • Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark

Free Themes

  • Material
  • Material Dark
  • Standard
  • Standard Dark
  • Default
  • Dark
  • Humanistic
  • Humanistic Dark
  • Software
  • Software Dark
An error has occurred. This app may no longer respond until reloaded. Reload 🗙