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

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>

Author: pierluigilenoci

package-lock.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",

package.json

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

site/.prettierrc.json

@@ -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/Ads.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/DocsSidebar.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/footer/Footer.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/LinkItem.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/Navigation.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/Skippy.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}`}
       >