Breakpoints help you control your layout based on windows size.


MudBlazor use our own implementation of the orginal specification from Material design.

Device Code Type Range

Extra small

xs Small to large phone < 600px


sm Small to medium tablet 600px > < 960px


md Large tablet to laptop 960px > < 1280px


lg Desktop 1280px > < 1920px

Extra Large

xl HD and 4k 1920px > < 2560px

Extra Extra Large

xxl 4k+ and ultra-wide >= 2560px*

There is several components that utilizes the breakpoint system and can normaly be configured with a parameter.


Utilizes the screen resolution and a 12 point grid system for its layout. With the 5 breakpoints you can specify the layout order on different window sizes. Read more about MudBlazor's Grid component here, you will also find different examples and use cases.


Instead of layout order, you can determine what should be rendered or not, depending on the window size and applied breakpoint. Read more about MudBlazor's Hidden component here.


MudBlazor comes loaded with CSS utilities and are well documented under the feature section. Most of this CSS classes is also available with our breakpoints.

Copyright © 2020-2024 MudBlazor.

Powered by .NET 8.0.3

An unhandled error has occurred. Reload 🗙