We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to define breakpoints

I'd like to define my own breakpoints to match Bootstrap. It seems no matter how I define it, it does not work:

private List<MediaBreakpoint> BreakPoints { get; set; } = new();

BreakPoints.Add(new MediaBreakpoint() { Breakpoint = "Small", MediaQuery = "576px" });

1 Reply

NV Navin Vinayagam Syncfusion Team January 11, 2023 04:45 PM UTC

Hi Jason,

Thanks for reaching out to us.

We understand that you are attempting to establish custom media breakpoints to align with Bootstrap’s breakpoints in your Blazor application.

From your shared code, we can find that you are defining a list of custom MediaBreakPoint for the SfMediaQuery component. The MediaQuery property configured is directly matched with the browser’s window size. Here is an example of the appropriate syntax for defining your MediaQuery list:

mediaQuery = new List<MediaBreakpoint>()


            new MediaBreakpoint() { Breakpoint = "Max400", MediaQuery = "(max-width: 400px)" },

            new MediaBreakpoint() { Breakpoint = "Min1200", MediaQuery = "(min-width: 1200px)" },

            new MediaBreakpoint() { Breakpoint = "Min900", MediaQuery = "(min-width: 900px)" }        



Let us know if you need further assistance; we would be happy to assist you.


Navin V

Attachment: SyncfusionBlazorMediaQuery_58d102a7.zip

Live Chat Icon For mobile
Up arrow icon