From f94bcbe321d7e0074f8904a97a98634e19c447b2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 27 Sep 2025 18:57:05 -0700 Subject: [PATCH] Fix instances of 2xl, fix utilities generation (#41774) --- scss/_navbar.scss | 2 +- scss/_utilities.scss | 1 - scss/mixins/_utilities.scss | 3 ++- site/src/assets/examples/buttons/index.astro | 2 +- site/src/assets/examples/grid/index.astro | 14 +++++++------- site/src/assets/examples/heroes/index.astro | 4 ++-- site/src/assets/examples/navbars/index.astro | 8 ++++---- site/src/components/header/Navigation.astro | 2 +- site/src/components/home/MastHead.astro | 2 +- site/src/content/docs/migration.mdx | 4 ++-- site/src/content/docs/utilities/margin.mdx | 4 ++-- site/src/content/docs/utilities/padding.mdx | 4 ++-- site/src/content/docs/utilities/text-alignment.mdx | 2 +- site/src/layouts/DocsLayout.astro | 2 +- site/src/layouts/SingleLayout.astro | 4 ++-- site/src/pages/index.astro | 2 +- 16 files changed, 30 insertions(+), 30 deletions(-) diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 4fc098482a..1880b9cbdb 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -280,7 +280,7 @@ $navbar-dark-brand-hover-color: $navbar-dark-active-color !default; } .navbar-toggler { - display: none; + display: none !important; // stylelint-disable-line declaration-no-important } .offcanvas { diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 890bff9813..63c818b328 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -95,7 +95,6 @@ $utilities: map.merge( print: true, property: display, class: d, - important: true, values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex flow-root none ), // scss-docs-end utils-display diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss index 63ac616dc8..d7dc3a6af1 100644 --- a/scss/mixins/_utilities.scss +++ b/scss/mixins/_utilities.scss @@ -38,7 +38,8 @@ } // Calculate infix once, before the loop - $infix: if($infix == "", "", "-" + $infix); + // Note: $infix already includes the leading dash from breakpoint-infix() + // $infix: if($infix == "", "", "-" + $infix); @each $key, $value in $values { $properties: map.get($utility, property); diff --git a/site/src/assets/examples/buttons/index.astro b/site/src/assets/examples/buttons/index.astro index 7990e7845a..f99b7b53bd 100644 --- a/site/src/assets/examples/buttons/index.astro +++ b/site/src/assets/examples/buttons/index.astro @@ -26,7 +26,7 @@ export const title = 'Buttons'
-
+
diff --git a/site/src/assets/examples/grid/index.astro b/site/src/assets/examples/grid/index.astro index 2c01d8de9d..499e887fe2 100644 --- a/site/src/assets/examples/grid/index.astro +++ b/site/src/assets/examples/grid/index.astro @@ -45,9 +45,9 @@ export const body_class = 'py-4'
-
.col-xxl-4
-
.col-xxl-4
-
.col-xxl-4
+
.col-2xl-4
+
.col-2xl-4
+
.col-2xl-4

Three equal columns

@@ -107,8 +107,8 @@ export const body_class = 'py-4'

Mixed: mobile and desktop

-

The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and xxl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

-

Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and xxl, you only need to specify md.

+

The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and 2xl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

+

Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and 2xl, you only need to specify md.

.col-md-8
.col-6 .col-md-4
@@ -172,7 +172,7 @@ export const body_class = 'py-4'

Containers

-

Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new xxl breakpoint.

+

Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new 2xl breakpoint.

.container
@@ -180,6 +180,6 @@ export const body_class = 'py-4'
.container-md
.container-lg
.container-xl
-
.container-xxl
+
.container-2xl
.container-fluid
diff --git a/site/src/assets/examples/heroes/index.astro b/site/src/assets/examples/heroes/index.astro index 853776e7bc..8ac2a70ac3 100644 --- a/site/src/assets/examples/heroes/index.astro +++ b/site/src/assets/examples/heroes/index.astro @@ -40,7 +40,7 @@ export const extra_css = ['heroes.css']
-
+
Bootstrap Themes @@ -58,7 +58,7 @@ export const extra_css = ['heroes.css']
-
+

Vertically centered hero sign-up form

diff --git a/site/src/assets/examples/navbars/index.astro b/site/src/assets/examples/navbars/index.astro index 63d65ffb4c..43c73f87ca 100644 --- a/site/src/assets/examples/navbars/index.astro +++ b/site/src/assets/examples/navbars/index.astro @@ -199,14 +199,14 @@ export const extra_css = ['navbars.css']
-