feat(docs): add prettier-plugin-bootstrap for automatic class sorting

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",

site/.prettierrc.json

@@ -5,5 +5,6 @@
   "printWidth": 120,
   "semi": false,
   "singleQuote": true,
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-bootstrap"]
 }

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>

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)

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">

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 }]}

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,36 +91,36 @@ 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"
           >
             <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>

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">

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}`}
       >

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>

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>

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>

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/')}