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