Merge pull request #17362 from omeid/v4-container-mixin

Semantic grid: add make-container-breakpoint

scss/_grid.scss

@@ -4,13 +4,8 @@
 
 .container {
   @include make-container();
+  @include make-container-max-widths();
 
-  // For each breakpoint, define the maximum width of the container in a media query
-  @each $breakpoint, $container-max-width in $container-max-widths {
-    @include media-breakpoint-up($breakpoint) {
-      max-width: $container-max-width;
-    }
-  }
 }
 
 

scss/mixins/_grid.scss

@@ -10,6 +10,16 @@
   @include clearfix();
 }
 
+
+// For each breakpoint, define the maximum width of the container in a media query
+@mixin make-container-max-widths($max-widths: $container-max-widths) {
+  @each $breakpoint, $container-max-width in $max-widths {
+    @include media-breakpoint-up($breakpoint) {
+      max-width: $container-max-width;
+    }
+  }
+}
+
 @mixin make-row($gutter: $grid-gutter-width) {
   @if $enable-flex {
     display: flex;