aboutsummaryrefslogtreecommitdiff
path: root/docs/layout
diff options
context:
space:
mode:
Diffstat (limited to 'docs/layout')
-rw-r--r--docs/layout/overview.md35
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 %}