Use current breakpoint instead of next breakpoint for `media-breakpoi…

…nt-down()` & `media-breakpoint-between()`

scss/_navbar.scss

@@ -145,8 +145,7 @@
 // where your navbar collapses.
 .navbar-expand {
   @each $breakpoint in map-keys($grid-breakpoints) {
-    $next: breakpoint-next($breakpoint, $grid-breakpoints);
-    $infix: breakpoint-infix($next, $grid-breakpoints);
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
     &#{$infix} {
       @include media-breakpoint-down($breakpoint) {
@@ -167,7 +166,7 @@
         }
       }
 
-      @include media-breakpoint-up($next) {
+      @include media-breakpoint-up($breakpoint) {
         flex-flow: row nowrap;
         justify-content: flex-start;
 

scss/_tables.scss

@@ -173,8 +173,7 @@
 
 .table-responsive {
   @each $breakpoint in map-keys($grid-breakpoints) {
-    $next: breakpoint-next($breakpoint, $grid-breakpoints);
-    $infix: breakpoint-infix($next, $grid-breakpoints);
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
     &#{$infix} {
       @include media-breakpoint-down($breakpoint) {

scss/mixins/_breakpoints.scss

@@ -31,18 +31,18 @@
   @return if($min != 0, $min, null);
 }
 
-// Maximum breakpoint width. Null for the largest (last) breakpoint.
-// The maximum value is calculated as the minimum of the next one less 0.02px
-// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+// Maximum breakpoint width.
+// The maximum value reduced by 0.02px to work around the limitations of
+// `min-` and `max-` prefixes and viewports with fractional widths.
 // See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
 // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
 // See https://bugs.webkit.org/show_bug.cgi?id=178261
 //
-//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    767.98px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
-  $next: breakpoint-next($name, $breakpoints);
-  @return if($next, breakpoint-min($next, $breakpoints) - .02, null);
+  $max: map-get($breakpoints, $name);
+  @return if($max and $max > 0, $max - .02, null);
 }
 
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
@@ -108,7 +108,7 @@
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
 @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
   $min: breakpoint-min($name, $breakpoints);
-  $max: breakpoint-max($name, $breakpoints);
+  $max: breakpoint-max(breakpoint-next($name, $breakpoints));
 
   @if $min != null and $max != null {
     @media (min-width: $min) and (max-width: $max) {

site/content/docs/4.3/layout/overview.md

@@ -187,9 +187,6 @@ We occasionally use media queries that go in the other direction (the given scre
 
 // Large devices (desktops, less than 1200px)
 @media (max-width: 1199.98px) { ... }
-
-// Extra large devices (large desktops)
-// No media query since the extra-large breakpoint has no upper bound on its width
 {{< /highlight >}}
 
 {{< callout info >}}
@@ -199,21 +196,21 @@ We occasionally use media queries that go in the other direction (the given scre
 Once again, these media queries are also available via Sass mixins:
 
 {{< highlight scss >}}
-@include media-breakpoint-down(xs) { ... }
+// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
 @include media-breakpoint-down(sm) { ... }
 @include media-breakpoint-down(md) { ... }
 @include media-breakpoint-down(lg) { ... }
-// No media query necessary for xl breakpoint as it has no upper bound on its width
+@include media-breakpoint-down(xl) { ... }
 
-// Example: Style from medium breakpoint and down
+// Example: Style from below the medium breakpoint
 @include media-breakpoint-down(md) {
   .custom-class {
     display: block;
   }
 }
 {{< /highlight >}}
 
-There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
+There are also media queries and mixins for targeting a single segment of screen sizes between the breakpoint and its next breakpoint.
 
 {{< highlight scss >}}
 // Extra small devices (portrait phones, less than 576px)

site/content/docs/4.3/migration.md

@@ -35,6 +35,9 @@ Changes to our source Sass files and compiled CSS.
 - Removed print styles and `$enable-print-styles` variable. Print display classes, however, have remained intact. [See #28339](https://github.com/twbs/bootstrap/pull/28339).
 - Dropped `color()`, `theme-color()` & `gray()` functions in favor of variables. [See #29083](https://github.com/twbs/bootstrap/pull/29083)
 - The `theme-color-level()` function is renamed to `color-level()` and now accepts any color you want instead of only `$theme-color` colors. [See #29083](https://github.com/twbs/bootstrap/pull/29083)
+- Breakpoint media queries changes [See #29148](https://github.com/twbs/bootstrap/pull/29148)
+  - The `media-breakpoint-down()` mixin now uses the breakpoint itself instead of the next breakpoint
+  - The `media-breakpoint-between()` mixin's second parameter also uses the breakpoint itself instead of the next breakpoint
 
 ## JavaScript
 

site/static/docs/4.3/assets/scss/_content.scss

@@ -26,7 +26,7 @@
     max-width: 100%;
     margin-bottom: 1.5rem;
 
-    @include media-breakpoint-down(md) {
+    @include media-breakpoint-down(lg) {
       display: block;
       overflow-x: auto;
 

site/static/docs/4.3/assets/scss/_navbar.scss

@@ -2,7 +2,7 @@
   min-height: 4rem;
   background-color: $bd-purple-bright;
 
-  @include media-breakpoint-down(md) {
+  @include media-breakpoint-down(lg) {
     .navbar-nav-scroll {
       width: 100%;
       height: 2.5rem;

site/static/docs/4.3/assets/scss/_subnav.scss

@@ -35,7 +35,7 @@
 .bd-search {
   position: relative; // To contain the Algolia search
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     width: 100%;
   }