Radzen Blazor Components

Display

Display utility CSS classes can be used to control the display value of UI elements and components.

.rz-display-{value}, where {value} can be:

none for hiding an element

block to treat an element as a block box

inline to treat an element as an inline box

inline-block to have a block box surrounded by elements as if it were an inline box

flex to have a block box that arranges its content according to the flexbox model

inline-flex to have an inline box that arranges its content according to the flexbox model

grid to have a block box that arranges its content according to the grid model

inline-grid to have an inline box that arranges its content according to the grid model

Responsive display link

You can set a specific display value for different screen sizes by inserting the respective breakpoint abbreviation.

For example .rz-display-{breakpoint}-block, where {breakpoint} can be xs, sm, md, lg, xl, xx.

Learn more about Breakpoints.

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 🗙