Merge pull request #20865 from twbs/v4-container-widths

v4: Grid adjustments

3 files changed, 14 insertions, 13 deletions

diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index 26ff36c41..5d37880c0 100644
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -64,11 +64,11 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
         <th></th>
         <th class="text-xs-center">
           Extra small<br>
-          <small>&lt;544px</small>
+          <small>&lt;576px</small>
         </th>
         <th class="text-xs-center">
           Small<br>
-          <small>&ge;544px</small>
+          <small>&ge;576px</small>
         </th>
         <th class="text-xs-center">
           Medium<br>
@@ -93,9 +93,9 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
       <tr>
         <th class="text-nowrap" scope="row">Container width</th>
         <td>None (auto)</td>
-        <td>576px</td>
+        <td>540px</td>
         <td>720px</td>
-        <td>940px</td>
+        <td>960px</td>
         <td>1140px</td>
       </tr>
       <tr>
@@ -112,7 +112,7 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
       </tr>
       <tr>
         <th class="text-nowrap" scope="row">Gutter width</th>
-        <td colspan="5">1.875rem / 30px (15px on each side of a column)</td>
+        <td colspan="5">30px (15px on each side of a column)</td>
       </tr>
       <tr>
         <th class="text-nowrap" scope="row">Nestable</th>
@@ -154,7 +154,7 @@ $grid-breakpoints: (
   // Extra small screen / phone
   xs: 0,
   // Small screen / phone
-  sm: 544px,
+  sm: 576px,
   // Medium screen / tablet
   md: 768px,
   // Large screen / desktop
@@ -164,9 +164,9 @@ $grid-breakpoints: (
 );
 
 $container-max-widths: (
-  sm: 576px,
+  sm: 540px,
   md: 720px,
-  lg: 940px,
+  lg: 960px,
   xl: 1140px
 );
 {% endhighlight %}
@@ -512,7 +512,7 @@ $grid-breakpoints: (
 $container-max-widths: (
   sm: 420px,
   md: 720px,
-  lg: 940px
+  lg: 960px
 );
 {% endhighlight %}
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 52bd0eb81..c7de511f6 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -125,7 +125,7 @@ $link-hover-decoration: underline !default;
 
 $grid-breakpoints: (
   xs: 0,
-  sm: 544px,
+  sm: 576px,
   md: 768px,
   lg: 992px,
   xl: 1200px
@@ -138,9 +138,9 @@ $grid-breakpoints: (
 // Define the maximum width of `.container` for different screen sizes.
 
 $container-max-widths: (
-  sm: 576px,
+  sm: 540px,
   md: 720px,
-  lg: 940px,
+  lg: 960px,
   xl: 1140px
 ) !default;
 @include _assert-ascending($container-max-widths, "$container-max-widths");
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index b381ba900..88cbd249a 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -17,7 +17,8 @@
 @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
   @each $breakpoint, $container-max-width in $max-widths {
     @include media-breakpoint-up($breakpoint, $breakpoints) {
-      max-width: $container-max-width;
+      width: $container-max-width;
+      max-width: 100%;
     }
   }
 }