Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update copy around breakpoint sizing #31382

Merged
merged 3 commits into from
Jul 31, 2020
Merged

Update copy around breakpoint sizing #31382

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2855917
Update copy around breakpoint sizing
mdo Jul 31, 2020
ff9feff
Update breakpoints.md
XhmikosR Jul 31, 2020
33a3c98
Further copy changes
mdo Jul 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 1 addition & 2 deletions site/content/docs/5.0/layout/breakpoints.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ Bootstrap includes six default breakpoints, sometimes referred to as _grid tiers
</tbody>
</table>

Each breakpoint size was chosen to be a multiple of 12 and to be representative of a subset of common device sizes and viewport dimensions. They don't specifically target every use case or device, but the provide ranges provide a strong and consistent foundation to build on for any nearly device.
Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don't specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.

These breakpoints are customizable via Sass—you'll find them in a Sass map in our `_variables.scss` stylesheet.

Expand Down Expand Up @@ -202,4 +202,3 @@ Which results in:
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
{{< /highlight >}}