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.
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.
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.
Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles.
Radzen Blazor for Visual Studio extension streamlines Blazor development within the Visual Studio environment. The Blazor extension you need to boost productivity!
Radzen Blazor Components, © 2018-2024 Radzen.
Source Code licensed under
MIT