@include media-breakpoint-down(md) results in breakpoint 991.98px instead of 768px!

[baszero]

• macOS 10.14.6 (18G6020)
• Google Chrome Version 85.0.4183.102

There seems to be a bug with Bootstrap 4.5.2 when using any of the @include media-breakpoint-down() functions.
The generated media query is always one breakpoint too high...

Any fix for this?

[baszero]

I know i should include a live demo on CodePen, however I can't reference Bootstrap-SCSS in CodePen, and the bug is in how CSS is generated.

here is a SCSS sample which results in the wrong breakpoints:

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-down($breakpoint) {
    .btn-#{$breakpoint}-sm {
      @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
    }
  }
}

So for breakpoint md, it generates a media query with max-width 991.98px instead of 768.

[MartijnCuppens]

Yes, this is the case in v4. We can't change that because that would be a breaking change. This is fixed in v5 with #29148.

The .98px rounding is caused by this, explained in our docs
(https://getbootstrap.com/docs/4.5/layout/overview/#responsive-breakpoints):

Note that since browsers do not currently support range context queries, we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.

Also read #25177 for more context