Responsive breakpoints from em to px

Should close https://github.com/twbs/bootstrap/issues/18503

1 files changed, 17 insertions, 18 deletions

diff --git a/docs/layout/overview.md b/docs/layout/overview.md
index 4fa972d28..c8652cb7a 100644
--- a/docs/layout/overview.md
+++ b/docs/layout/overview.md
@@ -51,20 +51,20 @@ 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 34em)
+// Extra small devices (portrait phones, less than 544px)
 // No media query since this is the default in Bootstrap
 
-// Small devices (landscape phones, 34em and up)
-@media (min-width: 34em) { ... }
+// Small devices (landscape phones, 544px and up)
+@media (min-width: 544px) { ... }
 
-// Medium devices (tablets, 48em and up)
-@media (min-width: 48em) { ... }
+// Medium devices (tablets, 768px and up)
+@media (min-width: 768px) { ... }
 
-// Large devices (desktops, 62em and up)
-@media (min-width: 62em) { ... }
+// Large devices (desktops, 992px and up)
+@media (min-width: 992px) { ... }
 
-// Extra large devices (large desktops, 75em and up)
-@media (min-width: 75em) { ... }
+// Extra large devices (large desktops, 1200px and up)
+@media (min-width: 1200px) { ... }
 {% endhighlight %}
 
 Since we write our source CSS in Sass, all our media queries are available via Sass mixins:
@@ -87,17 +87,17 @@ Since we write our source CSS in Sass, all our media queries are available via S
 We occasionally use media queries that go in the other direction (the given screen size *or smaller*):
 
 {% highlight scss %}
-// Extra small devices (portrait phones, less than 34em)
-@media (max-width: 33.9em) { ... }
+// Extra small devices (portrait phones, less than 544px)
+@media (max-width: 543px) { ... }
 
-// Small devices (landscape phones, less than 48em)
-@media (max-width: 47.9em) { ... }
+// Small devices (landscape phones, less than 768px)
+@media (max-width: 767px) { ... }
 
-// Medium devices (tablets, less than 62em)
-@media (max-width: 61.9em) { ... }
+// Medium devices (tablets, less than 992px)
+@media (max-width: 991px) { ... }
 
-// Large devices (desktops, less than 75em)
-@media (max-width: 74.9em) { ... }
+// Large devices (desktops, less than 1200px)
+@media (max-width: 1199px) { ... }
 
 // Extra large devices (large desktops)
 // No media query since the extra-large breakpoint has no upper bound on its width
@@ -110,5 +110,4 @@ Once again, these media queries are also available via Sass mixins:
 @include media-breakpoint-down(sm) { ... }
 @include media-breakpoint-down(md) { ... }
 @include media-breakpoint-down(lg) { ... }
-@include media-breakpoint-down(xl) { ... }
 {% endhighlight %}