Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bootstrap v5: Migration docs - breaking change related to media-breakpoint-down() is not included #34219

Closed
petia182 opened this issue Jun 9, 2021 · 2 comments · Fixed by #34251

Comments

@petia182
Copy link

petia182 commented Jun 9, 2021

  • 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)

Codepen Example:
Bootstrap v4 - https://codepen.io/petia182/pen/qBrMBKo
Bootstrap v5 - https://codepen.io/petia182/pen/wvJEvLa

@alpadev
Copy link
Contributor

alpadev commented Jun 11, 2021

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

@petia182
Copy link
Author

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants