Display

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

This page covers display utility classes (rz-display-{value}) for controlling element visibility and layout behavior including none, block, inline, inline-block, flex, inline-flex, grid, and inline-grid, with responsive variants (rz-display-{breakpoint}-{value}) for different screen sizes.

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

All the tools in one place

Save Hours on Every Project

With Radzen Blazor subscription you get the full toolkit, including:

support

Dedicated support backed by proven expertise

palette

Premium themes and theme editor

widgets

Ready-to-use UI blocks

dashboard_customize

Complete app templates

format_shapes

Visual design-time-experience

Start Free See Subscription Plans

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