diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 802a9a1422..e35924337a 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.
@@ -61,23 +64,23 @@ See how aspects of the Bootstrap grid system work across multiple devices with a Extra small
- <34em / 480px + <544px Small
- ≥34em / 480px + ≥544px Medium
- ≥45em / 720px + ≥768px Large
- ≥62em / 992px + ≥992px Extra large
- ≥75em / 1200px + ≥1200px @@ -90,10 +93,10 @@ See how aspects of the Bootstrap grid system work across multiple devices with a Container width None (auto) - 34rem / 480px - 45rem / 720px - 60rem / 960px - 72.25rem / 1156px + 576px + 720px + 940px + 1140px Class prefix @@ -109,7 +112,7 @@ See how aspects of the Bootstrap grid system work across multiple devices with a Gutter width - 30px (15px on each side of a column) + 1.875rem / 30px (15px on each side of a column) Nestable @@ -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 diff --git a/scss/_variables.scss b/scss/_variables.scss index 60adc7735a..3d95879416 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -90,13 +90,13 @@ $grid-breakpoints: ( // Extra small screen / phone xs: 0, // Small screen / phone - sm: 34em, + sm: 544px, // Medium screen / tablet - md: 48em, + md: 768px, // Large screen / desktop - lg: 62em, + lg: 992px, // Extra large screen / wide desktop - xl: 75em + xl: 1200px ) !default; @@ -105,10 +105,10 @@ $grid-breakpoints: ( // Define the maximum width of `.container` for different screen sizes. $container-max-widths: ( - sm: 34rem, // 480 - md: 45rem, // 720 - lg: 60rem, // 960 - xl: 72.25rem // 1140 + sm: 576px, + md: 720px, + lg: 940px, + xl: 1140px ) !default; diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss index 7308f83b76..28d59095e3 100644 --- a/scss/bootstrap-grid.scss +++ b/scss/bootstrap-grid.scss @@ -8,41 +8,46 @@ // Variables // -// Grid system + +// Grid breakpoints // -// Define your custom responsive grid. +// Define the minimum and maximum dimensions at which your layout will change, +// adapting to different screen sizes, for use in media queries. + $grid-breakpoints: ( // Extra small screen / phone xs: 0, // Small screen / phone - sm: 34em, + sm: 544px, // Medium screen / tablet - md: 48em, + md: 768px, // Large screen / desktop - lg: 62em, + lg: 992px, // Extra large screen / wide desktop - xl: 75em + xl: 1200px ) !default; -// Number of columns in the grid. -$grid-columns: 12 !default; -// Padding between columns. Gets divided in half for the left and right. -$grid-gutter-width: 1.5rem !default; - - -// Container sizes +// Grid containers // // Define the maximum width of `.container` for different screen sizes. $container-max-widths: ( - sm: 34rem, // 480 - md: 45rem, // 720 - lg: 60rem, // 960 - xl: 72.25rem // 1140 + sm: 576px, + md: 720px, + lg: 940px, + xl: 1140px ) !default; +// Grid columns +// +// Set the number of columns and specify the width of the gutters. + +$grid-columns: 12 !default; +$grid-gutter-width: 1.875rem !default; // 30px + + // // Grid mixins // diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss index 790bb73433..1685e59f7e 100644 --- a/scss/mixins/_breakpoints.scss +++ b/scss/mixins/_breakpoints.scss @@ -2,7 +2,7 @@ // // Breakpoints are defined as a map of (name: minimum width), order from small to large: // -// (xs: 0, sm: 34rem, md: 45rem) +// (xs: 0, sm: 544px, md: 768px) // // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. @@ -10,7 +10,7 @@ // // >> breakpoint-next(sm) // md -// >> breakpoint-next(sm, $breakpoints: (xs: 0, sm: 34rem, md: 45rem)) +// >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px)) // md // >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) // md @@ -21,8 +21,8 @@ // Minimum breakpoint width. Null for the smallest (first) breakpoint. // -// >> breakpoint-min(sm, (xs: 0, sm: 34rem, md: 45rem)) -// 34rem +// >> breakpoint-min(sm, (xs: 0, sm: 544px, md: 768px)) +// 544px @function breakpoint-min($name, $breakpoints: $grid-breakpoints) { $min: map-get($breakpoints, $name); @return if($min != 0, $min, null); @@ -31,11 +31,11 @@ // Maximum breakpoint width. Null for the largest (last) breakpoint. // The maximum value is calculated as the minimum of the next one less 0.1. // -// >> breakpoint-max(sm, (xs: 0, sm: 34rem, md: 45rem)) -// 44.9rem +// >> breakpoint-max(sm, (xs: 0, sm: 544px, md: 768px)) +// 767px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { $next: breakpoint-next($name, $breakpoints); - @return if($next, breakpoint-min($next, $breakpoints) - 0.1, null); + @return if($next, breakpoint-min($next, $breakpoints) - 1px, null); } // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.