diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index 802a9a142291c53154a5f4efe3937944d98e9357..e35924337a2da93e49ec8e848090bf14b40b867b 100644
--- a/docs/layout/grid.md
+++ b/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><34em / 480px</small>
+ <small><544px</small>
</th>
<th class="text-center">
Small<br>
- <small>≥34em / 480px</small>
+ <small>≥544px</small>
</th>
<th class="text-center">
Medium<br>
- <small>≥45em / 720px</small>
+ <small>≥768px</small>
</th>
<th class="text-center">
Large<br>
- <small>≥62em / 992px</small>
+ <small>≥992px</small>
</th>
<th class="text-center">
Extra large<br>
- <small>≥75em / 1200px</small>
+ <small>≥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
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 60adc7735a3b382958088014f47aabf50067f360..3d95879416ee0a2e3e5d1382973691956d7c63d5 100644
--- a/scss/_variables.scss
+++ b/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;
diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index 7308f83b76639ae80009b158aa15d716fa4548b3..28d59095e3917131141428eb5d67057c9333ec83 100644
--- a/scss/bootstrap-grid.scss
+++ b/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
//
diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss
index 790bb73433ee9dd9ebba954c015537474f5a484f..1685e59f7eee42bcf44f587c4f6194501a64a2f9 100644
--- a/scss/mixins/_breakpoints.scss
+++ b/scss/mixins/_breakpoints.scss
@@ -2,7 +2,7 @@
//
// 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.
@@ -10,7 +10,7 @@
//
// >> 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.