From a43dc8872fb0e4a726424e1471972d94993539c5 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 9 Oct 2016 13:14:10 -0700
Subject: [PATCH 1/5] Move from max-width to width for containers, plus a
 max-width 100%

- Fixes issues between float and flex grid systems where container wouldn't fill the available width in Chrome & FF (but would in Safari)
- Fixes #20681
- Fixes #17621 (basically same issue as above issue)
---
 scss/mixins/_grid.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index b381ba900e..88cbd249a0 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%;
     }
   }
 }

From 0d27e12d1f2773fb672513fbd025ac3f07e47660 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 9 Oct 2016 13:17:50 -0700
Subject: [PATCH 2/5] Change sm grid breakpoint and container max-width

Makes it so that the container is no longer wider than the breakpoint used in the media query. This was never really an issue in rendering as the max-width handled it appropriately, but the mismatch was still incorrect.

Fixes #18054
---
 scss/_variables.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 52bd0eb817..9f68239782 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,7 +138,7 @@ $grid-breakpoints: (
 // Define the maximum width of `.container` for different screen sizes.
 
 $container-max-widths: (
-  sm: 576px,
+  sm: 540px,
   md: 720px,
   lg: 940px,
   xl: 1140px

From 0ba0f19003b8d118801fca94dcacc908fd4ddd70 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 9 Oct 2016 13:49:11 -0700
Subject: [PATCH 3/5] Change 940px breakpoint to 960px so that all widths are
 divisible by 12

Fixes #18510
---
 scss/_variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 9f68239782..c7de511f6b 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -140,7 +140,7 @@ $grid-breakpoints: (
 $container-max-widths: (
   sm: 540px,
   md: 720px,
-  lg: 940px,
+  lg: 960px,
   xl: 1140px
 ) !default;
 @include _assert-ascending($container-max-widths, "$container-max-widths");

From 1d0d0dac769cccaa3df62bafb7fb999c2a086adb Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 9 Oct 2016 13:51:05 -0700
Subject: [PATCH 4/5] Update grid docs to use new values for grid breakpoints
 and containers

---
 docs/layout/grid.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index 26ff36c410..0785093ea6 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>
@@ -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 %}
 

From 13cc81c50c473c78e96dc8f5c815782afd81d3b9 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 9 Oct 2016 13:51:59 -0700
Subject: [PATCH 5/5] Update grid docs mention of gutter width value (no more
 rems for awhile now)

---
 docs/layout/grid.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index 0785093ea6..5d37880c0f 100644
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -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>