You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Operating system and version (Windows, macOS, Android, iOS) - N/A
Browser and version (Chrome, Firefox, Safari, Microsoft Edge, Opera, Android Browser) - N/A
I noticed there is a breaking change, related to the media-breakpoint-down() mixin, which is not included in the Migration Documentation
In Bootstrap v4 the media-breakpoint-down() was triggered at the next larger breakpoint, but in Bootstrap v5 this is changed.
Example:
Bootstrap v4 - when using media-breakpoint-down(md) - the breakpoint is equal to @media (max-width: 991.98px) Bootstrap v5 - when using media-breakpoint-down(md) - the breakpoint is equal to @media (max-width: 767.98px)
The information used to be there 🙁 Looks like they got lost in the nether.
The media-breakpoint-down() uses the breakpoint itself instead of the next breakpoint. Use media-breakpoint-down(lg) instead of media-breakpoint-down(md) to target viewports smaller than the lg breakpoint.
The media-breakpoint-between() mixin's second parameter also uses the breakpoint itself instead of the next breakpoint. Use media-between(sm, lg) instead of media-breakpoint-between(sm, md) to target viewports between the sm and lg breakpoints.
PR that changed the behaviour: #29148
PR that removed the migration notes: #33834
I noticed there is a breaking change, related to the
media-breakpoint-down()
mixin, which is not included in the Migration DocumentationIn Bootstrap v4 the
media-breakpoint-down()
was triggered at the next larger breakpoint, but in Bootstrap v5 this is changed.Example:
Bootstrap v4 - when using
media-breakpoint-down(md)
- the breakpoint is equal to@media (max-width: 991.98px)
Bootstrap v5 - when usingmedia-breakpoint-down(md)
- the breakpoint is equal to@media (max-width: 767.98px)
Codepen Example:
Bootstrap v4 - https://codepen.io/petia182/pen/qBrMBKo
Bootstrap v5 - https://codepen.io/petia182/pen/wvJEvLa
The text was updated successfully, but these errors were encountered: