mirror of https://github.com/twbs/bootstrap.git
Breakpoints update
- Rename $grid-breakpoints to $breakpoints - Rename -xxl to -2xl - Update docs to use new classes - Update breakpoints docs to add new language around updated breakpoint mixins and media queries, including no longer needing -.02px
This commit is contained in:
Mark Otto
parent
1311e9bbd4
commit
3d1dd436da
|
|
@ -34,16 +34,16 @@ $min-contrast-ratio: 4.5 !default;
|
|||
// Define the minimum dimensions at which your layout will change,
|
||||
// adapting to different screen sizes, for use in media queries.
|
||||
|
||||
// scss-docs-start grid-breakpoints
|
||||
$grid-breakpoints: (
|
||||
// scss-docs-start breakpoints
|
||||
$breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px,
|
||||
xxl: 1400px
|
||||
2xl: 1400px
|
||||
) !default;
|
||||
// scss-docs-end grid-breakpoints
|
||||
// scss-docs-end breakpoints
|
||||
|
||||
// Grid columns
|
||||
//
|
||||
|
|
@ -63,7 +63,7 @@ $container-max-widths: (
|
|||
md: 720px,
|
||||
lg: 960px,
|
||||
xl: 1140px,
|
||||
xxl: 1320px
|
||||
2xl: 1320px
|
||||
) !default;
|
||||
// scss-docs-end container-max-widths
|
||||
|
||||
|
|
|
|||
|
|
@ -97,9 +97,9 @@
|
|||
// We deliberately hardcode the `bs-` prefix because we check
|
||||
// this custom property in JS to determine Popper's positioning
|
||||
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
@each $breakpoint in map.keys($breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
||||
|
||||
.dropdown-menu#{$infix}-start {
|
||||
--bs-position: start;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
// Starts at zero
|
||||
// Used to ensure the min-width of the lowest breakpoint starts at 0.
|
||||
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
|
||||
@mixin _assert-starts-at-zero($map, $map-name: "$breakpoints") {
|
||||
@if length($map) > 0 {
|
||||
$values: map-values($map);
|
||||
$first-value: nth($values, 1);
|
||||
|
|
|
|||
|
|
@ -128,9 +128,9 @@
|
|||
//
|
||||
// Change the layout of list group items from vertical (default) to horizontal.
|
||||
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
@each $breakpoint in map.keys($breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
||||
|
||||
.list-group-horizontal#{$infix} {
|
||||
flex-direction: row;
|
||||
|
|
|
|||
|
|
@ -214,8 +214,8 @@
|
|||
}
|
||||
|
||||
// scss-docs-start modal-fullscreen-loop
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
@each $breakpoint in map.keys($breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
||||
$postfix: if($infix != "", $infix + "-down", "");
|
||||
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
|
|
|
|||
|
|
@ -203,9 +203,9 @@
|
|||
// Generate series of `.navbar-expand-*` responsive classes for configuring
|
||||
// where your navbar collapses.
|
||||
.navbar-expand {
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
@each $breakpoint in map.keys($breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $breakpoints);
|
||||
$infix: breakpoint-infix($next, $breakpoints);
|
||||
|
||||
// stylelint-disable-next-line scss/selector-no-union-class-name
|
||||
&#{$infix} {
|
||||
|
|
|
|||
|
|
@ -24,18 +24,18 @@
|
|||
// scss-docs-end offcanvas-css-vars
|
||||
}
|
||||
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
@each $breakpoint in map.keys($breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $breakpoints);
|
||||
$infix: breakpoint-infix($next, $breakpoints);
|
||||
|
||||
.offcanvas#{$infix} {
|
||||
@extend %offcanvas-css-vars;
|
||||
}
|
||||
}
|
||||
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
@each $breakpoint in map.keys($breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $breakpoints);
|
||||
$infix: breakpoint-infix($next, $breakpoints);
|
||||
|
||||
.offcanvas#{$infix} {
|
||||
@include media-breakpoint-down($next) {
|
||||
|
|
|
|||
|
|
@ -135,8 +135,7 @@
|
|||
--#{$prefix}border-radius-sm: #{$border-radius-sm};
|
||||
--#{$prefix}border-radius-lg: #{$border-radius-lg};
|
||||
--#{$prefix}border-radius-xl: #{$border-radius-xl};
|
||||
--#{$prefix}border-radius-xxl: #{$border-radius-xxl};
|
||||
--#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
|
||||
--#{$prefix}border-radius-2xl: #{$border-radius-2xl};
|
||||
--#{$prefix}border-radius-pill: #{$border-radius-pill};
|
||||
// scss-docs-end root-border-var
|
||||
|
||||
|
|
|
|||
|
|
@ -192,8 +192,8 @@
|
|||
// Generate series of `.table-responsive-*` classes for configuring the screen
|
||||
// size of where your table will overflow.
|
||||
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
@each $breakpoint in map.keys($breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
||||
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
.table-responsive#{$infix} {
|
||||
|
|
|
|||
|
|
@ -730,7 +730,7 @@ $utilities: map.merge(
|
|||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
5: var(--#{$prefix}border-radius-2xl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill)
|
||||
)
|
||||
|
|
@ -745,7 +745,7 @@ $utilities: map.merge(
|
|||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
5: var(--#{$prefix}border-radius-2xl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill)
|
||||
)
|
||||
|
|
@ -760,7 +760,7 @@ $utilities: map.merge(
|
|||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
5: var(--#{$prefix}border-radius-2xl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill)
|
||||
)
|
||||
|
|
@ -775,7 +775,7 @@ $utilities: map.merge(
|
|||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
5: var(--#{$prefix}border-radius-2xl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill)
|
||||
)
|
||||
|
|
@ -790,7 +790,7 @@ $utilities: map.merge(
|
|||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
5: var(--#{$prefix}border-radius-2xl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill)
|
||||
)
|
||||
|
|
|
|||
|
|
@ -191,18 +191,18 @@ $paragraph-margin-bottom: 1rem !default;
|
|||
// // adapting to different screen sizes, for use in media queries.
|
||||
|
||||
// // scss-docs-start grid-breakpoints
|
||||
// $grid-breakpoints: (
|
||||
// $breakpoints: (
|
||||
// xs: 0,
|
||||
// sm: 576px,
|
||||
// md: 768px,
|
||||
// lg: 992px,
|
||||
// xl: 1200px,
|
||||
// xxl: 1400px
|
||||
// 2xl: 1400px
|
||||
// ) !default;
|
||||
// // scss-docs-end grid-breakpoints
|
||||
|
||||
// @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
||||
// @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
|
||||
// @include _assert-ascending($breakpoints, "$breakpoints");
|
||||
// @include _assert-starts-at-zero($breakpoints, "$breakpoints");
|
||||
|
||||
|
||||
// // Grid containers
|
||||
|
|
@ -215,7 +215,7 @@ $paragraph-margin-bottom: 1rem !default;
|
|||
// md: 720px,
|
||||
// lg: 960px,
|
||||
// xl: 1140px,
|
||||
// xxl: 1320px
|
||||
// 2xl: 1320px
|
||||
// ) !default;
|
||||
// // scss-docs-end container-max-widths
|
||||
|
||||
|
|
@ -258,11 +258,11 @@ $border-radius: .375rem !default;
|
|||
$border-radius-sm: .25rem !default;
|
||||
$border-radius-lg: .5rem !default;
|
||||
$border-radius-xl: 1rem !default;
|
||||
$border-radius-xxl: 2rem !default;
|
||||
$border-radius-2xl: 2rem !default;
|
||||
$border-radius-pill: 50rem !default;
|
||||
// scss-docs-end border-radius-variables
|
||||
// fusv-disable
|
||||
$border-radius-2xl: $border-radius-xxl !default; // Deprecated in v5.3.0
|
||||
$border-radius-2xl: $border-radius-2xl !default; // Deprecated in v5.3.0
|
||||
// fusv-enable
|
||||
|
||||
// scss-docs-start box-shadow-variables
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@
|
|||
}
|
||||
|
||||
// Responsive sticky top and bottom
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
@each $breakpoint in map.keys($breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
||||
|
||||
.sticky#{$infix}-top {
|
||||
position: sticky;
|
||||
|
|
|
|||
|
|
@ -5,19 +5,19 @@
|
|||
//
|
||||
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
||||
//
|
||||
// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
|
||||
// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px)
|
||||
//
|
||||
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
|
||||
// The map defined in the `$breakpoints` global variable is used as the `$breakpoints` argument by default.
|
||||
|
||||
// Name of the next breakpoint, or null for the last breakpoint.
|
||||
//
|
||||
// >> breakpoint-next(sm)
|
||||
// md
|
||||
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
||||
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px))
|
||||
// md
|
||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
|
||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl 2xl))
|
||||
// md
|
||||
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
|
||||
@function breakpoint-next($name, $breakpoints: $breakpoints, $breakpoint-names: map.keys($breakpoints)) {
|
||||
$n: index($breakpoint-names, $name);
|
||||
@if not $n {
|
||||
@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
|
||||
|
|
@ -27,41 +27,36 @@
|
|||
|
||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
//
|
||||
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
||||
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px))
|
||||
// 576px
|
||||
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
||||
@function breakpoint-min($name, $breakpoints: $breakpoints) {
|
||||
$min: map.get($breakpoints, $name);
|
||||
@return if($min != 0, $min, null);
|
||||
}
|
||||
|
||||
// Maximum breakpoint width.
|
||||
// The maximum value is reduced by 0.02px to work around the limitations of
|
||||
// `min-` and `max-` prefixes and viewports with fractional widths.
|
||||
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
|
||||
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
|
||||
// See https://bugs.webkit.org/show_bug.cgi?id=178261
|
||||
//
|
||||
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
||||
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px))
|
||||
// 767.98px
|
||||
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
||||
@function breakpoint-max($name, $breakpoints: $breakpoints) {
|
||||
$max: map.get($breakpoints, $name);
|
||||
@return if($max and $max > 0, $max - .02, null);
|
||||
@return if($max and $max > 0, $max, null);
|
||||
}
|
||||
|
||||
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
|
||||
// Useful for making responsive utilities.
|
||||
//
|
||||
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
||||
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px))
|
||||
// "" (Returns a blank string)
|
||||
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
|
||||
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px))
|
||||
// "-sm"
|
||||
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
|
||||
@function breakpoint-infix($name, $breakpoints: $breakpoints) {
|
||||
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
|
||||
}
|
||||
|
||||
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and wider.
|
||||
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
|
||||
@mixin media-breakpoint-up($name, $breakpoints: $breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
@if $min {
|
||||
@media (width >= $min) {
|
||||
|
|
@ -74,7 +69,7 @@
|
|||
|
||||
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and narrower.
|
||||
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
|
||||
@mixin media-breakpoint-down($name, $breakpoints: $breakpoints) {
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
@if $max {
|
||||
@media (width < $max) {
|
||||
|
|
@ -87,12 +82,12 @@
|
|||
|
||||
// Media that spans multiple breakpoint widths.
|
||||
// Makes the @content apply between the min and max breakpoints
|
||||
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
|
||||
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $breakpoints) {
|
||||
$min: breakpoint-min($lower, $breakpoints);
|
||||
$max: breakpoint-max($upper, $breakpoints);
|
||||
|
||||
@if $min != null and $max != null {
|
||||
@media ($min <= width <= $max) {
|
||||
@media ($min <= width < $max) {
|
||||
@content;
|
||||
}
|
||||
} @else if $max == null {
|
||||
|
|
@ -109,13 +104,13 @@
|
|||
// Media between the breakpoint's minimum and maximum widths.
|
||||
// No minimum for the smallest breakpoint, and no maximum for the largest one.
|
||||
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
|
||||
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
|
||||
@mixin media-breakpoint-only($name, $breakpoints: $breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
$next: breakpoint-next($name, $breakpoints);
|
||||
$max: breakpoint-max($next, $breakpoints);
|
||||
|
||||
@if $min != null and $max != null {
|
||||
@media (min-width: $min) and (max-width: $max) {
|
||||
@media ($min <= width < $max) {
|
||||
@content;
|
||||
}
|
||||
} @else if $max == null {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
@extend .container-fluid;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||
%responsive-container-#{$breakpoint} {
|
||||
max-width: $container-max-width;
|
||||
}
|
||||
|
|
@ -39,9 +39,9 @@
|
|||
// Extend each breakpoint which is smaller or equal to the current breakpoint
|
||||
$extend-breakpoint: true;
|
||||
|
||||
@each $name, $width in $grid-breakpoints {
|
||||
@each $name, $width in $breakpoints {
|
||||
@if ($extend-breakpoint) {
|
||||
.container#{breakpoint-infix($name, $grid-breakpoints)} {
|
||||
.container#{breakpoint-infix($name, $breakpoints)} {
|
||||
@extend %responsive-container-#{$breakpoint};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
@layer layout {
|
||||
:root {
|
||||
@each $name, $value in $grid-breakpoints {
|
||||
@each $name, $value in $breakpoints {
|
||||
--#{$prefix}breakpoint-#{$name}: #{$value};
|
||||
}
|
||||
}
|
||||
|
|
@ -27,10 +27,10 @@
|
|||
gap: var(--#{$prefix}gap);
|
||||
}
|
||||
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
@each $breakpoint in map.keys($breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
||||
|
||||
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||
@if $grid-columns > 0 {
|
||||
@for $i from 1 through $grid-columns {
|
||||
.col#{$infix}-#{$i} {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ $utilities: ();
|
|||
)
|
||||
) !global;
|
||||
|
||||
$grid-breakpoints: (
|
||||
$breakpoints: (
|
||||
xs: 0,
|
||||
sm: 333px,
|
||||
md: 666px
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@
|
|||
|
||||
@layer utilities {
|
||||
// Loop over each breakpoint
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
@each $breakpoint in map.keys($breakpoints) {
|
||||
|
||||
// Generate media query if needed
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
||||
|
||||
// Loop over each utility property
|
||||
@each $key, $utility in $utilities {
|
||||
|
|
@ -27,10 +27,10 @@
|
|||
|
||||
// RFS rescaling
|
||||
@media (min-width: $rfs-mq-value) {
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
@each $breakpoint in map.keys($breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
||||
|
||||
@if (map.get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
|
||||
@if (map.get($breakpoints, $breakpoint) < $rfs-breakpoint) {
|
||||
// Loop over each utility property
|
||||
@each $key, $utility in $utilities {
|
||||
// The utility can be disabled with `false`, thus check if the utility is a map first
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export const title = 'Buttons'
|
|||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="col-lg-6 col-xxl-4 my-5 mx-auto">
|
||||
<div class="col-lg-6 col-2xl-4 my-5 mx-auto">
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-outline-secondary" type="button">Secondary action</button>
|
||||
<button class="btn btn-primary" type="button">Primary action</button>
|
||||
|
|
|
|||
|
|
@ -45,9 +45,9 @@ export const body_class = 'py-4'
|
|||
</div>
|
||||
|
||||
<div class="row mb-3 text-center">
|
||||
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
|
||||
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
|
||||
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
|
||||
<div class="col-2xl-4 themed-grid-col">.col-2xl-4</div>
|
||||
<div class="col-2xl-4 themed-grid-col">.col-2xl-4</div>
|
||||
<div class="col-2xl-4 themed-grid-col">.col-2xl-4</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-4">Three equal columns</h2>
|
||||
|
|
@ -180,6 +180,6 @@ export const body_class = 'py-4'
|
|||
<div class="container-md themed-container text-center">.container-md</div>
|
||||
<div class="container-lg themed-container text-center">.container-lg</div>
|
||||
<div class="container-xl themed-container text-center">.container-xl</div>
|
||||
<div class="container-xxl themed-container text-center">.container-xxl</div>
|
||||
<div class="container-2xl themed-container text-center">.container-2xl</div>
|
||||
<div class="container-fluid themed-container text-center">.container-fluid</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export const extra_css = ['heroes.css']
|
|||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="container col-xxl-8 px-4 py-5">
|
||||
<div class="container col-2xl-8 px-4 py-5">
|
||||
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
|
||||
<div class="col-10 col-sm-8 col-lg-6">
|
||||
<img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
|
||||
|
|
@ -58,7 +58,7 @@ export const extra_css = ['heroes.css']
|
|||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="container col-xl-10 col-xxl-8 px-4 py-5">
|
||||
<div class="container col-xl-10 col-2xl-8 px-4 py-5">
|
||||
<div class="row align-items-center g-lg-5 py-5">
|
||||
<div class="col-lg-7 text-center text-lg-start">
|
||||
<h1 class="display-4 fw-bold lh-1 text-body-emphasis mb-3">Vertically centered hero sign-up form</h1>
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@ export const extra_css = ['navbars.css']
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-xxl navbar-dark bg-dark" aria-label="Seventh navbar example">
|
||||
<nav class="navbar navbar-expand-2xl navbar-dark bg-dark" aria-label="Seventh navbar example">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Expand at xxl</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleXxl" aria-controls="navbarsExampleXxl" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const { addedIn, layout, title } = Astro.props
|
|||
---
|
||||
|
||||
<header class="navbar navbar-expand-lg bd-navbar sticky-top">
|
||||
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
||||
<nav class="container-2xl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
||||
{
|
||||
layout === 'docs' && (
|
||||
<div class="bd-navbar-toggle">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import Code from '@components/shortcodes/Code.astro'
|
|||
---
|
||||
|
||||
<div class="bd-masthead mb-3" id="content">
|
||||
<div class="container-xxl bd-gutter">
|
||||
<div class="container-2xl bd-gutter">
|
||||
<div class="col-md-8 mx-auto text-center">
|
||||
<a
|
||||
class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none"
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ interface Props {
|
|||
*/
|
||||
name?:
|
||||
| 'danger-async-methods'
|
||||
| 'info-mediaqueries-breakpoints'
|
||||
| 'info-npm-starter'
|
||||
| 'info-prefersreducedmotion'
|
||||
| 'info-sanitizer'
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
**Why subtract .02px?** Browsers don't currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), so we work around the limitations of [`min-` and `max-` prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.
|
||||
|
|
@ -669,7 +669,7 @@ Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu.
|
|||
|
||||
If you want to use responsive alignment, disable dynamic positioning by adding the `data-bs-display="static"` attribute and use the responsive variation classes.
|
||||
|
||||
To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end`.
|
||||
To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-2xl}-end`.
|
||||
|
||||
<Example code={`<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
|
||||
|
|
@ -682,7 +682,7 @@ To align **right** the dropdown menu with the given breakpoint or larger, add `.
|
|||
</ul>
|
||||
</div>`} />
|
||||
|
||||
To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-end` and `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start`.
|
||||
To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-end` and `.dropdown-menu{-sm|-md|-lg|-xl|-2xl}-start`.
|
||||
|
||||
<Example code={`<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ These work great with custom content as well.
|
|||
|
||||
## Horizontal
|
||||
|
||||
Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
|
||||
Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|2xl}` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
|
||||
|
||||
**ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item.
|
||||
|
||||
|
|
|
|||
|
|
@ -641,7 +641,7 @@ Another override is the option to pop up a modal that covers the user viewport,
|
|||
| `.modal-fullscreen-md-down` | `768px` |
|
||||
| `.modal-fullscreen-lg-down` | `992px` |
|
||||
| `.modal-fullscreen-xl-down` | `1200px` |
|
||||
| `.modal-fullscreen-xxl-down` | `1400px` |
|
||||
| `.modal-fullscreen-2xl-down` | `1400px` |
|
||||
</BsTable>
|
||||
|
||||
<div class="bd-example">
|
||||
|
|
@ -650,7 +650,7 @@ Another override is the option to pop up a modal that covers the user viewport,
|
|||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenMd">Full screen below md</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenLg">Full screen below lg</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXl">Full screen below xl</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXxl">Full screen below xxl</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen2xl">Full screen below 2xl</button>
|
||||
</div>
|
||||
|
||||
```html
|
||||
|
|
@ -745,11 +745,11 @@ Another override is the option to pop up a modal that covers the user viewport,
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="exampleModalFullscreenXxl" tabindex="-1" aria-labelledby="exampleModalFullscreenXxlLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-fullscreen-xxl-down">
|
||||
<div class="modal fade" id="exampleModalFullscreen2xl" tabindex="-1" aria-labelledby="exampleModalFullscreen2xlLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-fullscreen-2xl-down">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h1>
|
||||
<h1 class="modal-title fs-4" id="exampleModalFullscreen2xlLabel">Full screen below 2xl</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import { getConfig } from '@libs/config'
|
|||
|
||||
Here's what you need to know before getting started with the navbar:
|
||||
|
||||
- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` for responsive collapsing and [color scheme](#color-schemes) classes.
|
||||
- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl|-2xl}` for responsive collapsing and [color scheme](#color-schemes) classes.
|
||||
- Navbars and their contents are fluid by default. Change the [container](#containers) to limit their horizontal width in different ways.
|
||||
- Use our [spacing]([[docsref:/utilities/spacing]]) and [flex]([[docsref:/utilities/flex]]) utility classes for controlling spacing and alignment within navbars.
|
||||
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
|
||||
|
|
@ -509,7 +509,7 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-hei
|
|||
|
||||
## Responsive behaviors
|
||||
|
||||
Navbars can use `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` classes to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
|
||||
Navbars can use `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl|-2xl}` classes to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
|
||||
|
||||
For navbars that never collapse, add the `.navbar-expand` class on the navbar. For navbars that always collapse, don't add any `.navbar-expand` class.
|
||||
|
||||
|
|
|
|||
|
|
@ -170,7 +170,7 @@ Responsive offcanvas classes are available across for each breakpoint.
|
|||
- `.offcanvas-md`
|
||||
- `.offcanvas-lg`
|
||||
- `.offcanvas-xl`
|
||||
- `.offcanvas-xxl`
|
||||
- `.offcanvas-2xl`
|
||||
|
||||
## Placement
|
||||
|
||||
|
|
|
|||
|
|
@ -648,7 +648,7 @@ You can also put the `<caption>` on the top of the table with `.caption-top`.
|
|||
|
||||
## Responsive tables
|
||||
|
||||
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-xxl}`.
|
||||
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-2xl}`.
|
||||
|
||||
<Callout type="warning">
|
||||
##### Vertical clipping/truncation
|
||||
|
|
@ -729,7 +729,7 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
|
|||
|
||||
### Breakpoint specific
|
||||
|
||||
Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
|
||||
Use `.table-responsive{-sm|-md|-lg|-xl|-2xl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
|
||||
|
||||
**These tables may appear broken until their responsive styles apply at specific viewport widths.**
|
||||
|
||||
|
|
|
|||
|
|
@ -24,11 +24,11 @@ Here are two examples of how we loop over the `$theme-colors` map to generate mo
|
|||
|
||||
## Responsive
|
||||
|
||||
These Sass loops aren't limited to color maps, either. You can also generate responsive variations of your components. Take for example our responsive alignment of the dropdowns where we mix an `@each` loop for the `$grid-breakpoints` Sass map with a media query include.
|
||||
These Sass loops aren't limited to color maps, either. You can also generate responsive variations of your components. Take for example our responsive alignment of the dropdowns where we mix an `@each` loop for the `$breakpoints` Sass map with a media query include.
|
||||
|
||||
<ScssDocs name="responsive-breakpoints" file="scss/_dropdown.scss" />
|
||||
|
||||
Should you modify your `$grid-breakpoints`, your changes will apply to all the loops iterating over that map.
|
||||
Should you modify your `$breakpoints`, your changes will apply to all the loops iterating over that map.
|
||||
|
||||
<ScssDocs name="grid-breakpoints" file="scss/_variables.scss" />
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ Responsive variations also exist for `.sticky-top` utility.
|
|||
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
|
||||
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
|
||||
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>
|
||||
<div class="sticky-xxl-top">Stick to the top on viewports sized XXL (extra-extra-large) or wider</div>
|
||||
<div class="sticky-2xl-top">Stick to the top on viewports sized 2xl (extra-extra-large) or wider</div>
|
||||
```
|
||||
|
||||
## Sticky bottom
|
||||
|
|
@ -57,5 +57,5 @@ Responsive variations also exist for `.sticky-bottom` utility.
|
|||
<div class="sticky-md-bottom">Stick to the bottom on viewports sized MD (medium) or wider</div>
|
||||
<div class="sticky-lg-bottom">Stick to the bottom on viewports sized LG (large) or wider</div>
|
||||
<div class="sticky-xl-bottom">Stick to the bottom on viewports sized XL (extra-large) or wider</div>
|
||||
<div class="sticky-xxl-bottom">Stick to the bottom on viewports sized XXL (extra-extra-large) or wider</div>
|
||||
<div class="sticky-2xl-bottom">Stick to the bottom on viewports sized 2xl (extra-extra-large) or wider</div>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ toc: true
|
|||
|
||||
- **Breakpoints are the building blocks of responsive design.** Use them to control when your layout can be adapted at a particular viewport or device size.
|
||||
|
||||
- **Use media queries to architect your CSS by breakpoint.** Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters. We most commonly use `min-width` in our media queries.
|
||||
- **Use media queries to architect your CSS by breakpoint.** Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters. We most commonly use `width` in our media queries.
|
||||
|
||||
- **Mobile first, responsive design is the goal.** Bootstrap's CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for your visitors.
|
||||
|
||||
|
|
@ -25,39 +25,57 @@ Bootstrap includes six default breakpoints, sometimes referred to as _grid tiers
|
|||
| Medium | `md` | ≥768px |
|
||||
| Large | `lg` | ≥992px |
|
||||
| Extra large | `xl` | ≥1200px |
|
||||
| Extra extra large | `xxl` | ≥1400px |
|
||||
| Extra extra large | `2xl` | ≥1400px |
|
||||
</BsTable>
|
||||
|
||||
|
||||
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.
|
||||
|
||||
<ScssDocs name="grid-breakpoints" file="scss/_variables.scss" />
|
||||
<ScssDocs name="breakpoints" file="scss/_config.scss" />
|
||||
|
||||
For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]([[docsref:/layout/grid#sass]]).
|
||||
|
||||
## Media queries
|
||||
|
||||
Since Bootstrap is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
|
||||
As Bootstrap is developed to be mobile first, we use range [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These media queries are generated and available to use as Sass mixins.
|
||||
|
||||
### Min-width
|
||||
It's worth noting that range media query syntax can be flexible. The following media queries all yield the same result.
|
||||
|
||||
Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
|
||||
```scss
|
||||
// This range media query…
|
||||
@media (width >= 1400px) {
|
||||
// ...
|
||||
}
|
||||
|
||||
// …and this one as well…
|
||||
@media (1400px <= width) {
|
||||
//...
|
||||
}
|
||||
|
||||
// …are the same as this
|
||||
@media (min-width: 1400px) {
|
||||
//...
|
||||
}
|
||||
```
|
||||
|
||||
### Minimum viewport width
|
||||
|
||||
Bootstrap primarily uses media queries that target a specific minimum `width`, or breakpoint, to start applying styles. When used, these styles apply to the breakpoint passed as an argument, as well as every breakpoint larger than that. So for example, using a `md` breakpoint would target all viewports that are 768px or larger (`lg`, `xl`, and `2xl`).
|
||||
|
||||
```scss
|
||||
// Source mixins
|
||||
|
||||
// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
|
||||
// No media query necessary for xs breakpoint as it's effectively `@media (width > 0) { ... }`
|
||||
@include media-breakpoint-up(sm) { ... }
|
||||
@include media-breakpoint-up(md) { ... }
|
||||
@include media-breakpoint-up(lg) { ... }
|
||||
@include media-breakpoint-up(xl) { ... }
|
||||
@include media-breakpoint-up(xxl) { ... }
|
||||
@include media-breakpoint-up(2xl) { ... }
|
||||
|
||||
// Usage
|
||||
|
||||
// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
|
||||
// Example: Hide starting at `width > 0`, and then show at the `sm` breakpoint
|
||||
.custom-class {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -75,32 +93,32 @@ These Sass mixins translate in our compiled CSS using the values declared in our
|
|||
// No media query for `xs` since this is the default in Bootstrap
|
||||
|
||||
// Small devices (landscape phones, 576px and up)
|
||||
@media (min-width: 576px) { ... }
|
||||
@media (width >= 576px) { ... }
|
||||
|
||||
// Medium devices (tablets, 768px and up)
|
||||
@media (min-width: 768px) { ... }
|
||||
@media (width >= 768px) { ... }
|
||||
|
||||
// Large devices (desktops, 992px and up)
|
||||
@media (min-width: 992px) { ... }
|
||||
@media (width >= 992px) { ... }
|
||||
|
||||
// X-Large devices (large desktops, 1200px and up)
|
||||
@media (min-width: 1200px) { ... }
|
||||
@media (width >= 1200px) { ... }
|
||||
|
||||
// XX-Large devices (larger desktops, 1400px and up)
|
||||
@media (min-width: 1400px) { ... }
|
||||
@media (width >= 1400px) { ... }
|
||||
```
|
||||
|
||||
### Max-width
|
||||
### Maximum viewport width
|
||||
|
||||
We occasionally use media queries that go in the other direction (the given screen size _or smaller_):
|
||||
|
||||
```scss
|
||||
// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
|
||||
// No media query necessary for xs breakpoint as it's effectively `@media (width < 0) { ... }`
|
||||
@include media-breakpoint-down(sm) { ... }
|
||||
@include media-breakpoint-down(md) { ... }
|
||||
@include media-breakpoint-down(lg) { ... }
|
||||
@include media-breakpoint-down(xl) { ... }
|
||||
@include media-breakpoint-down(xxl) { ... }
|
||||
@include media-breakpoint-down(2xl) { ... }
|
||||
|
||||
// Example: Style from medium breakpoint and down
|
||||
@include media-breakpoint-down(md) {
|
||||
|
|
@ -117,23 +135,21 @@ These mixins take those declared breakpoints, subtract `.02px` from them, and us
|
|||
// ... { ... }
|
||||
|
||||
// `sm` applies to x-small devices (portrait phones, less than 576px)
|
||||
@media (max-width: 575.98px) { ... }
|
||||
@media (width < 576px) { ... }
|
||||
|
||||
// `md` applies to small devices (landscape phones, less than 768px)
|
||||
@media (max-width: 767.98px) { ... }
|
||||
@media (width < 768px) { ... }
|
||||
|
||||
// `lg` applies to medium devices (tablets, less than 992px)
|
||||
@media (max-width: 991.98px) { ... }
|
||||
@media (width < 992px) { ... }
|
||||
|
||||
// `xl` applies to large devices (desktops, less than 1200px)
|
||||
@media (max-width: 1199.98px) { ... }
|
||||
@media (width < 1200px) { ... }
|
||||
|
||||
// `xxl` applies to x-large devices (large desktops, less than 1400px)
|
||||
@media (max-width: 1399.98px) { ... }
|
||||
// `2xl` applies to x-large devices (large desktops, less than 1400px)
|
||||
@media (width < 1400px) { ... }
|
||||
```
|
||||
|
||||
<Callout name="info-mediaqueries-breakpoints" type="warning" />
|
||||
|
||||
### Single breakpoint
|
||||
|
||||
There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
|
||||
|
|
@ -144,18 +160,24 @@ There are also media queries and mixins for targeting a single segment of screen
|
|||
@include media-breakpoint-only(md) { ... }
|
||||
@include media-breakpoint-only(lg) { ... }
|
||||
@include media-breakpoint-only(xl) { ... }
|
||||
@include media-breakpoint-only(xxl) { ... }
|
||||
@include media-breakpoint-only(2xl) { ... }
|
||||
```
|
||||
|
||||
For example the `@include media-breakpoint-only(md) { ... }` will result in :
|
||||
For example, targeting only the medium breakpoint like so:
|
||||
|
||||
```scss
|
||||
@media (min-width: 768px) and (max-width: 991.98px) { ... }
|
||||
@include media-breakpoint-only(md) { ... }
|
||||
```
|
||||
|
||||
Results in:
|
||||
|
||||
```scss
|
||||
@media (768px <= width < 992px) { ... }
|
||||
```
|
||||
|
||||
### Between breakpoints
|
||||
|
||||
Similarly, media queries may span multiple breakpoint widths:
|
||||
Similarly, media queries may span multiple breakpoint widths. These media query ranges start as greater than or equal to the first breakpoint, and up to but not including the second.
|
||||
|
||||
```scss
|
||||
@include media-breakpoint-between(md, xl) { ... }
|
||||
|
|
@ -164,7 +186,5 @@ Similarly, media queries may span multiple breakpoint widths:
|
|||
Which results in:
|
||||
|
||||
```scss
|
||||
// Example
|
||||
// Apply styles starting from medium devices and up to extra large devices
|
||||
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
|
||||
@media (768px <= width < 1200px) { ... }
|
||||
```
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ See them in action and compare them in our [Grid example]([[docsref:/examples/gr
|
|||
| `.container-md` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 720px | 960px | 1140px | 1320px |
|
||||
| `.container-lg` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 960px | 1140px | 1320px |
|
||||
| `.container-xl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1140px | 1320px |
|
||||
| `.container-xxl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1320px |
|
||||
| `.container-2xl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1320px |
|
||||
| `.container-fluid` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> |
|
||||
</BsTable>
|
||||
|
||||
|
|
@ -42,14 +42,14 @@ Our default `.container` class is a responsive, fixed-width container, meaning i
|
|||
|
||||
## Responsive containers
|
||||
|
||||
Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `.container-sm` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `xxl`.
|
||||
Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `.container-sm` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `2xl`.
|
||||
|
||||
```html
|
||||
<div class="container-sm">100% wide until small breakpoint</div>
|
||||
<div class="container-md">100% wide until medium breakpoint</div>
|
||||
<div class="container-lg">100% wide until large breakpoint</div>
|
||||
<div class="container-xl">100% wide until extra large breakpoint</div>
|
||||
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
|
||||
<div class="container-2xl">100% wide until extra extra large breakpoint</div>
|
||||
```
|
||||
|
||||
## Fluid containers
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ The above example creates three equal-width columns across all devices and viewp
|
|||
|
||||
Breaking it down, here's how the grid system comes together:
|
||||
|
||||
- **Our grid supports [six responsive breakpoints]([[docsref:/layout/breakpoints]]).** Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it (e.g., `.col-sm-4` applies to `sm`, `md`, `lg`, `xl`, and `xxl`). This means you can control container and column sizing and behavior by each breakpoint.
|
||||
- **Our grid supports [six responsive breakpoints]([[docsref:/layout/breakpoints]]).** Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it (e.g., `.col-sm-4` applies to `sm`, `md`, `lg`, `xl`, and `2xl`). This means you can control container and column sizing and behavior by each breakpoint.
|
||||
|
||||
- **Containers center and horizontally pad your content.** Use `.container` for a responsive pixel width, `.container-fluid` for `width: 100%` across all viewports and devices, or a responsive container (e.g., `.container-md`) for a combination of fluid and pixel widths.
|
||||
|
||||
|
|
@ -55,7 +55,7 @@ Bootstrap's grid system can adapt across all six default breakpoints, and any br
|
|||
- Medium (md)
|
||||
- Large (lg)
|
||||
- Extra large (xl)
|
||||
- Extra extra large (xxl)
|
||||
- Extra extra large (2xl)
|
||||
|
||||
As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here's how the grid changes across these breakpoints:
|
||||
|
||||
|
|
@ -85,7 +85,7 @@ As noted above, each of these breakpoints have their own container, unique class
|
|||
<span class="fw-normal">≥1200px</span>
|
||||
</th>
|
||||
<th scope="col">
|
||||
xxl<br/>
|
||||
2xl<br/>
|
||||
<span class="fw-normal">≥1400px</span>
|
||||
</th>
|
||||
</tr>
|
||||
|
|
@ -107,7 +107,7 @@ As noted above, each of these breakpoints have their own container, unique class
|
|||
<td><code>.col-md-</code></td>
|
||||
<td><code>.col-lg-</code></td>
|
||||
<td><code>.col-xl-</code></td>
|
||||
<td><code>.col-xxl-</code></td>
|
||||
<td><code>.col-2xl-</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row"># of columns</th>
|
||||
|
|
@ -139,7 +139,7 @@ Utilize breakpoint-specific column classes for easy column sizing without an exp
|
|||
|
||||
### Equal-width
|
||||
|
||||
For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xxl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
|
||||
For example, here are two grid layouts that apply to every device and viewport, from `xs` to `2xl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
|
||||
|
||||
<Example class="bd-example-row" code={`<div class="container text-center">
|
||||
<div class="row">
|
||||
|
|
@ -478,10 +478,10 @@ $grid-row-columns: 6 !default;
|
|||
|
||||
### Grid tiers
|
||||
|
||||
Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this:
|
||||
Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you'd update the `$breakpoints` and `$container-max-widths` to something like this:
|
||||
|
||||
```scss
|
||||
$grid-breakpoints: (
|
||||
$breakpoints: (
|
||||
xs: 0,
|
||||
sm: 480px,
|
||||
md: 768px,
|
||||
|
|
|
|||
|
|
@ -295,7 +295,7 @@ Your custom Bootstrap CSS builds should now look something like this with a sepa
|
|||
|
||||
- **Introduced new `$enable-container-classes` option. —** Now when opting into the experimental CSS Grid layout, `.container-*` classes will still be compiled, unless this option is set to `false`. Containers also now keep their gutter values.
|
||||
|
||||
- **Offcanvas component now has [responsive variations]([[docsref:/components/offcanvas#responsive]]).** The original `.offcanvas` class remains unchanged—it hides content across all viewports. To make it responsive, change that `.offcanvas` class to any `.offcanvas-{sm|md|lg|xl|xxl}` class.
|
||||
- **Offcanvas component now has [responsive variations]([[docsref:/components/offcanvas#responsive]]).** The original `.offcanvas` class remains unchanged—it hides content across all viewports. To make it responsive, change that `.offcanvas` class to any `.offcanvas-{sm|md|lg|xl|2xl}` class.
|
||||
|
||||
- **Thicker table dividers are now opt-in. —** We've removed the thicker and more difficult to override border between table groups and moved it to an optional class you can apply, `.table-group-divider`. [See the table docs for an example.]([[docsref:/content/tables#table-group-dividers]])
|
||||
|
||||
|
|
@ -421,7 +421,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
|
|||
|
||||
## Grid updates
|
||||
|
||||
- **New breakpoint!** Added new `xxl` breakpoint for `1400px` and up. No changes to all other breakpoints.
|
||||
- **New breakpoint!** Added new `2xl` breakpoint for `1400px` and up. No changes to all other breakpoints.
|
||||
|
||||
- **Improved gutters.** Gutters are now set in rems, and are narrower than v4 (`1.5rem`, or about `24px`, down from `30px`). This aligns our grid system's gutters with our spacing utilities.
|
||||
- Added new [gutter class]([[docsref:/layout/gutters]]) (`.g-*`, `.gx-*`, and `.gy-*`) to control horizontal/vertical gutters, horizontal gutters, and vertical gutters.
|
||||
|
|
|
|||
|
|
@ -312,11 +312,11 @@ Output:
|
|||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
.opacity-xxl-0 { opacity: 0; }
|
||||
.opacity-xxl-25 { opacity: .25; }
|
||||
.opacity-xxl-50 { opacity: .5; }
|
||||
.opacity-xxl-75 { opacity: .75; }
|
||||
.opacity-xxl-100 { opacity: 1; }
|
||||
.opacity-2xl-0 { opacity: 0; }
|
||||
.opacity-2xl-25 { opacity: .25; }
|
||||
.opacity-2xl-50 { opacity: .5; }
|
||||
.opacity-2xl-75 { opacity: .75; }
|
||||
.opacity-2xl-100 { opacity: 1; }
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -488,8 +488,8 @@ This will now generate responsive variations of `.border` and `.border-0` for ea
|
|||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
.border-xxl { ... }
|
||||
.border-xxl-0 { ... }
|
||||
.border-2xl { ... }
|
||||
.border-2xl-0 { ... }
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -10,12 +10,12 @@ Change the value of the [`display` property](https://developer.mozilla.org/en-US
|
|||
|
||||
## Notation
|
||||
|
||||
Display utility classes that apply to all [breakpoints]([[docsref:/layout/breakpoints]]), from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
|
||||
Display utility classes that apply to all [breakpoints]([[docsref:/layout/breakpoints]]), from `xs` to `2xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
|
||||
|
||||
As such, the classes are named using the format:
|
||||
|
||||
- `.d-{value}` for `xs`
|
||||
- `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
|
||||
- `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
|
||||
|
||||
Where *value* is one of:
|
||||
|
||||
|
|
@ -33,7 +33,7 @@ Where *value* is one of:
|
|||
|
||||
The display values can be altered by changing the `display` values defined in `$utilities` and recompiling the SCSS.
|
||||
|
||||
The media queries affect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on `lg`, `xl`, and `xxl` screens.
|
||||
The media queries affect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on `lg`, `xl`, and `2xl` screens.
|
||||
|
||||
## Clearfix
|
||||
|
||||
|
|
@ -55,9 +55,9 @@ We've removed the clearfix helper class in v6 as it's outdated and no longer nee
|
|||
|
||||
For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.
|
||||
|
||||
To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,xxl}-none` classes for any responsive screen variation.
|
||||
To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,2xl}-none` classes for any responsive screen variation.
|
||||
|
||||
To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-xxl-none` will hide the element for all screen sizes except on medium and large devices.
|
||||
To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-2xl-none` will hide the element for all screen sizes except on medium and large devices.
|
||||
|
||||
<BsTable>
|
||||
| Screen size | Class |
|
||||
|
|
@ -67,15 +67,15 @@ To show an element only on a given interval of screen sizes you can combine one
|
|||
| Hidden only on sm | `.d-sm-none .d-md-block` |
|
||||
| Hidden only on md | `.d-md-none .d-lg-block` |
|
||||
| Hidden only on lg | `.d-lg-none .d-xl-block` |
|
||||
| Hidden only on xl | `.d-xl-none .d-xxl-block` |
|
||||
| Hidden only on xxl | `.d-xxl-none` |
|
||||
| Hidden only on xl | `.d-xl-none .d-2xl-block` |
|
||||
| Hidden only on 2xl | `.d-2xl-none` |
|
||||
| Visible on all | `.d-block` |
|
||||
| Visible only on xs | `.d-block .d-sm-none` |
|
||||
| Visible only on sm | `.d-none .d-sm-block .d-md-none` |
|
||||
| Visible only on md | `.d-none .d-md-block .d-lg-none` |
|
||||
| Visible only on lg | `.d-none .d-lg-block .d-xl-none` |
|
||||
| Visible only on xl | `.d-none .d-xl-block .d-xxl-none` |
|
||||
| Visible only on xxl | `.d-none .d-xxl-block` |
|
||||
| Visible only on xl | `.d-none .d-xl-block .d-2xl-none` |
|
||||
| Visible only on 2xl | `.d-none .d-2xl-block` |
|
||||
</BsTable>
|
||||
|
||||
<Example code={`<div class="d-lg-none">hide on lg and wider screens</div>
|
||||
|
|
|
|||
|
|
@ -28,13 +28,13 @@ Add the `object-fit-{value}` class to the [replaced element](https://developer.m
|
|||
|
||||
## Responsive
|
||||
|
||||
Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `xxl`. Classes can be combined for various effects as you need.
|
||||
Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `2xl`. Classes can be combined for various effects as you need.
|
||||
|
||||
<Example class="d-flex overflow-auto" code={`<Placeholder width="140" height="80" class="object-fit-sm-contain border rounded" text="Contain on sm" markup="img" />
|
||||
<Placeholder width="140" height="80" class="object-fit-md-contain border rounded" text="Contain on md" markup="img" />
|
||||
<Placeholder width="140" height="80" class="object-fit-lg-contain border rounded" text="Contain on lg" markup="img" />
|
||||
<Placeholder width="140" height="80" class="object-fit-xl-contain border rounded" text="Contain on xl" markup="img" />
|
||||
<Placeholder width="140" height="80" class="object-fit-xxl-contain border rounded" text="Contain on xxl" markup="img" />`} />
|
||||
<Placeholder width="140" height="80" class="object-fit-2xl-contain border rounded" text="Contain on 2xl" markup="img" />`} />
|
||||
|
||||
## Video
|
||||
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@ Assign responsive-friendly `margin` or `padding` values to an element or a subse
|
|||
|
||||
### Notation
|
||||
|
||||
Spacing utilities that apply to all breakpoints, from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
|
||||
Spacing utilities that apply to all breakpoints, from `xs` to `2xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
|
||||
|
||||
The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
|
||||
The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
|
||||
|
||||
Where *property* is one of:
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ if (frontmatter.toc) {
|
|||
---
|
||||
|
||||
<BaseLayout {...Astro.props} layout="docs" overrides={{ body: bodyProps }}>
|
||||
<div slot="main" class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
|
||||
<div slot="main" class="container-2xl bd-gutter mt-3 my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const { description, title } = Astro.props
|
|||
<BaseLayout {...Astro.props} layout="single">
|
||||
<Fragment slot="main">
|
||||
<header class="py-5 border-bottom">
|
||||
<div class="container-xxl bd-gutter pt-md-1 pb-md-4">
|
||||
<div class="container-2xl bd-gutter pt-md-1 pb-md-4">
|
||||
<div class="row">
|
||||
<div class="col-xl-8">
|
||||
<h1 class="bd-title mt-0">{title}</h1>
|
||||
|
|
@ -28,7 +28,7 @@ const { description, title } = Astro.props
|
|||
</header>
|
||||
|
||||
<main class="bd-content order-1 py-5" id="content">
|
||||
<div class="container-xxl bd-gutter">
|
||||
<div class="container-2xl bd-gutter">
|
||||
<slot />
|
||||
<slot name="main-content" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import Themes from '@components/home/Themes.astro'
|
|||
|
||||
<BaseLayout>
|
||||
<MastHead />
|
||||
<div class="container-xxl bd-gutter masthead-followup">
|
||||
<div class="container-2xl bd-gutter masthead-followup">
|
||||
<GetStarted />
|
||||
<Customize />
|
||||
<CSSVariables />
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
// @use "../../../scss/functions";
|
||||
// @use "../../../scss/mixins";
|
||||
// @use "../../../scss/variables";
|
||||
// @use "../../../scss/layout/breakpoints";
|
||||
@use "../../../scss/layout/breakpoints" as *;
|
||||
|
||||
// // fusv-disable
|
||||
// $enable-grid-classes: false;
|
||||
|
|
|
|||
Loading…
Reference in New Issue