From fd6303c04e0fed627c7a89792d707b2da9fb6884 Mon Sep 17 00:00:00 2001
From: Pierluigi Lenoci <pierluigilenoci@gmail.com>
Date: Sun, 3 May 2026 22:50:39 +0200
Subject: [PATCH] feat(docs): add prettier-plugin-bootstrap for automatic class
 sorting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds `prettier-plugin-bootstrap` (v0.3.0) to automatically sort Bootstrap
CSS classes following the framework's architecture order.

- Adds `prettier-plugin-bootstrap@^0.3.0` as a dev dependency
- Configures `.prettierrc.json` with the plugin (after prettier-plugin-astro)
- Reformats 28 `.astro` files with sorted class attributes (no functional changes)

Plugin features:
- Sorts classes: layout → components → helpers → utilities
- Responsive variants sort after their base class
- Supports HTML, JSX/TSX, Vue, Angular, Svelte, and Astro
- Public sorting API via `prettier-plugin-bootstrap/sorter`
- 121 tests, 100% coverage, zero runtime dependencies

Signed-off-by: Pierluigi Lenoci <pierluigilenoci@gmail.com>
---
 package-lock.json                             | 14 +++++++++++++
 package.json                                  |  1 +
 site/.prettierrc.json                         |  2 +-
 site/src/components/Ads.astro                 |  4 ++--
 site/src/components/DocsSidebar.astro         |  4 ++--
 site/src/components/footer/Footer.astro       | 14 ++++++-------
 site/src/components/header/LinkItem.astro     |  2 +-
 site/src/components/header/Navigation.astro   | 20 +++++++++----------
 site/src/components/header/Skippy.astro       |  4 ++--
 site/src/components/header/Versions.astro     |  6 +++---
 site/src/components/home/CSSVariables.astro   | 10 +++++-----
 .../components/home/ComponentUtilities.astro  | 20 +++++++++----------
 site/src/components/home/Customize.astro      |  6 +++---
 site/src/components/home/GetStarted.astro     | 20 +++++++++----------
 site/src/components/home/Icons.astro          |  6 +++---
 site/src/components/home/MastHead.astro       | 16 +++++++--------
 site/src/components/home/Plugins.astro        | 10 +++++-----
 site/src/components/shortcodes/AddedIn.astro  |  2 +-
 .../components/shortcodes/DeprecatedIn.astro  |  2 +-
 site/src/components/shortcodes/JsDocs.astro   |  4 ++--
 site/src/components/shortcodes/ScssDocs.astro |  4 ++--
 site/src/layouts/BaseLayout.astro             |  2 +-
 site/src/layouts/ExamplesLayout.astro         |  2 +-
 site/src/layouts/SingleLayout.astro           |  8 ++++----
 site/src/layouts/partials/ThemeToggler.astro  | 14 ++++++-------
 site/src/pages/404.astro                      |  2 +-
 .../pages/docs/[version]/examples/index.astro |  6 +++---
 27 files changed, 110 insertions(+), 95 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 206c0399533f..6de452720586 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -78,6 +78,7 @@
         "postcss-cli": "^11.0.1",
         "prettier": "^3.8.3",
         "prettier-plugin-astro": "^0.14.1",
+        "prettier-plugin-bootstrap": "^0.3.0",
         "rehype-autolink-headings": "^7.1.0",
         "remark": "^15.0.1",
         "remark-html": "^16.0.1",
@@ -15868,6 +15869,19 @@
         "node": "^14.15.0 || >=16.0.0"
       }
     },
+    "node_modules/prettier-plugin-bootstrap": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-bootstrap/-/prettier-plugin-bootstrap-0.3.0.tgz",
+      "integrity": "sha512-1hSibEoQNsYfboNOTWQdbptjZH8hHZuIJ8BMW8GJ7fEjgkTYPgEH9SIhYJRqknB4mo389SRB+fmzX2xI28P3sw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "prettier": "^3.0.0"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "30.2.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.2.0.tgz",
diff --git a/package.json b/package.json
index b5a12ca108f4..504d1845028f 100644
--- a/package.json
+++ b/package.json
@@ -167,6 +167,7 @@
     "postcss-cli": "^11.0.1",
     "prettier": "^3.8.3",
     "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-bootstrap": "^0.3.0",
     "rehype-autolink-headings": "^7.1.0",
     "remark": "^15.0.1",
     "remark-html": "^16.0.1",
diff --git a/site/.prettierrc.json b/site/.prettierrc.json
index b3ef3394272b..c9a412929d5f 100644
--- a/site/.prettierrc.json
+++ b/site/.prettierrc.json
@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/prettierrc",
   "arrowParens": "always",
-  "plugins": ["prettier-plugin-astro"],
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-bootstrap"],
   "printWidth": 120,
   "semi": false,
   "singleQuote": true,
diff --git a/site/src/components/Ads.astro b/site/src/components/Ads.astro
index 2a53c0a615f5..71b15bbeb95a 100644
--- a/site/src/components/Ads.astro
+++ b/site/src/components/Ads.astro
@@ -1,9 +1,9 @@
 ---
+
 ---
 
 <script
   is:inline
   async
   src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom"
-  id="_carbonads_js"
-></script>
+  id="_carbonads_js"></script>
diff --git a/site/src/components/DocsSidebar.astro b/site/src/components/DocsSidebar.astro
index 1282ed7026e1..ec80e1be24c1 100644
--- a/site/src/components/DocsSidebar.astro
+++ b/site/src/components/DocsSidebar.astro
@@ -7,8 +7,8 @@ import { getSlug } from '@libs/utils'
 const sidebar = getData('sidebar')
 ---
 
-<nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation">
-  <ul class="bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
+<nav class="w-100 bd-links" id="bd-docs-nav" aria-label="Docs navigation">
+  <ul class="list-unstyled mb-0 pe-lg-2 pb-3 pb-md-2 bd-links-nav">
     {
       sidebar.map((group) => {
         const groupSlug = getSlug(group.title)
diff --git a/site/src/components/footer/Footer.astro b/site/src/components/footer/Footer.astro
index ab4e19a1e1dc..1b185974370d 100644
--- a/site/src/components/footer/Footer.astro
+++ b/site/src/components/footer/Footer.astro
@@ -4,12 +4,12 @@ import { getConfig } from '@libs/config'
 import { getVersionedDocsPath } from '@libs/path'
 ---
 
-<footer class="bd-footer py-4 py-md-5 mt-5 bg-body-tertiary">
-  <div class="container py-4 py-md-5 px-4 px-md-3 text-body-secondary">
+<footer class="mt-5 py-4 py-md-5 bg-body-tertiary bd-footer">
+  <div class="container px-4 px-md-3 py-4 py-md-5 text-body-secondary">
     <div class="row">
       <div class="col-lg-3 mb-3">
         <a
-          class="d-inline-flex align-items-center mb-2 text-body-emphasis text-decoration-none"
+          class="d-inline-flex align-items-center mb-2 text-decoration-none text-body-emphasis"
           href="/"
           aria-label="Bootstrap"
         >
@@ -32,7 +32,7 @@ import { getVersionedDocsPath } from '@libs/path'
           <li class="mb-2">Currently v{getConfig().current_version}.</li>
         </ul>
       </div>
-      <div class="col-6 col-lg-2 offset-lg-1 mb-3">
+      <div class="col-lg-2 col-6 offset-lg-1 mb-3">
         <h5>Links</h5>
         <ul class="list-unstyled">
           <li class="mb-2"><a href="/">Home</a></li>
@@ -43,7 +43,7 @@ import { getVersionedDocsPath } from '@libs/path'
           <li class="mb-2"><a href={getConfig().swag} target="_blank" rel="noopener">Swag Store</a></li>
         </ul>
       </div>
-      <div class="col-6 col-lg-2 mb-3">
+      <div class="col-lg-2 col-6 mb-3">
         <h5>Guides</h5>
         <ul class="list-unstyled">
           <li class="mb-2"><a href={getVersionedDocsPath('getting-started')}>Getting started</a></li>
@@ -53,7 +53,7 @@ import { getVersionedDocsPath } from '@libs/path'
           <li class="mb-2"><a href={getVersionedDocsPath('getting-started/vite')}>Vite</a></li>
         </ul>
       </div>
-      <div class="col-6 col-lg-2 mb-3">
+      <div class="col-lg-2 col-6 mb-3">
         <h5>Projects</h5>
         <ul class="list-unstyled">
           <li class="mb-2">
@@ -69,7 +69,7 @@ import { getVersionedDocsPath } from '@libs/path'
           </li>
         </ul>
       </div>
-      <div class="col-6 col-lg-2 mb-3">
+      <div class="col-lg-2 col-6 mb-3">
         <h5>Community</h5>
         <ul class="list-unstyled">
           <li class="mb-2">
diff --git a/site/src/components/header/LinkItem.astro b/site/src/components/header/LinkItem.astro
index 0b3f42f50e01..01d16c2ba477 100644
--- a/site/src/components/header/LinkItem.astro
+++ b/site/src/components/header/LinkItem.astro
@@ -13,7 +13,7 @@ const { active, class: className, track, ...props } = Astro.props
 const content = await Astro.slots.render('default')
 ---
 
-<li class="nav-item col-6 col-lg-auto">
+<li class="col-lg-auto col-6 nav-item">
   <a
     aria-current={active ? true : undefined}
     class:list={['nav-link py-2 px-0 px-lg-2', className, { active }]}
diff --git a/site/src/components/header/Navigation.astro b/site/src/components/header/Navigation.astro
index b1ebe458b21c..4c45a3f20ae5 100644
--- a/site/src/components/header/Navigation.astro
+++ b/site/src/components/header/Navigation.astro
@@ -21,8 +21,8 @@ interface Props {
 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">
+<header class="navbar navbar-expand-lg sticky-top bd-navbar">
+  <nav class="container-xxl flex-wrap flex-lg-nowrap bd-gutter" aria-label="Main navigation">
     {
       layout === 'docs' && (
         <div class="bd-navbar-toggle">
@@ -42,7 +42,7 @@ const { addedIn, layout, title } = Astro.props
     }
     {layout !== 'docs' && <div class="d-lg-none" style="width: 4.25rem;" />}
 
-    <a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
+    <a class="navbar-brand me-0 me-lg-2 p-0" href="/" aria-label="Bootstrap">
       <BootstrapWhiteFillIcon class="d-block my-1" height={32} width={40} />
     </a>
 
@@ -77,7 +77,7 @@ const { addedIn, layout, title } = Astro.props
           data-bs-target="#bdNavbar"></button>
       </div>
 
-      <div class="offcanvas-body p-4 pt-0 p-lg-0">
+      <div class="offcanvas-body p-4 p-lg-0 pt-0">
         <hr class="d-lg-none text-white-50" />
         <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
           <LinkItem active={layout === 'docs'} href={getVersionedDocsPath('getting-started/introduction/')} track>
@@ -91,12 +91,12 @@ const { addedIn, layout, title } = Astro.props
         <hr class="d-lg-none text-white-50" />
 
         <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
-          <LinkItem class="nav-link py-2 px-0 px-lg-2" href={getConfig().github_org} target="_blank" rel="noopener">
+          <LinkItem class="nav-link px-0 px-lg-2 py-2" href={getConfig().github_org} target="_blank" rel="noopener">
             <GitHubIcon class="navbar-nav-svg" height={16} width={16} />
             <small class="d-lg-none ms-2">GitHub</small>
           </LinkItem>
           <LinkItem
-            class="nav-link py-2 px-0 px-lg-2"
+            class="nav-link px-0 px-lg-2 py-2"
             href={`https://x.com/${getConfig().x}`}
             target="_blank"
             rel="noopener"
@@ -104,23 +104,23 @@ const { addedIn, layout, title } = Astro.props
             <XIcon class="navbar-nav-svg" height={16} width={16} />
             <small class="d-lg-none ms-2">X</small>
           </LinkItem>
-          <LinkItem class="nav-link py-2 px-0 px-lg-2" href={getConfig().opencollective} target="_blank" rel="noopener">
+          <LinkItem class="nav-link px-0 px-lg-2 py-2" href={getConfig().opencollective} target="_blank" rel="noopener">
             <OpenCollectiveIcon class="navbar-nav-svg" height={16} width={16} />
             <small class="d-lg-none ms-2">Open Collective</small>
           </LinkItem>
-          <li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
+          <li class="col-lg-auto col-12 nav-item py-2 py-lg-1">
             <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
             <hr class="d-lg-none my-2 text-white-50" />
           </li>
 
           <Versions layout={layout} addedIn={addedIn} />
 
-          <li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
+          <li class="col-lg-auto col-12 nav-item py-2 py-lg-1">
             <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
             <hr class="d-lg-none my-2 text-white-50" />
           </li>
 
-          <li class="nav-item dropdown">
+          <li class="dropdown nav-item">
             <ThemeToggler layout={layout} />
           </li>
         </ul>
diff --git a/site/src/components/header/Skippy.astro b/site/src/components/header/Skippy.astro
index aa5ba1dbde1b..34267e6a2183 100644
--- a/site/src/components/header/Skippy.astro
+++ b/site/src/components/header/Skippy.astro
@@ -8,9 +8,9 @@ interface Props {
 const { layout } = Astro.props
 ---
 
-<div class="skippy visually-hidden-focusable overflow-hidden">
+<div class="visually-hidden-focusable overflow-hidden skippy">
   <div class="container-xl">
-    <a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
+    <a class="d-inline-flex m-1 p-2" href="#content">Skip to main content</a>
     {
       layout === 'docs' && (
         <a class="d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">
diff --git a/site/src/components/header/Versions.astro b/site/src/components/header/Versions.astro
index a1119e0a322d..f853a527b29f 100644
--- a/site/src/components/header/Versions.astro
+++ b/site/src/components/header/Versions.astro
@@ -27,10 +27,10 @@ const addedIn52 = addedIn?.version === '5.2'
 const addedIn53 = addedIn?.version === '5.3'
 ---
 
-<li class="nav-item dropdown">
+<li class="dropdown nav-item">
   <button
     type="button"
-    class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle"
+    class="btn btn-link dropdown-toggle nav-link px-0 px-lg-2 py-2"
     data-bs-toggle="dropdown"
     aria-expanded="false"
     data-bs-display="static"
@@ -44,7 +44,7 @@ const addedIn53 = addedIn?.version === '5.3'
     <li><h6 class="dropdown-header">v5 releases</h6></li>
     <li>
       <a
-        class="dropdown-item d-flex align-items-center justify-content-between active"
+        class="dropdown-item d-flex justify-content-between align-items-center active"
         aria-current="true"
         href={isHome ? '/' : `/docs/${getConfig().docs_version}/${versionsLink}`}
       >
diff --git a/site/src/components/home/CSSVariables.astro b/site/src/components/home/CSSVariables.astro
index 92dad9dd2efb..0c806ed837e1 100644
--- a/site/src/components/home/CSSVariables.astro
+++ b/site/src/components/home/CSSVariables.astro
@@ -3,10 +3,10 @@ import { getVersionedDocsPath } from '@libs/path'
 import Code from '@shortcodes/Code.astro'
 ---
 
-<section class="row g-md-5 pb-md-5 mb-5 align-items-center">
+<section class="row g-md-5 align-items-center mb-5 pb-md-5">
   <div class="col-lg-8 mb-5">
-    <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-pink-rgb);">
-      <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#braces"></use></svg>
+    <div class="d-inline-block mb-3 masthead-followup-icon" style="--bg-rgb: var(--bd-pink-rgb);">
+      <svg class="fs-1 bi" aria-hidden="true"><use xlink:href="#braces"></use></svg>
     </div>
     <h2 class="display-5 mb-3 fw-semibold lh-sm">Build and extend in real-time with CSS&nbsp;variables</h2>
     <p class="lead fw-normal">
@@ -16,8 +16,8 @@ import Code from '@shortcodes/Code.astro'
       > level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily
       be modified.
     </p>
-    <p class="d-flex flex-column lead fw-normal mb-0">
-      <a href={getVersionedDocsPath('customize/css-variables')} class="icon-link icon-link-hover fw-semibold mb-3">
+    <p class="lead d-flex flex-column mb-0 fw-normal">
+      <a href={getVersionedDocsPath('customize/css-variables')} class="icon-link icon-link-hover mb-3 fw-semibold">
         Learn more about CSS variables
         <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
       </a>
diff --git a/site/src/components/home/ComponentUtilities.astro b/site/src/components/home/ComponentUtilities.astro
index b54d4e4084c3..afc1ff199982 100644
--- a/site/src/components/home/ComponentUtilities.astro
+++ b/site/src/components/home/ComponentUtilities.astro
@@ -3,14 +3,14 @@ import { getVersionedDocsPath } from '@libs/path'
 import Code from '@shortcodes/Code.astro'
 ---
 
-<section class="pb-md-5 mb-5">
+<section class="mb-5 pb-md-5">
   <div class="col-lg-8 mb-5">
-    <div class="masthead-followup-icon d-inline-block mb-3 me-2" style="--bg-rgb: var(--bs-danger-rgb);">
-      <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
+    <div class="d-inline-block me-2 mb-3 masthead-followup-icon" style="--bg-rgb: var(--bs-danger-rgb);">
+      <svg class="fs-1 bi" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
     </div>
-    <svg class="bi me-2 fs-2 text-body-secondary" aria-hidden="true"><use xlink:href="#plus"></use></svg>
-    <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-info-rgb);">
-      <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
+    <svg class="me-2 fs-2 text-body-secondary bi" aria-hidden="true"><use xlink:href="#plus"></use></svg>
+    <div class="d-inline-block mb-3 masthead-followup-icon" style="--bg-rgb: var(--bs-info-rgb);">
+      <svg class="fs-1 bi" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
     </div>
     <h2 class="display-5 mb-3 fw-semibold lh-sm">Components, meet the Utility&nbsp;API</h2>
     <p class="lead fw-normal">
@@ -33,7 +33,7 @@ import Code from '@shortcodes/Code.astro'
         > and <a href={getVersionedDocsPath('utilities/shadows')}>effects</a>. Mix them with CSS variable overrides for
         even more control.
       </p>
-      <div class="p-4 border rounded-3 mb-4">
+      <div class="border mb-4 p-4 rounded-3">
         <ul class="nav nav-pills mb-4" id="pillNav" role="tablist">
           <li class="nav-item" role="presentation">
             <button
@@ -67,14 +67,14 @@ import Code from '@shortcodes/Code.astro'
           </li>
         </ul>
         <ul
-          class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm"
+          class="nav nav-pills nav-fill shadow-sm p-1 gap-2 bg-primary rounded-5 small"
           id="pillNav2"
           role="tablist"
           style="--bs-nav-link-color: rgba(255, 255, 255, .75); --bs-nav-link-hover-color: #fff; --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);"
         >
           <li class="nav-item" role="presentation">
             <button
-              class="nav-link active rounded-5"
+              class="nav-link rounded-5 active"
               id="home-tab2"
               data-bs-toggle="tab"
               type="button"
@@ -148,7 +148,7 @@ $utilities: map-merge(
         lang="scss"
       />
       <p class="d-flex mb-md-0">
-        <a href={getVersionedDocsPath('utilities/api/')} class="icon-link icon-link-hover fw-semibold mb-3">
+        <a href={getVersionedDocsPath('utilities/api/')} class="icon-link icon-link-hover mb-3 fw-semibold">
           Explore the utility API
           <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
         </a>
diff --git a/site/src/components/home/Customize.astro b/site/src/components/home/Customize.astro
index 7422c517c6e9..a7922ff0170a 100644
--- a/site/src/components/home/Customize.astro
+++ b/site/src/components/home/Customize.astro
@@ -4,15 +4,15 @@ import Code from '@shortcodes/Code.astro'
 ---
 
 <section class="col-lg-7 mb-5">
-  <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-primary-rgb);">
-    <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#palette2"></use></svg>
+  <div class="d-inline-block mb-3 masthead-followup-icon" style="--bg-rgb: var(--bs-primary-rgb);">
+    <svg class="fs-1 bi" aria-hidden="true"><use xlink:href="#palette2"></use></svg>
   </div>
   <h2 class="display-5 mb-3 fw-semibold lh-sm">Customize everything with&nbsp;Sass</h2>
   <p class="lead fw-normal">
     Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable
     global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.
   </p>
-  <p class="d-flex lead fw-normal">
+  <p class="lead d-flex fw-normal">
     <a href={getVersionedDocsPath('customize/overview/')} class="icon-link icon-link-hover fw-semibold">
       Learn more about customizing
       <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
diff --git a/site/src/components/home/GetStarted.astro b/site/src/components/home/GetStarted.astro
index 4ad6807c76b0..351b35d82099 100644
--- a/site/src/components/home/GetStarted.astro
+++ b/site/src/components/home/GetStarted.astro
@@ -4,25 +4,25 @@ import { getVersionedDocsPath } from '@libs/path'
 import Code from '@shortcodes/Code.astro'
 ---
 
-<div class="col-lg-7 mx-auto pb-3 mb-3 mb-md-5 text-md-center">
-  <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-violet-rgb);">
-    <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#code"></use></svg>
+<div class="col-lg-7 mx-auto mb-3 mb-md-5 pb-3 text-md-center">
+  <div class="d-inline-block mb-3 masthead-followup-icon" style="--bg-rgb: var(--bd-violet-rgb);">
+    <svg class="fs-1 bi" aria-hidden="true"><use xlink:href="#code"></use></svg>
   </div>
   <h2 class="display-5 mb-3 fw-semibold lh-sm">Get started any way you&nbsp;want</h2>
   <p class="lead fw-normal">
     Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code.
   </p>
-  <p class="d-flex justify-content-md-center lead fw-normal">
-    <a href={getVersionedDocsPath('getting-started/download/')} class="icon-link icon-link-hover fw-semibold ps-md-4">
+  <p class="lead d-flex justify-content-md-center fw-normal">
+    <a href={getVersionedDocsPath('getting-started/download/')} class="icon-link icon-link-hover ps-md-4 fw-semibold">
       Read installation docs
       <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
     </a>
   </p>
 </div>
 
-<section class="row g-3 g-md-5 mb-5 pb-5 justify-content-center">
+<section class="row g-3 g-md-5 justify-content-center mb-5 pb-5">
   <div class="col-lg-6 py-lg-4 pe-lg-5">
-    <svg class="bi mb-2 fs-2 text-body-secondary" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
+    <svg class="mb-2 fs-2 text-body-secondary bi" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
     <h3 class="fw-semibold">Install via package manager</h3>
     <p class="pe-lg-5">
       Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package-managed
@@ -37,8 +37,8 @@ import Code from '@shortcodes/Code.astro'
       package managers.
     </p>
   </div>
-  <div class="col-lg-6 py-lg-4 ps-lg-5 border-lg-start">
-    <svg class="bi mb-2 fs-2 text-body-secondary" aria-hidden="true"><use xlink:href="#globe2"></use></svg>
+  <div class="col-lg-6 border-lg-start py-lg-4 ps-lg-5">
+    <svg class="mb-2 fs-2 text-body-secondary bi" aria-hidden="true"><use xlink:href="#globe2"></use></svg>
     <h3 class="fw-semibold">Include via CDN</h3>
     <p class="pe-lg-5">
       When you only need to include Bootstrap’s compiled CSS or JS, you can use <a
@@ -67,7 +67,7 @@ import Code from '@shortcodes/Code.astro'
   <div class="col-md-8 mx-auto text-center">
     <h4 class="fw-semibold">Read our getting started guides</h4>
     <p>Get a jump on including Bootstrap's source files in a new project with our official guides.</p>
-    <div class="d-flex flex-wrap align-items-center justify-content-center gap-4 mt-4">
+    <div class="d-flex flex-wrap justify-content-center align-items-center mt-4 gap-4">
       <a
         class="d-flex flex-column align-items-center text-decoration-none animate-img"
         href={getVersionedDocsPath('getting-started/webpack/')}
diff --git a/site/src/components/home/Icons.astro b/site/src/components/home/Icons.astro
index 4991dab599af..dc244f2bd984 100644
--- a/site/src/components/home/Icons.astro
+++ b/site/src/components/home/Icons.astro
@@ -4,9 +4,9 @@ import CircleSquareIcon from '@components/icons/CircleSquareIcon.astro'
 import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
 ---
 
-<section class="row g-3 g-md-5 pb-md-5 mb-5 align-items-center">
+<section class="row g-3 g-md-5 align-items-center mb-5 pb-md-5">
   <div class="col-lg-6">
-    <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-teal-rgb);">
+    <div class="d-inline-block mb-3 masthead-followup-icon" style="--bg-rgb: var(--bd-teal-rgb);">
       <CircleSquareIcon height={32} width={32} />
     </div>
     <h2 class="display-5 mb-3 fw-semibold lh-sm">Personalize it with Bootstrap&nbsp;Icons</h2>
@@ -15,7 +15,7 @@ import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
       more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them
       as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS.
     </p>
-    <p class="d-flex lead fw-normal mb-md-0">
+    <p class="lead d-flex mb-md-0 fw-normal">
       <a href={getConfig().icons} class="icon-link icon-link-hover fw-semibold">
         Get Bootstrap Icons
         <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
diff --git a/site/src/components/home/MastHead.astro b/site/src/components/home/MastHead.astro
index f9054bac34fe..bd6aa267226d 100644
--- a/site/src/components/home/MastHead.astro
+++ b/site/src/components/home/MastHead.astro
@@ -6,16 +6,16 @@ import Code from '@components/shortcodes/Code.astro'
 import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
 ---
 
-<div class="bd-masthead mb-3" id="content">
+<div class="mb-3 bd-masthead" id="content">
   <div class="container-xxl 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"
+        class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 lh-sm text-decoration-none text-dark"
         href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol"
         rel="noopener"
         target="_blank"
       >
-        <span class="d-sm-inline-flex align-items-center gap-1 py-2 px-3 me-2 mb-2 mb-lg-0 rounded-5 masthead-notice">
+        <span class="d-sm-inline-flex align-items-center me-2 mb-2 mb-lg-0 px-3 py-2 gap-1 rounded-5 masthead-notice">
           Get Security Updates for Bootstrap 3 &amp; 4
           <svg class="bi" style="width: 20px; height: 20px; margin-block: -2px;" aria-hidden="true"
             ><use xlink:href="#arrow-right-short"></use></svg
@@ -35,19 +35,19 @@ import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
         Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid
         system and components, and bring projects to life with powerful JavaScript plugins.
       </p>
-      <div class="d-flex flex-column flex-lg-row align-items-md-stretch justify-content-md-center gap-3 mb-4">
-        <div class="d-inline-block v-align-middle fs-5">
+      <div class="d-flex flex-column flex-lg-row justify-content-md-center align-items-md-stretch mb-4 gap-3">
+        <div class="d-inline-block fs-5 v-align-middle">
           <Code code={`npm i bootstrap@${getConfig().current_version}`} lang="sh" />
         </div>
         <a
           href={getVersionedDocsPath('getting-started/introduction')}
-          class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold"
+          class="btn btn-lg btn-bd-primary d-flex justify-content-center align-items-center fw-semibold bd-btn-lg"
         >
-          <svg class="bi me-2" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
+          <svg class="me-2 bi" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
           Read the docs
         </a>
       </div>
-      <p class="text-body-secondary mb-0">
+      <p class="mb-0 text-body-secondary">
         Currently <strong>v{getConfig().current_version}</strong>
         <span class="px-1">&middot;</span>
         <a href={getVersionedDocsPath('getting-started/download')} class="link-secondary">Download</a>
diff --git a/site/src/components/home/Plugins.astro b/site/src/components/home/Plugins.astro
index 236ac5a151d6..730e331d64b0 100644
--- a/site/src/components/home/Plugins.astro
+++ b/site/src/components/home/Plugins.astro
@@ -6,10 +6,10 @@ import Code from '@shortcodes/Code.astro'
 const plugins = getData('plugins')
 ---
 
-<section class="pb-md-5 mb-5">
+<section class="mb-5 pb-md-5">
   <div class="col-lg-8 mb-5">
-    <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-warning-rgb);">
-      <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#plugin"></use></svg>
+    <div class="d-inline-block mb-3 masthead-followup-icon" style="--bg-rgb: var(--bs-warning-rgb);">
+      <svg class="fs-1 bi" aria-hidden="true"><use xlink:href="#plugin"></use></svg>
     </div>
     <h2 class="display-5 mb-3 fw-semibold lh-sm">Powerful JavaScript plugins without&nbsp;jQuery</h2>
     <p class="lead fw-normal">
@@ -17,7 +17,7 @@ const plugins = getData('plugins')
       jQuery. Bootstrap's JavaScript is HTML-first, meaning most plugins are added with <code>data</code> attributes in your
       HTML. Need more control? Include individual plugins programmatically.
     </p>
-    <p class="d-flex lead fw-normal mb-md-0">
+    <p class="lead d-flex mb-md-0 fw-normal">
       <a href={getVersionedDocsPath('getting-started/javascript')} class="icon-link icon-link-hover fw-semibold">
         Learn more about Bootstrap JavaScript
         <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
@@ -31,7 +31,7 @@ const plugins = getData('plugins')
         Why write more JavaScript when you can write HTML? Nearly all of Bootstrap's JavaScript plugins feature a
         first-class data API, allowing you to use JavaScript just by adding <code>data</code> attributes.
       </p>
-      <div class="p-4 mb-3 border rounded-3">
+      <div class="border mb-3 p-4 rounded-3">
         <div class="dropdown">
           <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
             Dropdown
diff --git a/site/src/components/shortcodes/AddedIn.astro b/site/src/components/shortcodes/AddedIn.astro
index d9a26ce50e7c..0f846f8040b7 100644
--- a/site/src/components/shortcodes/AddedIn.astro
+++ b/site/src/components/shortcodes/AddedIn.astro
@@ -11,6 +11,6 @@ const { version } = Astro.props
 ---
 
 <small
-  class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2"
+  class="d-inline-flex border border-success-subtle mb-3 px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle rounded-2"
   >Added in v{version}</small
 >
diff --git a/site/src/components/shortcodes/DeprecatedIn.astro b/site/src/components/shortcodes/DeprecatedIn.astro
index 50ba42b95d0d..382d3f6ccef1 100644
--- a/site/src/components/shortcodes/DeprecatedIn.astro
+++ b/site/src/components/shortcodes/DeprecatedIn.astro
@@ -11,7 +11,7 @@ const { version } = Astro.props
 ---
 
 <small
-  class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-2"
+  class="d-inline-flex border border-warning-subtle mb-3 px-2 py-1 fw-semibold text-warning-emphasis bg-warning-subtle rounded-2"
 >
   Deprecated in v{version}
 </small>
diff --git a/site/src/components/shortcodes/JsDocs.astro b/site/src/components/shortcodes/JsDocs.astro
index 4430f21f885f..119afff94775 100644
--- a/site/src/components/shortcodes/JsDocs.astro
+++ b/site/src/components/shortcodes/JsDocs.astro
@@ -53,9 +53,9 @@ try {
 ---
 
 <Code containerClass="bd-example-snippet bd-code-snippet bd-file-ref" code={content} lang="js">
-  <div slot="pre" class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
+  <div slot="pre" class="d-flex border-bottom align-items-center py-1 pe-2 ps-3 highlight-toolbar">
     <a
-      class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small"
+      class="link-secondary font-monospace link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small"
       href={`${getConfig().repo}/blob/v${getConfig().current_version}/${file}`.replaceAll('\\', '/')}
     >
       {file}
diff --git a/site/src/components/shortcodes/ScssDocs.astro b/site/src/components/shortcodes/ScssDocs.astro
index 4eaa8ca01f50..2aebb27af5d5 100644
--- a/site/src/components/shortcodes/ScssDocs.astro
+++ b/site/src/components/shortcodes/ScssDocs.astro
@@ -55,9 +55,9 @@ try {
 ---
 
 <Code containerClass="bd-example-snippet bd-file-ref" code={content} lang="scss">
-  <div slot="pre" class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
+  <div slot="pre" class="d-flex border-bottom align-items-center py-1 pe-2 ps-3 highlight-toolbar">
     <a
-      class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small"
+      class="link-secondary font-monospace link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small"
       href={`${getConfig().repo}/blob/v${getConfig().current_version}/${file}`.replaceAll('\\', '/')}
     >
       {file}
diff --git a/site/src/layouts/BaseLayout.astro b/site/src/layouts/BaseLayout.astro
index c310972a107f..d97255d06d1f 100644
--- a/site/src/layouts/BaseLayout.astro
+++ b/site/src/layouts/BaseLayout.astro
@@ -44,7 +44,7 @@ const bodyProps = overrides?.body ?? {}
 const mainProps = overrides?.main ?? {}
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" data-bs-theme="auto">
   <head>
     <Head
diff --git a/site/src/layouts/ExamplesLayout.astro b/site/src/layouts/ExamplesLayout.astro
index 368c0a72c4ed..3f9b6f858afe 100644
--- a/site/src/layouts/ExamplesLayout.astro
+++ b/site/src/layouts/ExamplesLayout.astro
@@ -127,7 +127,7 @@ const htmlProps: HTMLAttributes<'html'> = direction === 'rtl' ? { lang: 'ar', di
   <body class:list={body_class}>
     <Icons />
 
-    <div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
+    <div class="dropdown position-fixed bottom-0 end-0 me-3 mb-3 bd-mode-toggle">
       <ThemeToggler layout="examples" />
     </div>
 
diff --git a/site/src/layouts/SingleLayout.astro b/site/src/layouts/SingleLayout.astro
index 7103aa4a2d49..014959b869cb 100644
--- a/site/src/layouts/SingleLayout.astro
+++ b/site/src/layouts/SingleLayout.astro
@@ -12,11 +12,11 @@ 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">
+    <header class="border-bottom py-5">
+      <div class="container-xxl pt-md-1 pb-md-4 bd-gutter">
         <div class="row">
           <div class="col-xl-8">
-            <h1 class="bd-title mt-0">{title}</h1>
+            <h1 class="mt-0 bd-title">{title}</h1>
             <p class="bd-subtitle">{description}</p>
             <slot name="header-content" />
           </div>
@@ -27,7 +27,7 @@ const { description, title } = Astro.props
       </div>
     </header>
 
-    <main class="bd-content order-1 py-5" id="content">
+    <main class="order-1 py-5 bd-content" id="content">
       <div class="container-xxl bd-gutter">
         <slot />
         <slot name="main-content" />
diff --git a/site/src/layouts/partials/ThemeToggler.astro b/site/src/layouts/partials/ThemeToggler.astro
index ab8ca4fcc6f3..a9eda356b15b 100644
--- a/site/src/layouts/partials/ThemeToggler.astro
+++ b/site/src/layouts/partials/ThemeToggler.astro
@@ -17,7 +17,7 @@ const { layout } = Astro.props
   {...layout !== 'examples' ? { 'data-bs-display': 'static' } : {}}
   aria-label="Toggle theme (auto)"
 >
-  <svg class="bi my-1 theme-icon-active" aria-hidden="true"><use href="#circle-half"></use></svg>
+  <svg class="my-1 bi theme-icon-active" aria-hidden="true"><use href="#circle-half"></use></svg>
   <span class=`${layout === 'examples' ? 'visually-hidden' : 'd-lg-none ms-2'}` id="bd-theme-text">Toggle theme</span>
 </button>
 <ul class=`dropdown-menu dropdown-menu-end${layout === 'examples' ? ' shadow' : ''}` aria-labelledby="bd-theme-text">
@@ -28,9 +28,9 @@ const { layout } = Astro.props
       data-bs-theme-value="light"
       aria-pressed="false"
     >
-      <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#sun-fill"></use></svg>
+      <svg class="opacity-50 me-2 bi" aria-hidden="true"><use href="#sun-fill"></use></svg>
       Light
-      <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
+      <svg class="d-none ms-auto bi" aria-hidden="true"><use href="#check2"></use></svg>
     </button>
   </li>
   <li>
@@ -40,9 +40,9 @@ const { layout } = Astro.props
       data-bs-theme-value="dark"
       aria-pressed="false"
     >
-      <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#moon-stars-fill"></use></svg>
+      <svg class="opacity-50 me-2 bi" aria-hidden="true"><use href="#moon-stars-fill"></use></svg>
       Dark
-      <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
+      <svg class="d-none ms-auto bi" aria-hidden="true"><use href="#check2"></use></svg>
     </button>
   </li>
   <li>
@@ -52,9 +52,9 @@ const { layout } = Astro.props
       data-bs-theme-value="auto"
       aria-pressed="true"
     >
-      <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#circle-half"></use></svg>
+      <svg class="opacity-50 me-2 bi" aria-hidden="true"><use href="#circle-half"></use></svg>
       Auto
-      <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
+      <svg class="d-none ms-auto bi" aria-hidden="true"><use href="#check2"></use></svg>
     </button>
   </li>
 </ul>
diff --git a/site/src/pages/404.astro b/site/src/pages/404.astro
index 021ac2838304..b187981812b4 100644
--- a/site/src/pages/404.astro
+++ b/site/src/pages/404.astro
@@ -10,7 +10,7 @@ import BaseLayout from '@layouts/BaseLayout.astro'
   robots="noindex,follow"
   title="404 - File not found"
 >
-  <div class="text-center py-5">
+  <div class="py-5 text-center">
     <h1 class="display-1">404</h1>
     <h2>File not found</h2>
   </div>
diff --git a/site/src/pages/docs/[version]/examples/index.astro b/site/src/pages/docs/[version]/examples/index.astro
index 03ab5af4192b..50ebc2bb6f1e 100644
--- a/site/src/pages/docs/[version]/examples/index.astro
+++ b/site/src/pages/docs/[version]/examples/index.astro
@@ -18,12 +18,12 @@ export function getStaticPaths() {
   <div class="d-flex flex-column flex-md-row gap-3" slot="header-content">
     <a
       href={getConfig().download.dist_examples}
-      class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold"
+      class="btn btn-lg btn-bd-primary d-flex justify-content-center align-items-center fw-semibold bd-btn-lg"
     >
-      <svg class="bi me-2" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
+      <svg class="me-2 bi" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
       Download examples
     </a>
-    <a href={getConfig().download.source} class="btn btn-lg bd-btn-lg btn-outline-secondary"> Download source code</a>
+    <a href={getConfig().download.source} class="btn btn-lg btn-outline-secondary bd-btn-lg"> Download source code</a>
   </div>
   <Fragment slot="main-content">
     <ExamplesMain />