diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 758854b8aa..8ed7671a98 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -57,11 +57,11 @@ 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 544px) +// Extra small devices (portrait phones, less than 576px) // No media query since this is the default in Bootstrap -// Small devices (landscape phones, 544px and up) -@media (min-width: 544px) { ... } +// Small devices (landscape phones, 576px and up) +@media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } @@ -93,8 +93,8 @@ 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 544px) -@media (max-width: 543px) { ... } +// Extra small devices (portrait phones, less than 576px) +@media (max-width: 575px) { ... } // Small devices (landscape phones, less than 768px) @media (max-width: 767px) { ... } @@ -121,11 +121,11 @@ Once again, these media queries are also available via Sass mixins: We also have media between the breakpoint's minimum and maximum widths for only the given screen size: {% highlight scss %} -// Extra small devices (portrait phones, less than 544px) -@media (max-width: 543px) { ... } +// Extra small devices (portrait phones, less than 576px) +@media (max-width: 575px) { ... } -// Small devices (landscape phones, 544px and up) -@media (min-width: 544px) and (max-width: 767px) { ... } +// Small devices (landscape phones, 576px and up) +@media (min-width: 576px) and (max-width: 767px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) and (max-width: 991px) { ... }