Change grid and container sizes to px

Changes grid and container sizes to `px`, as the
viewport pixel size does not depend on the font size.

The actual em values were inconsistent with the docs,
while the docs were also inconsistent with the comments, namely:

* `sm` breakpoint was 34em which is 558px, not 480px.
  Changed to 480px, matching the docs and Bootstrap 3.
* `lg` max width was 60rem which is 960px, less gutter than `md`.
  Changed to 940px, same as Bootstrap 3.
* `xl` max width was 72.25rem which is 1140px not 1156px.
  Changed to 1140px matching the comment but not the docs.

All the values are now the same as they were in Bootstrap 3.
Addresses #17070 and #17388.

Author: glebm

docs/layout/grid.md

@@ -52,6 +52,9 @@ The above example creates three equal-width columns on small, medium, large, and
 
 ## Grid options
 
+While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s are used for grid breakpoints and container widths.
+This is because the viewport width is in pixels and does not change with the [font size](https://drafts.csswg.org/mediaqueries-3/#units).
+
 See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
 
 <div class="table-responsive">
@@ -61,23 +64,23 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
         <th></th>
         <th class="text-center">
           Extra small<br>
-          <small>&lt;34em / 480px</small>
+          <small>&lt;480px</small>
         </th>
         <th class="text-center">
           Small<br>
-          <small>&ge;34em / 480px</small>
+          <small>&ge;480px</small>
         </th>
         <th class="text-center">
           Medium<br>
-          <small>&ge;45em / 720px</small>
+          <small>&ge;768px</small>
         </th>
         <th class="text-center">
           Large<br>
-          <small>&ge;62em / 992px</small>
+          <small>&ge;992px</small>
         </th>
         <th class="text-center">
           Extra large<br>
-          <small>&ge;75em / 1200px</small>
+          <small>&ge;1200px</small>
         </th>
       </tr>
     </thead>
@@ -90,10 +93,10 @@ 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>34rem / 480px</td>
-        <td>45rem / 720px</td>
-        <td>60rem / 960px</td>
-        <td>72.25rem / 1156px</td>
+        <td>480px</td>
+        <td>720px</td>
+        <td>940px</td>
+        <td>1140px</td>
       </tr>
       <tr>
         <th class="text-nowrap" scope="row">Class prefix</th>
@@ -109,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">30px (15px on each side of a column)</td>
+        <td colspan="5">1.875rem / 30px (15px on each side of a column)</td>
       </tr>
       <tr>
         <th class="text-nowrap" scope="row">Nestable</th>
@@ -140,17 +143,18 @@ $grid-breakpoints: (
   // Extra small screen / phone
   xs: 0,
   // Small screen / phone
-  sm: 34em,    // 480px
+  sm: 480px,
   // Medium screen / tablet
-  md: 48em,    // 768px
+  md: 768px,
   // Large screen / desktop
-  lg: 62em,    // 992px
+  lg: 992px,
   // Extra large screen / wide desktop
-  xl: 75em     // 1200px
+  xl: 1200px
 ) !default;
 
+
 $grid-columns:      12;
-$grid-gutter-width: 1.5rem;
+$grid-gutter-width: 1.875rem;
 {% endhighlight %}
 
 ### Mixins

scss/_variables.scss

@@ -90,13 +90,13 @@ $grid-breakpoints: (
   // Extra small screen / phone
   xs: 0,
   // Small screen / phone
-  sm: 34em,
+  sm: 480px,
   // Medium screen / tablet
-  md: 48em,
+  md: 768px,
   // Large screen / desktop
-  lg: 62em,
+  lg: 992px,
   // Extra large screen / wide desktop
-  xl: 75em
+  xl: 1200px
 ) !default;
 
 
@@ -105,10 +105,10 @@ $grid-breakpoints: (
 // Define the maximum width of `.container` for different screen sizes.
 
 $container-max-widths: (
-  sm: 34rem,    // 480
-  md: 45rem,    // 720
-  lg: 60rem,    // 960
-  xl: 72.25rem  // 1140
+  sm: 480px,
+  md: 720px,
+  lg: 940px,
+  xl: 1140px
 ) !default;
 
 

scss/mixins/_breakpoints.scss

@@ -2,15 +2,15 @@
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
 //
-//    (xs: 0, sm: 34rem, md: 45rem)
+//    (xs: 0, sm: 480px, md: 768px)
 //
 // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
 
 // Name of the next breakpoint, or null for the last breakpoint.
 //
 //    >> breakpoint-next(sm)
 //    md
-//    >> breakpoint-next(sm, $breakpoints: (xs: 0, sm: 34rem, md: 45rem))
+//    >> breakpoint-next(sm, (xs: 0, sm: 480px, md: 768px))
 //    md
 //    >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
 //    md
@@ -21,8 +21,8 @@
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
-//    >> breakpoint-min(sm, (xs: 0, sm: 34rem, md: 45rem))
-//    34rem
+//    >> breakpoint-min(sm, (xs: 0, sm: 480px, md: 768px))
+//    480px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
   $min: map-get($breakpoints, $name);
   @return if($min != 0, $min, null);
@@ -31,11 +31,11 @@
 // Maximum breakpoint width. Null for the largest (last) breakpoint.
 // The maximum value is calculated as the minimum of the next one less 0.1.
 //
-//    >> breakpoint-max(sm, (xs: 0, sm: 34rem, md: 45rem))
-//    44.9rem
+//    >> breakpoint-max(sm, (xs: 0, sm: 480px, md: 768px))
+//    767px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
   $next: breakpoint-next($name, $breakpoints);
-  @return if($next, breakpoint-min($next, $breakpoints) - 0.1, null);
+  @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
 }
 
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.