Fix instances of 2xl, fix utilities generation (#41774)

mdo · mdo · commit f94bcbe321d7 · 2025-10-10T10:03:32.000-07:00
diff --git 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
@@ -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
@@ -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
@@ -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>
diff --git 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'
     </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>
@@ -107,8 +107,8 @@ export const body_class = 'py-4'
     <hr class="my-4">
 
     <h2 class="mt-4">Mixed: mobile and desktop</h2>
-    <p>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.</p>
-    <p>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.</p>
+    <p>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.</p>
+    <p>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.</p>
     <div class="row mb-3 text-center">
       <div class="col-md-8 themed-grid-col">.col-md-8</div>
       <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
@@ -172,14 +172,14 @@ export const body_class = 'py-4'
     <hr class="my-4">
 
     <h2 class="mt-4">Containers</h2>
-    <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>xxl</code> breakpoint.</p>
+    <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>2xl</code> breakpoint.</p>
   </div>
 
   <div class="container themed-container text-center">.container</div>
   <div class="container-sm themed-container text-center">.container-sm</div>
   <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>
diff --git 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']
 
   <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>
diff --git 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']
     </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">
+      <a class="navbar-brand" href="#">Expand at 2xl</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample2xl" aria-controls="navbarsExample2xl" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
 
-      <div class="collapse navbar-collapse" id="navbarsExampleXxl">
+      <div class="collapse navbar-collapse" id="navbarsExample2xl">
         <ul class="navbar-nav me-auto mb-2 mb-xl-0">
           <li class="nav-item">
             <a class="nav-link active" aria-current="page" href="#">Home</a>
diff --git a/site/src/components/header/Navigation.astro b/site/src/components/header/Navigation.astro
@@ -22,7 +22,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">
diff --git a/site/src/components/home/MastHead.astro b/site/src/components/home/MastHead.astro
@@ -7,7 +7,7 @@ import ResponsiveImage from '@layouts/partials/ResponsiveImage.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"
diff --git a/site/src/content/docs/migration.mdx b/site/src/content/docs/migration.mdx
@@ -60,7 +60,7 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
 - **Updated lg, xl, and 2xl breakpoints and containers.**
   - Increased the `lg` breakpoint from 992px to 1024px; it's container remains the same at 960px.
   - Increased the `xl` breakpoint from 1200px to 1280px, and it's container from 1140px to 1200px.
-  - Renamed `xxl` to `2xl` for better scaling with additional custom breakpoints
+  - Renamed `2xl` to `2xl` for better scaling with additional custom breakpoints
   - Increased the `2xl` breakpoint from 1400px to 1536px, and it's container from 1320px to 1440px.
 
 ### Sass
@@ -74,7 +74,7 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
   - Removed `muted`, `black-50`, and `white-50` from text colors utilities map
   - Consolidated carousel dark variables, removing `$carousel-dark-indicator-active-bg`, `$carousel-dark-caption-color`, and `$carousel-dark-control-icon-filter` for their reassigned counterparts.
   - Removed `$btn-close-white-filter` for `$btn-close-filter-dark`.
-  - Removed `$border-radius-2xl`, use `$border-radius-xxl`.
+  - Removed `$border-radius-2xl`, use `$border-radius-2xl`.
   - Removed `$text-muted` for secondary color.
   - Removed `$hr-bg-color` for `$hr-border-color` and `$hr-height` for `$hr-border-width`.
   - Removed unused `$dropdown-header-padding` for the `-x`/`-y` split variables.
diff --git a/site/src/content/docs/utilities/margin.mdx b/site/src/content/docs/utilities/margin.mdx
@@ -59,9 +59,9 @@ Use margin utilities to control the outer space around elements. Margin utilitie
 
 ## Notation
 
-Margin 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.
+Margin 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:
 
diff --git a/site/src/content/docs/utilities/padding.mdx b/site/src/content/docs/utilities/padding.mdx
@@ -52,9 +52,9 @@ Use padding utilities to control the inner space within elements. Padding utilit
 
 ## Notation
 
-Padding 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.
+Padding 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:
 
diff --git a/site/src/content/docs/utilities/text-alignment.mdx b/site/src/content/docs/utilities/text-alignment.mdx
@@ -31,7 +31,7 @@ Easily realign text to components with text alignment classes. For start, end, a
 <p class="text-md-end">End aligned text on viewports sized MD (medium) or wider.</p>
 <p class="text-lg-end">End aligned text on viewports sized LG (large) or wider.</p>
 <p class="text-xl-end">End aligned text on viewports sized XL (extra large) or wider.</p>
-<p class="text-xxl-end">End aligned text on viewports sized XXL (extra extra large) or wider.</p>`} />
+<p class="text-2xl-end">End aligned text on viewports sized 2xl (extra extra large) or wider.</p>`} />
 
 <Callout>
 Note that we don't provide utility classes for justified text. While, aesthetically, justified text might look more appealing, it does make word-spacing more random and therefore harder to read.
diff --git a/site/src/layouts/DocsLayout.astro b/site/src/layouts/DocsLayout.astro
@@ -72,7 +72,7 @@ if (currentPageIndex < allPages.length - 1) {
 ---
 
 <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">
diff --git a/site/src/layouts/SingleLayout.astro b/site/src/layouts/SingleLayout.astro
@@ -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>
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
@@ -11,7 +11,7 @@ import Icons from '@components/home/Icons.astro'
 
 <BaseLayout>
   <MastHead />
-  <div class="container-xxl bd-gutter masthead-followup">
+  <div class="container-2xl bd-gutter masthead-followup">
     <GetStarted />
     <Customize />
     <CSSVariables />

Original file line number	Diff line number	Diff line change
`@@ -280,7 +280,7 @@ $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;`
`280`	`280`	`}`
`281`	`281`
`282`	`282`	`.navbar-toggler {`
`283`		`- display: none;`
	`283`	`+ display: none !important; // stylelint-disable-line declaration-no-important`
`284`	`284`	`}`
`285`	`285`
`286`	`286`	`.offcanvas {`
Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,8 @@`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`// Calculate infix once, before the loop`
`41`		`- $infix: if($infix == "", "", "-" + $infix);`
	`41`	`+ // Note: $infix already includes the leading dash from breakpoint-infix()`
	`42`	`+ // $infix: if($infix == "", "", "-" + $infix);`
`42`	`43`
`43`	`44`	`@each $key, $value in $values {`
`44`	`45`	`$properties: map.get($utility, property);`
Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ const { addedIn, layout, title } = Astro.props`
`22`	`22`	`---`
`23`	`23`
`24`	`24`	`<header class="navbar navbar-expand-lg bd-navbar sticky-top">`
`25`		`- <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">`
	`25`	`+ <nav class="container-2xl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">`
`26`	`26`	`{`
`27`	`27`	`layout === 'docs' && (`
`28`	`28`	`<div class="bd-navbar-toggle">`