From: Mark Otto Date: Fri, 26 Sep 2025 21:52:16 +0000 (-0700) Subject: v6: New lg, xl, and 2xl breakpoints, plus some renaming (#41770) X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=4fecde40b8cbd2c099feda60dad0fc952c2188ad;p=thirdparty%2Fbootstrap.git v6: New lg, xl, and 2xl breakpoints, plus some renaming (#41770) * Update xxl breakpoint and container, rename xxl to 2xl for better scaling Co-Authored-By: mdo <98681+mdo@users.noreply.github.com> * note for lg * bump bundlewatch --------- Co-authored-by: mdo <98681+mdo@users.noreply.github.com> --- diff --git a/scss/_config.scss b/scss/_config.scss index 64f07db28e..0bc966bc76 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -52,9 +52,9 @@ $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, - lg: 992px, - xl: 1200px, - xxl: 1400px + lg: 1024px, + xl: 1280px, + 2xl: 1536px ) !default; // scss-docs-end grid-breakpoints @@ -80,8 +80,8 @@ $container-max-widths: ( sm: 540px, md: 720px, lg: 960px, - xl: 1140px, - xxl: 1320px + xl: 1200px, + 2xl: 1440px ) !default; // scss-docs-end container-max-widths diff --git a/scss/_root.scss b/scss/_root.scss index 478114f95a..c4de25d0b5 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -170,7 +170,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: #{$border-radius-2xl}; --#{$prefix}border-radius-pill: #{$border-radius-pill}; // scss-docs-end root-border-radius-var diff --git a/scss/_variables.scss b/scss/_variables.scss index a2a2024159..4297fea52a 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -214,7 +214,7 @@ $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 @@ -519,7 +519,7 @@ $modal-footer-border-width: $modal-header-border-width !default; $modal-sm: 300px !default; $modal-md: 500px !default; $modal-lg: 800px !default; -$modal-xl: 1140px !default; +$modal-xl: 1200px !default; $modal-fade-transform: translate(0, -50px) !default; $modal-show-transform: none !default; diff --git a/scss/layout/_breakpoints.scss b/scss/layout/_breakpoints.scss index adaecdad29..2320792d13 100644 --- a/scss/layout/_breakpoints.scss +++ b/scss/layout/_breakpoints.scss @@ -6,7 +6,7 @@ // // 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: 1024px, xl: 1280px, 2xl: 1536px) // // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. @@ -14,9 +14,9 @@ // // >> 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: 1024px, xl: 1280px, 2xl: 1536px)) // 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)) { $n: list.index($breakpoint-names, $name); @@ -28,7 +28,7 @@ // 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: 1024px, xl: 1280px, 2xl: 1536px)) // 576px @function breakpoint-min($name, $breakpoints: $grid-breakpoints) { $min: map.get($breakpoints, $name); @@ -42,7 +42,7 @@ // 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: 1024px, xl: 1280px, 2xl: 1536px)) // 767.98px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { $max: map.get($breakpoints, $name); @@ -52,9 +52,9 @@ // 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: 1024px, xl: 1280px, 2xl: 1536px)) // "" (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: 1024px, xl: 1280px, 2xl: 1536px)) // "-sm" @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); diff --git a/site/data/breakpoints.yml b/site/data/breakpoints.yml index 3e2fcca48a..03d7b21d27 100644 --- a/site/data/breakpoints.yml +++ b/site/data/breakpoints.yml @@ -19,17 +19,17 @@ - breakpoint: lg abbr: -lg name: Large - min-width: 992px + min-width: 1024px container: 960px - breakpoint: xl abbr: -xl name: X-Large - min-width: 1200px - container: 1140px + min-width: 1280px + container: 1200px -- breakpoint: xxl - abbr: -xxl - name: XX-Large - min-width: 1400px - container: 1320px +- breakpoint: 2xl + abbr: -2xl + name: 2X-Large + min-width: 1536px + container: 1440px diff --git a/site/src/content/docs/components/dropdowns.mdx b/site/src/content/docs/components/dropdowns.mdx index 57f8b09461..4cf96bafcf 100644 --- a/site/src/content/docs/components/dropdowns.mdx +++ b/site/src/content/docs/components/dropdowns.mdx @@ -645,7 +645,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`. @@ -610,7 +610,7 @@ Another override is the option to pop up a modal that covers the user viewport, - `} /> + `} /> ```html @@ -704,11 +704,11 @@ Another override is the option to pop up a modal that covers the user viewport, -