This is a preview of Radzen's new Material 3 premium theme, available only to Radzen Professional or Enterprise subscribers.
Browse components with a free theme by selecting one from the dropdown above.
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
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 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.
Source Code licensed under
MIT
Accelerated, smarter, and cost-effective Blazor development
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.