Radzen Blazor Components

Responsive Breakpoints

Responsive breakpoints are used to adjust the layout based on the screen size of the device in use. They allow a single layout to adapt to different screen sizes, from small mobile phone screens to large desktop monitors.

Breakpoints link

A breakpoint is a specific screen width at which the layout of an app or web page will change. For example, a breakpoint with min-width of 576px means that when the screen width is 576 pixels or more, the layout will change to efficiently use the screen real estate.

Here is a list of the predefined breakpoints and their abbreviations in Radzen Blazor Components, optimized for a wide range of devices.

xs - Extra Small ≥ 576px

sm - Small ≥ 768px

md - Medium ≥ 1024px

lg - Large ≥ 1280px

xl - Extra Large ≥ 1920px

xx - Extra Extra Large ≥ 2560px

Usage of Breakpoints link

Breakpoints in Layouts

Breakpoints are primarily used in layouts. For example, you can define the width of a RadzenColumn component by setting the respective Size property. E.g. SizeMD="6"

See Column demos to learn how to adjust your page layouts using breakpoints.

Breakpoints in Spacing

Breakpoints can also be used with the Spacing CSS utility classes for margin and padding. For example, you can define the margin of an element by setting the respective .rz-m-{breakpoint}-{size} CSS class. E.g. .rz-m-md-1

See Spacing demos to learn how to use breakpoints with margins and paddings.

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!

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