From eabed0edf84c61bb4095ce8f92f41e58552785b9 Mon Sep 17 00:00:00 2001
From: Gleb Mazovetskiy <glex.spb@gmail.com>
Date: Mon, 31 Aug 2015 01:23:43 +0100
Subject: 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 not the same as the comments:

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

Addresses #17070 and #17388.
---
 docs/layout/grid.md | 34 +++++++++++++++++++---------------
 1 file changed, 19 insertions(+), 15 deletions(-)

(limited to 'docs/layout')

diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index 802a9a142..e35924337 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>&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
-- 
cgit v1.2.3


From b7bdde3d4c35e95926a7fdb7b39f98dcd6dc6a32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20K=C3=A4ufl?= <twbs-bootstrap@c.michael-kaeufl.de>
Date: Sun, 27 Sep 2015 17:32:06 +0200
Subject: Filled leftover placeholder

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

(limited to 'docs/layout')

diff --git a/docs/layout/overview.md b/docs/layout/overview.md
index 0f2a09bf0..4fa972d28 100644
--- a/docs/layout/overview.md
+++ b/docs/layout/overview.md
@@ -51,7 +51,7 @@ Since Bootstrap is developed to be mobile first, we use a handful of [media quer
 Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
 
 {% highlight scss %}
-// Extra small devices (portrait phones, less than ???px)
+// Extra small devices (portrait phones, less than 34em)
 // No media query since this is the default in Bootstrap
 
 // Small devices (landscape phones, 34em and up)
-- 
cgit v1.2.3


From ade2ab13418b2c86aa47a767533e542dc6589aff Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@chrisrebert.com>
Date: Sun, 22 Nov 2015 20:53:34 -0800
Subject: Remove non-responsive text alignment classes

These can be replaced by their `.text-xs-*` parallels.
This also avoids any complications from interactions between the responsive and non-responsive classes.
(e.g. `<div class="text-left text-md-right">`)

Refs #18300
[skip sauce]
---
 docs/layout/grid.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'docs/layout')

diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index e35924337..6edbaf6b3 100644
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -62,23 +62,23 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
     <thead>
       <tr>
         <th></th>
-        <th class="text-center">
+        <th class="text-xs-center">
           Extra small<br>
           <small>&lt;544px</small>
         </th>
-        <th class="text-center">
+        <th class="text-xs-center">
           Small<br>
           <small>&ge;544px</small>
         </th>
-        <th class="text-center">
+        <th class="text-xs-center">
           Medium<br>
           <small>&ge;768px</small>
         </th>
-        <th class="text-center">
+        <th class="text-xs-center">
           Large<br>
           <small>&ge;992px</small>
         </th>
-        <th class="text-center">
+        <th class="text-xs-center">
           Extra large<br>
           <small>&ge;1200px</small>
         </th>
-- 
cgit v1.2.3