Responsive containers (follow-up to #29095) (#29118)

* Follow-up to #29095

This PR fixes the responsive containers that were added in #29095, originally stubbed out in #25631. Apologies to @browner12 for getting that wrong.

Fixes #25631.

* update navbar as well because we cannot reset all containers uniformly

* Update navbars example to include container-xl example to ensure containers match

* rewrite responsive containers docs, add table of max-widths

* Update container docs
- Move table up to the intro
- Remove the container example because it's actually hella confusing
- Update and link to grid example as a demo instead

1 files changed, 9 insertions, 1 deletions

diff --git a/scss/_grid.scss b/scss/_grid.scss
index 5b8b8cb23..d36ee75d8 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -21,9 +21,17 @@
     }
 
     @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
-      .container-#{$breakpoint} {
+      %responsive-container-#{$breakpoint} {
         max-width: $container-max-width;
       }
+
+      @each $name, $width in $grid-breakpoints {
+        @if ($container-max-width > $width or $breakpoint == $name) {
+          .container#{breakpoint-infix($name, $grid-breakpoints)} {
+            @extend %responsive-container-#{$breakpoint};
+          }
+        }
+      }
     }
   }
 }