Media Query Bug

Bug Reports
1

Is it just me or is there something wrong with the media queries. MD works fine, going to LG seems to not work and the LG media query kicks in at XL.

In the CSS for MD and LG it shows this:

image
image1278×498 27.5 KB

At LG this should be showing

image
image1298×784 42.7 KB

But it’s not.

When you go up to XL it shows:

image
image1264×1056 59.4 KB

In summary a container stays at MD 720px width and doesn’t expand until XL where it’s 1140px. It’s not resizing to 900px for LG screen

There seems to be a problem with margins and paddings at LG as well.

2

I don’t think I see any issues here, In Bootstrap 5, the default container widths are:

SM >= 576px - 540px
MD >= 768px - 720px
LG >= 992px - 960px
XL >= 1200px - 1140px
XXL >= 1400px - 1320px

So for a normal .container, the 992px media query is the LG breakpoint, and 960px is the correct max-width there. Then at 1200px, the 1140px rule overrides it for XL. That part is standard Bootstrap.