Merge pull request #17403 from twbs/use-px-for-window-sizes

Change grid and container sizes to px

Author: mdo

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;544px</small>
         </th>
         <th class="text-center">
           Small<br>
-          <small>&ge;34em / 480px</small>
+          <small>&ge;544px</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>576px</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: 544px,
   // 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: 544px,
   // 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: 576px,
+  md: 720px,
+  lg: 940px,
+  xl: 1140px
 ) !default;
 
 

scss/bootstrap-grid.scss

@@ -8,41 +8,46 @@
 // Variables
 //
 
-// Grid system
+
+// Grid breakpoints
 //
-// Define your custom responsive grid.
+// Define the minimum and maximum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
 $grid-breakpoints: (
   // Extra small screen / phone
   xs: 0,
   // Small screen / phone
-  sm: 34em,
+  sm: 544px,
   // Medium screen / tablet
-  md: 48em,
+  md: 768px,
   // Large screen / desktop
-  lg: 62em,
+  lg: 992px,
   // Extra large screen / wide desktop
-  xl: 75em
+  xl: 1200px
 ) !default;
 
-// Number of columns in the grid.
-$grid-columns:               12 !default;
-
-// Padding between columns. Gets divided in half for the left and right.
-$grid-gutter-width:          1.5rem !default;
-
 
-// Container sizes
+// Grid containers
 //
 // 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: 576px,
+  md: 720px,
+  lg: 940px,
+  xl: 1140px
 ) !default;
 
 
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns:               12 !default;
+$grid-gutter-width:          1.875rem !default; // 30px
+
+
 //
 // Grid mixins
 //

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: 544px, 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: 544px, 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: 544px, md: 768px))
+//    544px
 @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: 544px, 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.