v6: docs - Update utility class names in docs and examples

Replace deprecated utility classes with the updated names across site docs and examples. Changes include switching text-* classes to fg-*, text-bg-* badge classes to theme-*, and replacing clearfix with d-flow-root. Affected files: cover and drawer-navbar examples, spinner example, reboot, accessibility, columns docs, and versions page to keep examples consistent with the new utility naming.

Add btn-icon class to navbar toggler

Add the btn-icon utility class to the navbar toggler button in the navbar-fixed example to apply icon button styling. This change updates site/src/assets/examples/navbar-fixed/index.astro and keeps the existing SVG toggler markup and collapse behavior unchanged.

Author: coliff

site/src/assets/examples/blog/index.astro

@@ -21,13 +21,13 @@ import Placeholder from "@shortcodes/Placeholder.astro"
   <header class="border-bottom lh-1 py-3">
     <div class="row flex-nowrap justify-content-between align-items-center">
       <div class="col-4 pt-1">
-        <a class="link-secondary" href="#">Subscribe</a>
+        <a class="theme-secondary" href="#">Subscribe</a>
       </div>
       <div class="col-4 text-center">
         <a class="blog-header-logo text-body-emphasis text-decoration-none" href="#">Large</a>
       </div>
       <div class="col-4 d-flex justify-content-end align-items-center">
-        <a class="link-secondary" href="#" aria-label="Search">
+        <a class="theme-secondary" href="#" aria-label="Search">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2"/></svg>
         </a>
         <a class="btn-outline theme-secondary btn-sm" href="#">Sign up</a>

site/src/assets/examples/dashboard/index.astro

@@ -128,7 +128,7 @@ export const extra_js = [
 
           <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 fg-2 text-uppercase">
             <span>Saved reports</span>
-            <a class="link-secondary" href="#" aria-label="Add a new report">
+            <a class="theme-secondary" href="#" aria-label="Add a new report">
               <svg class="bi" aria-hidden="true"><use href="#plus-circle"/></svg>
             </a>
           </h6>

site/src/assets/examples/drawer-navbar/index.astro

@@ -52,7 +52,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
     <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
     <a class="nav-link" href="#">
       Friends
-      <span class="badge text-bg-light rounded-pill align-text-bottom">27</span>
+      <span class="badge theme-secondary rounded-pill align-text-bottom">27</span>
     </a>
     <a class="nav-link" href="#">Explore</a>
     <a class="nav-link" href="#">Suggestions</a>

site/src/assets/examples/headers/index.astro

@@ -72,7 +72,7 @@ export const extra_css = ['headers.css']
       </div>
 
       <ul class="nav col-12 md:col-auto mb-2 justify-content-center md:mb-0">
-        <li><a href="#" class="nav-link px-2 link-secondary">Home</a></li>
+        <li><a href="#" class="nav-link px-2 theme-secondary">Home</a></li>
         <li><a href="#" class="nav-link px-2">Features</a></li>
         <li><a href="#" class="nav-link px-2">Pricing</a></li>
         <li><a href="#" class="nav-link px-2">FAQs</a></li>
@@ -125,7 +125,7 @@ export const extra_css = ['headers.css']
         </a>
 
         <ul class="nav col-12 lg:col-auto lg:me-auto mb-2 justify-content-center md:mb-0">
-          <li><a href="#" class="nav-link px-2 link-secondary">Overview</a></li>
+          <li><a href="#" class="nav-link px-2 theme-secondary">Overview</a></li>
           <li><a href="#" class="nav-link px-2 link-body-emphasis">Inventory</a></li>
           <li><a href="#" class="nav-link px-2 link-body-emphasis">Customers</a></li>
           <li><a href="#" class="nav-link px-2 link-body-emphasis">Products</a></li>

site/src/assets/examples/navbar-fixed/index.astro

@@ -8,7 +8,7 @@ export const extra_css = ['navbar-fixed.css']
 <nav class="navbar md:navbar-expand navbar-dark fixed-top bg-dark">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Fixed navbar</a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
       <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
     </button>
     <div class="collapse navbar-collapse" id="navbarCollapse">

site/src/assets/examples/navbars-drawer/index.astro

@@ -9,7 +9,7 @@ export const extra_css = ['navbars-drawer.css']
   <nav class="navbar navbar-dark bg-dark" aria-label="Dark drawer navbar">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Dark drawer navbar</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbarDark" aria-controls="drawerNavbarDark" aria-label="Toggle navigation">
+      <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbarDark" aria-controls="drawerNavbarDark" aria-label="Toggle navigation">
         <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
       </button>
       <dialog class="drawer drawer-end text-bg-dark" tabindex="-1" id="drawerNavbarDark" aria-labelledby="drawerNavbarDarkLabel">
@@ -49,7 +49,7 @@ export const extra_css = ['navbars-drawer.css']
   <nav class="navbar bg-body-tertiary" aria-label="Light drawer navbar">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Light drawer navbar</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbarLight" aria-controls="drawerNavbarLight" aria-label="Toggle navigation">
+      <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbarLight" aria-controls="drawerNavbarLight" aria-label="Toggle navigation">
         <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
       </button>
       <dialog class="drawer drawer-end" tabindex="-1" id="drawerNavbarLight" aria-labelledby="drawerNavbarLightLabel">
@@ -89,7 +89,7 @@ export const extra_css = ['navbars-drawer.css']
   <nav class="navbar lg:navbar-expand navbar-dark bg-dark" aria-label="Drawer navbar large">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Responsive drawer navbar</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbar2" aria-controls="drawerNavbar2" aria-label="Toggle navigation">
+      <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbar2" aria-controls="drawerNavbar2" aria-label="Toggle navigation">
         <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
       </button>
       <dialog class="drawer drawer-end text-bg-dark" tabindex="-1" id="drawerNavbar2" aria-labelledby="drawerNavbar2Label">

site/src/assets/examples/pricing/index.astro

@@ -155,30 +155,30 @@ export const extra_css = ['pricing.css']
       <div class="col-6 md:col">
         <h5>Features</h5>
         <ul class="list-unstyled text-small">
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Cool stuff</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Random feature</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team feature</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Stuff for developers</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another one</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Last time</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Cool stuff</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Random feature</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Team feature</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Stuff for developers</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Another one</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Last time</a></li>
         </ul>
       </div>
       <div class="col-6 md:col">
         <h5>Resources</h5>
         <ul class="list-unstyled text-small">
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource name</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another resource</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Final resource</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Resource</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Resource name</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Another resource</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Final resource</a></li>
         </ul>
       </div>
       <div class="col-6 md:col">
         <h5>About</h5>
         <ul class="list-unstyled text-small">
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Locations</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Privacy</a></li>
-          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Terms</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Team</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Locations</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Privacy</a></li>
+          <li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Terms</a></li>
         </ul>
       </div>
     </div>

site/src/assets/examples/product/index.astro

@@ -148,39 +148,39 @@ export const extra_css = ['product.css']
     <div class="col-6 md:col">
       <h5>Features</h5>
       <ul class="list-unstyled text-small">
-        <li><a class="link-secondary text-decoration-none" href="#">Cool stuff</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Random feature</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Team feature</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Stuff for developers</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Another one</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Last time</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Cool stuff</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Random feature</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Team feature</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Stuff for developers</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Another one</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Last time</a></li>
       </ul>
     </div>
     <div class="col-6 md:col">
       <h5>Resources</h5>
       <ul class="list-unstyled text-small">
-        <li><a class="link-secondary text-decoration-none" href="#">Resource name</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Resource</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Another resource</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Final resource</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Resource name</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Resource</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Another resource</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Final resource</a></li>
       </ul>
     </div>
     <div class="col-6 md:col">
       <h5>Resources</h5>
       <ul class="list-unstyled text-small">
-        <li><a class="link-secondary text-decoration-none" href="#">Business</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Education</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Government</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Gaming</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Business</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Education</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Government</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Gaming</a></li>
       </ul>
     </div>
     <div class="col-6 md:col">
       <h5>About</h5>
       <ul class="list-unstyled text-small">
-        <li><a class="link-secondary text-decoration-none" href="#">Team</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Locations</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Privacy</a></li>
-        <li><a class="link-secondary text-decoration-none" href="#">Terms</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Team</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Locations</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Privacy</a></li>
+        <li><a class="theme-secondary text-decoration-none" href="#">Terms</a></li>
       </ul>
     </div>
   </div>

site/src/components/home/MastHead.astro

@@ -50,9 +50,9 @@ import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
       <p class="fg-2 mb-0">
         Currently <strong>v{getConfig().current_version}</strong>
         <span class="px-1">&middot;</span>
-        <a href={getVersionedDocsPath('getting-started/install')} class="link-secondary">Download</a>
+        <a href={getVersionedDocsPath('getting-started/install')} class="theme-secondary">Download</a>
         <span class="px-1">&middot;</span>
-        <a href="/docs/versions/" class="link-secondary text-nowrap">All releases</a>
+        <a href="/docs/versions/" class="theme-secondary text-nowrap">All releases</a>
       </p>
       <Ads />
     </div>

site/src/content/docs/components/navbar.mdx

@@ -246,7 +246,7 @@ Place various form controls and components within a navbar:
     <div class="container-fluid">
       <form class="d-flex" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
-        <button class="btn btn-outline-success" type="submit">Search</button>
+        <button class="btn-outline theme-success" type="submit">Search</button>
       </form>
     </div>
   </nav>`} />
@@ -258,7 +258,7 @@ Immediate child elements of `.navbar` use flex layout and will default to `justi
       <a class="navbar-brand">Navbar</a>
       <form class="d-flex" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
-        <button class="btn btn-outline-success" type="submit">Search</button>
+        <button class="btn-outline theme-success" type="submit">Search</button>
       </form>
     </div>
   </nav>`} />
@@ -278,8 +278,8 @@ Various buttons are supported as part of these navbar forms, too. This is also a
 
 <Example code={`<nav class="navbar bg-1 fg-2">
     <form class="container-fluid justify-content-start">
-      <button class="btn btn-outline-success me-2" type="button">Main button</button>
-      <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
+      <button class="btn-outline theme-success me-2" type="button">Main button</button>
+      <button class="btn-outline theme-secondary btn-sm" type="button">Smaller button</button>
     </form>
   </nav>`} />
 
@@ -433,7 +433,7 @@ Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass a
         </ul>
         <form class="d-flex" role="search">
           <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
-          <button class="btn btn-outline theme-secondary" type="submit">Search</button>
+          <button class="btn-outline theme-secondary" type="submit">Search</button>
         </form>
       </div>
     </dialog>
@@ -468,7 +468,7 @@ Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass a
         </ul>
         <form class="d-flex" role="search">
           <input class="form-control me-2" data-bs-theme="light" type="search" placeholder="Search" aria-label="Search"/>
-          <button class="btn btn-solid theme-inverse" type="submit">Search</button>
+          <button class="btn-solid theme-inverse" type="submit">Search</button>
         </form>
       </div>
     </dialog>
@@ -503,7 +503,7 @@ Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass a
         </ul>
         <form class="d-flex" role="search">
           <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
-          <button class="btn btn-outline-primary" type="submit">Search</button>
+          <button class="btn-outline theme-primary" type="submit">Search</button>
         </form>
       </div>
     </dialog>
@@ -645,7 +645,7 @@ With no `.navbar-brand` shown (hidden inside the drawer):
           </ul>
           <form class="d-flex" role="search">
             <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
-            <button class="btn btn-outline-success" type="submit">Search</button>
+            <button class="btn-outline theme-success" type="submit">Search</button>
           </form>
         </div>
       </dialog>
@@ -673,7 +673,7 @@ With a brand name shown on the left and toggler on the right:
           </ul>
           <form class="d-flex" role="search">
             <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
-            <button class="btn btn-outline-success" type="submit">Search</button>
+            <button class="btn-outline theme-success" type="submit">Search</button>
           </form>
         </div>
       </dialog>
@@ -701,7 +701,7 @@ With a toggler on the left and brand name on the right:
           </ul>
           <form class="d-flex" role="search">
             <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
-            <button class="btn btn-outline-success" type="submit">Search</button>
+            <button class="btn-outline theme-success" type="submit">Search</button>
           </form>
         </div>
       </dialog>