From: Christian Oliff <christian_oliff@trimble.com>
Date: Fri, 29 May 2026 22:51:35 +0000 (+0900)
Subject: v6: Refine examples - headings, themes, and layout (#42432)
X-Git-Url: http://git.ipfire.org/gitweb/index.cgi?a=commitdiff_plain;h=d836c38e90ca7718fc035adeb2280193878ee63c;p=thirdparty%2Fbootstrap.git

v6: Refine examples - headings, themes, and layout (#42432)

Reduce heading sizes and remove emphasis in feature examples. Unify
dark-theme styling, improve accessibility and layout, update Chart.js,
and replace text-white/text-secondary with fg-* utilities across
example pages.

Co-authored-by: Cursor <cursoragent@cursor.com>
---

diff --git a/site/src/assets/examples/album/index.astro b/site/src/assets/examples/album/index.astro
index dd35c20f0f..1271169f58 100644
--- a/site/src/assets/examples/album/index.astro
+++ b/site/src/assets/examples/album/index.astro
@@ -6,15 +6,15 @@ import Placeholder from "@shortcodes/Placeholder.astro"
 ---
 
 <header data-bs-theme="dark">
-  <div class="collapse text-bg-dark" id="navbarHeader">
+  <div class="collapse bg-black" id="navbarHeader">
     <div class="container">
       <div class="row">
         <div class="sm:col-8 md:col-7 py-4">
-          <h4>About</h4>
+          <h4 class="fg-white">About</h4>
           <p class="fg-2">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
         </div>
         <div class="sm:col-4 md:offset-1 py-4">
-          <h4>Contact</h4>
+          <h4 class="fg-white">Contact</h4>
           <ul class="list-unstyled">
             <li><a href="#" class="fg-white">Follow on X</a></li>
             <li><a href="#" class="fg-white">Like on Facebook</a></li>
@@ -24,7 +24,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
       </div>
     </div>
   </div>
-  <div class="navbar navbar-dark bg-dark shadow-sm">
+  <nav class="navbar navbar-dark bg-dark shadow-sm" aria-label="Album navigation">
     <div class="container">
       <a href="#" class="navbar-brand d-flex align-items-center">
         <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" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
@@ -34,7 +34,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
         <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>
-  </div>
+  </nav>
 </header>
 
 <main>
diff --git a/site/src/assets/examples/cover/index.astro b/site/src/assets/examples/cover/index.astro
index 8d7d9fb4ce..b827fa463b 100644
--- a/site/src/assets/examples/cover/index.astro
+++ b/site/src/assets/examples/cover/index.astro
@@ -26,6 +26,6 @@ export const body_class = 'd-flex h-100 text-center text-bg-dark'
   </main>
 
   <footer class="mt-auto fg-secondary">
-    <p>Cover template for <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, by <a href="https://x.com/mdo" class="text-white">@mdo</a>.</p>
+    <p>Cover template for <a href="https://getbootstrap.com/" class="fg-white">Bootstrap</a>, by <a href="https://x.com/mdo" class="fg-white">@mdo</a>.</p>
   </footer>
 </div>
diff --git a/site/src/assets/examples/dashboard/index.astro b/site/src/assets/examples/dashboard/index.astro
index 8fa1d62951..9c5a1dee1b 100644
--- a/site/src/assets/examples/dashboard/index.astro
+++ b/site/src/assets/examples/dashboard/index.astro
@@ -2,7 +2,7 @@
 export const title = 'Dashboard Template'
 export const extra_css = ['dashboard.css']
 export const extra_js = [
-  { src: 'https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js', integrity: 'sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp'},
+  { src: 'https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.js', integrity: 'sha256-7MPNHuuMNNIXjj9Z/WPsWj2ENYwRcwrwuZWNyIbXZSo='},
   { src: 'dashboard.js'}
 ]
 ---
@@ -74,13 +74,13 @@ export const extra_js = [
   </ul>
 
   <div id="navbarSearch" class="navbar-search w-100 collapse">
-    <input class="form-control w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
+    <input class="form-control w-100 rounded-0 border-0" type="search" placeholder="Search" aria-label="Search">
   </div>
 </header>
 
 <div class="container-fluid">
   <div class="row">
-    <div class="sidebar border border-right md:col-3 lg:col-2 p-0 bg-body-tertiary">
+    <div class="sidebar border border-end md:col-3 lg:col-2 p-0 bg-body-tertiary">
       <dialog class="md:drawer drawer-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
         <div class="drawer-header">
           <h5 class="drawer-title" id="sidebarMenuLabel">Company name</h5>
diff --git a/site/src/assets/examples/dialogs/index.astro b/site/src/assets/examples/dialogs/index.astro
index c5ae7ae2dd..22261de5f3 100644
--- a/site/src/assets/examples/dialogs/index.astro
+++ b/site/src/assets/examples/dialogs/index.astro
@@ -27,7 +27,7 @@ export const extra_css = ['dialogs.css']
 
 <!-- Modal sheet style -->
 <div class="d-flex flex-column p-4 gap-4 md:py-5 align-items-center justify-content-center">
-  <dialog class="dialog dialog-example rounded-4 shadow w-340px" open data-bs-theme="light">
+  <dialog class="dialog dialog-example rounded-4 shadow w-340px" open>
     <div class="dialog-header border-0">
       <h1 class="dialog-title">Modal title</h1>
       <button type="button" class="btn-close" aria-label="Close"></button>
@@ -46,7 +46,7 @@ export const extra_css = ['dialogs.css']
 
 <!-- Confirmation dialog -->
 <div class="d-flex flex-column p-4 gap-4 md:py-5 align-items-center justify-content-center">
-  <dialog class="dialog dialog-example rounded-4 shadow w-340px" open data-bs-theme="light">
+  <dialog class="dialog dialog-example rounded-4 shadow w-340px" open>
     <div class="dialog-body text-center py-4">
       <h5 class="fw-bold mb-2">Enable this setting?</h5>
       <p class="fg-2 mb-0">You can always change your mind in your account settings.</p>
@@ -62,9 +62,9 @@ export const extra_css = ['dialogs.css']
 
 <!-- What's new dialog -->
 <div class="d-flex flex-column p-4 gap-4 md:py-5 align-items-center justify-content-center">
-  <dialog class="dialog dialog-example rounded-4 shadow w-340px" open data-bs-theme="light">
+  <dialog class="dialog dialog-example rounded-4 shadow w-340px" open>
     <div class="dialog-header border-0 pt-4">
-      <h1 class="dialog-title fs-3xl fw-bold">What's new</h1>
+      <h1 class="dialog-title fs-2xl fw-bold">What's new</h1>
     </div>
     <div class="dialog-body">
       <ul class="list-unstyled mb-0">
@@ -101,9 +101,9 @@ export const extra_css = ['dialogs.css']
 
 <!-- Sign up dialog -->
 <div class="d-flex flex-column p-4 gap-4 md:py-5 align-items-center justify-content-center">
-  <dialog class="dialog dialog-example rounded-4 shadow w-340px" open data-bs-theme="light">
+  <dialog class="dialog dialog-example rounded-4 shadow w-340px" open>
     <div class="dialog-header border-0">
-      <h1 class="dialog-title">Sign up for free</h1>
+      <h1 class="dialog-title fs-xl fw-bold">Sign up for free</h1>
       <button type="button" class="btn-close" aria-label="Close"></button>
     </div>
     <div class="dialog-body pt-0">
diff --git a/site/src/assets/examples/drawer-navbar/index.astro b/site/src/assets/examples/drawer-navbar/index.astro
index 7cdfc80840..0ace3088b2 100644
--- a/site/src/assets/examples/drawer-navbar/index.astro
+++ b/site/src/assets/examples/drawer-navbar/index.astro
@@ -65,7 +65,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
 </div>
 
 <main class="container">
-  <div class="d-flex align-items-center p-3 my-3 text-white bg-purple rounded shadow-sm">
+  <div class="d-flex align-items-center p-3 my-3 fg-white bg-purple rounded shadow-sm">
     <img class="me-3" src={getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} alt="" width="48" height="38">
     <div class="lh-1">
       <h1 class="h6 mb-0 fg-white lh-1">Bootstrap</h1>
diff --git a/site/src/assets/examples/features/index.astro b/site/src/assets/examples/features/index.astro
index f9a91c395a..0c1aee4b45 100644
--- a/site/src/assets/examples/features/index.astro
+++ b/site/src/assets/examples/features/index.astro
@@ -65,7 +65,7 @@ export const extra_css = ['features.css']
         <div class="feature-icon d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-3xl mb-3">
           <svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#collection"/></svg>
         </div>
-        <h3 class="fs-3xl text-body-emphasis">Featured title</h3>
+        <h3 class="fs-2xl">Featured title</h3>
         <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
         <a href="#" class="icon-link">
           Call to action
@@ -76,7 +76,7 @@ export const extra_css = ['features.css']
         <div class="feature-icon d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-3xl mb-3">
           <svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#people-circle"/></svg>
         </div>
-        <h3 class="fs-3xl text-body-emphasis">Featured title</h3>
+        <h3 class="fs-2xl">Featured title</h3>
         <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
         <a href="#" class="icon-link">
           Call to action
@@ -87,7 +87,7 @@ export const extra_css = ['features.css']
         <div class="feature-icon d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-3xl mb-3">
           <svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#toggles2"/></svg>
         </div>
-        <h3 class="fs-3xl text-body-emphasis">Featured title</h3>
+        <h3 class="fs-2xl">Featured title</h3>
         <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
         <a href="#" class="icon-link">
           Call to action
@@ -103,11 +103,11 @@ export const extra_css = ['features.css']
     <h2 class="pb-2 border-bottom">Hanging icons</h2>
     <div class="row g-4 py-5 row-cols-1 lg:row-cols-3">
       <div class="col d-flex align-items-start">
-        <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-xl flex-shrink-0 me-3">
+        <div class="icon-square bg-body-secondary d-inline-flex align-items-center justify-content-center fs-xl flex-shrink-0 me-3">
           <svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#toggles2"/></svg>
         </div>
         <div>
-          <h3 class="fs-3xl text-body-emphasis">Featured title</h3>
+          <h3 class="fs-2xl">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
           <a href="#" class="btn-solid theme-primary">
             Primary button
@@ -115,11 +115,11 @@ export const extra_css = ['features.css']
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-xl flex-shrink-0 me-3">
+        <div class="icon-square bg-body-secondary d-inline-flex align-items-center justify-content-center fs-xl flex-shrink-0 me-3">
           <svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#cpu-fill"/></svg>
         </div>
         <div>
-          <h3 class="fs-3xl text-body-emphasis">Featured title</h3>
+          <h3 class="fs-2xl">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
           <a href="#" class="btn-solid theme-primary">
             Primary button
@@ -127,11 +127,11 @@ export const extra_css = ['features.css']
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-xl flex-shrink-0 me-3">
+        <div class="icon-square bg-body-secondary d-inline-flex align-items-center justify-content-center fs-xl flex-shrink-0 me-3">
           <svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#tools"/></svg>
         </div>
         <div>
-          <h3 class="fs-3xl text-body-emphasis">Featured title</h3>
+          <h3 class="fs-2xl">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
           <a href="#" class="btn-solid theme-primary">
             Primary button
@@ -149,7 +149,7 @@ export const extra_css = ['features.css']
     <div class="row row-cols-1 lg:row-cols-3 align-items-stretch g-4 py-5">
       <div class="col">
         <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');">
-          <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
+          <div class="d-flex flex-column h-100 p-5 pb-3 fg-white text-shadow-1">
             <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h3>
             <ul class="d-flex list-unstyled mt-auto">
               <li class="me-auto">
@@ -170,7 +170,7 @@ export const extra_css = ['features.css']
 
       <div class="col">
         <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');">
-          <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
+          <div class="d-flex flex-column h-100 p-5 pb-3 fg-white text-shadow-1">
             <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h3>
             <ul class="d-flex list-unstyled mt-auto">
               <li class="me-auto">
@@ -221,56 +221,56 @@ export const extra_css = ['features.css']
       <div class="col d-flex align-items-start">
         <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#bootstrap"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
         <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#cpu-fill"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
         <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#calendar3"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
         <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#home"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
         <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#speedometer2"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
         <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#toggles2"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
         <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#geo-fill"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
         <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#tools"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
@@ -284,7 +284,7 @@ export const extra_css = ['features.css']
 
     <div class="row row-cols-1 md:row-cols-2 md:align-items-center g-5 py-5">
       <div class="col d-flex flex-column align-items-start gap-2">
-        <h2 class="fw-bold text-body-emphasis">Left-aligned title explaining these awesome features</h2>
+        <h2 class="fw-bold">Left-aligned title explaining these awesome features</h2>
         <p class="fg-2">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
         <a href="#" class="btn-solid theme-primary btn-lg">Primary button</a>
       </div>
@@ -297,7 +297,7 @@ export const extra_css = ['features.css']
                 <use href="#collection" />
               </svg>
             </div>
-            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
+            <h4 class="fw-semibold mb-0">Featured title</h4>
             <p class="fg-2">Paragraph of text beneath the heading to explain the heading.</p>
           </div>
 
@@ -307,7 +307,7 @@ export const extra_css = ['features.css']
                 <use href="#gear-fill" />
               </svg>
             </div>
-            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
+            <h4 class="fw-semibold mb-0">Featured title</h4>
             <p class="fg-2">Paragraph of text beneath the heading to explain the heading.</p>
           </div>
 
@@ -317,7 +317,7 @@ export const extra_css = ['features.css']
                 <use href="#speedometer" />
               </svg>
             </div>
-            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
+            <h4 class="fw-semibold mb-0">Featured title</h4>
             <p class="fg-2">Paragraph of text beneath the heading to explain the heading.</p>
           </div>
 
@@ -327,7 +327,7 @@ export const extra_css = ['features.css']
                 <use href="#table" />
               </svg>
             </div>
-            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
+            <h4 class="fw-semibold mb-0">Featured title</h4>
             <p class="fg-2">Paragraph of text beneath the heading to explain the heading.</p>
           </div>
         </div>
diff --git a/site/src/assets/examples/grid/index.astro b/site/src/assets/examples/grid/index.astro
index e8147faf38..541babc95e 100644
--- a/site/src/assets/examples/grid/index.astro
+++ b/site/src/assets/examples/grid/index.astro
@@ -172,7 +172,6 @@ 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>2xl</code> breakpoint.</p>
   </div>
 
   <div class="container themed-container text-center">.container</div>
diff --git a/site/src/assets/examples/headers/index.astro b/site/src/assets/examples/headers/index.astro
index 0dba47145c..ccfb7c17fb 100644
--- a/site/src/assets/examples/headers/index.astro
+++ b/site/src/assets/examples/headers/index.astro
@@ -91,16 +91,16 @@ export const extra_css = ['headers.css']
   <header class="p-3 bg-body fg-body" data-bs-theme="dark">
     <div class="container">
       <div class="d-flex flex-wrap align-items-center justify-content-center lg:justify-content-start">
-        <a href="/" class="d-flex align-items-center mb-2 lg:mb-0 text-white text-decoration-none">
+        <a href="/" class="d-flex align-items-center mb-2 lg:mb-0 fg-white text-decoration-none">
           <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
         </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 fg-secondary">Home</a></li>
-          <li><a href="#" class="nav-link px-2 text-white">Features</a></li>
-          <li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>
-          <li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
-          <li><a href="#" class="nav-link px-2 text-white">About</a></li>
+          <li><a href="#" class="nav-link px-2 fg-white">Features</a></li>
+          <li><a href="#" class="nav-link px-2 fg-white">Pricing</a></li>
+          <li><a href="#" class="nav-link px-2 fg-white">FAQs</a></li>
+          <li><a href="#" class="nav-link px-2 fg-white">About</a></li>
         </ul>
 
         <form class="col-12 lg:col-auto mb-3 lg:mb-0 lg:me-3" role="search">
@@ -237,7 +237,7 @@ export const extra_css = ['headers.css']
     <div class="px-3 py-2 text-bg-dark border-bottom">
       <div class="container">
         <div class="d-flex flex-wrap align-items-center justify-content-center lg:justify-content-start">
-          <a href="/" class="d-flex align-items-center my-2 lg:my-0 lg:me-auto text-white text-decoration-none">
+          <a href="/" class="d-flex align-items-center my-2 lg:my-0 lg:me-auto fg-body text-decoration-none">
             <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
           </a>
 
@@ -249,25 +249,25 @@ export const extra_css = ['headers.css']
               </a>
             </li>
             <li>
-              <a href="#" class="nav-link text-white">
+              <a href="#" class="nav-link fg-white">
                 <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#speedometer2"/></svg>
                 Dashboard
               </a>
             </li>
             <li>
-              <a href="#" class="nav-link text-white">
+              <a href="#" class="nav-link fg-white">
                 <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#table"/></svg>
                 Orders
               </a>
             </li>
             <li>
-              <a href="#" class="nav-link text-white">
+              <a href="#" class="nav-link fg-white">
                 <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#grid"/></svg>
                 Products
               </a>
             </li>
             <li>
-              <a href="#" class="nav-link text-white">
+              <a href="#" class="nav-link fg-white">
                 <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#people-circle"/></svg>
                 Customers
               </a>
diff --git a/site/src/assets/examples/heroes/index.astro b/site/src/assets/examples/heroes/index.astro
index 636bca3f98..b2ec32f868 100644
--- a/site/src/assets/examples/heroes/index.astro
+++ b/site/src/assets/examples/heroes/index.astro
@@ -112,11 +112,11 @@ export const extra_css = ['heroes.css']
 
   <div class="b-example-divider"></div>
 
-  <div class="bg-dark fg-secondary px-4 py-5 text-center">
+  <div class="bg-black fg-secondary px-4 py-5 text-center" data-bs-theme="dark">
     <div class="py-5">
-      <h1 class="display-5 fw-bold text-white">Dark color hero</h1>
+      <h1 class="display-5 fw-bold fg-white">Dark color hero</h1>
       <div class="lg:col-6 mx-auto">
-        <p class="fs-lg mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
+        <p class="mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
         <div class="d-grid gap-2 sm:d-flex sm:justify-content-center">
           <button type="button" class="btn-outline theme-info btn-lg px-4 sm:me-3">Custom button</button>
           <button type="button" class="btn-outline theme-secondary btn-lg px-4">Secondary</button>
diff --git a/site/src/assets/examples/navbar-fixed/index.astro b/site/src/assets/examples/navbar-fixed/index.astro
index 31061590fe..03a6ac981e 100644
--- a/site/src/assets/examples/navbar-fixed/index.astro
+++ b/site/src/assets/examples/navbar-fixed/index.astro
@@ -5,7 +5,7 @@ export const title = 'Fixed top navbar example'
 export const extra_css = ['navbar-fixed.css']
 ---
 
-<nav class="navbar md:navbar-expand navbar-dark fixed-top bg-dark">
+<nav class="navbar md:navbar-expand bg-black fixed-top" data-bs-theme="dark">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Fixed navbar</a>
     <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">
diff --git a/site/src/assets/examples/sidebars/index.astro b/site/src/assets/examples/sidebars/index.astro
index 9f414ae2f0..07ed992cee 100644
--- a/site/src/assets/examples/sidebars/index.astro
+++ b/site/src/assets/examples/sidebars/index.astro
@@ -28,16 +28,16 @@ export const extra_js = [{src: 'sidebars.js'}]
   </symbol>
 </svg>
 
-<main class="d-flex flex-nowrap">
+<main class="d-flex flex-nowrap overflow-x-auto overflow-y-hidden max-h-100 vh-100">
   <h1 class="visually-hidden">Sidebars examples</h1>
 
-  <div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;">
-    <a href="/" class="d-flex align-items-center mb-3 md:mb-0 md:me-auto text-white text-decoration-none">
+  <div class="d-flex flex-column flex-shrink-0 p-3 bg-black" style="width: 280px;" data-bs-theme="dark">
+    <a href="/" class="d-flex align-items-center mb-3 md:mb-0 md:me-auto fg-white text-decoration-none">
       <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
       <span class="fs-xl">Sidebar</span>
     </a>
     <hr>
-    <ul class="nav nav-pills flex-column mb-auto">
+    <ul class="nav flex-column align-items-start mb-auto">
       <li class="nav-item">
         <a href="#" class="nav-link active" aria-current="page">
           <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#home"/></svg>
@@ -45,25 +45,25 @@ export const extra_js = [{src: 'sidebars.js'}]
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link text-white">
+        <a href="#" class="nav-link fg-white">
           <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#speedometer2"/></svg>
           Dashboard
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link text-white">
+        <a href="#" class="nav-link fg-white">
           <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#table"/></svg>
           Orders
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link text-white">
+        <a href="#" class="nav-link fg-white">
           <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#grid"/></svg>
           Products
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link text-white">
+        <a href="#" class="nav-link fg-white">
           <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#people-circle"/></svg>
           Customers
         </a>
@@ -71,7 +71,7 @@ export const extra_js = [{src: 'sidebars.js'}]
     </ul>
     <hr>
     <div>
-      <a href="#" class="d-flex align-items-center text-white text-decoration-none" data-bs-toggle="menu" aria-expanded="false">
+      <a href="#" class="d-flex align-items-center fg-white text-decoration-none" data-bs-toggle="menu" aria-expanded="false">
         <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
         <strong>mdo</strong>
       </a>
@@ -93,7 +93,7 @@ export const extra_js = [{src: 'sidebars.js'}]
       <span class="fs-xl">Sidebar</span>
     </a>
     <hr>
-    <ul class="nav nav-pills flex-column mb-auto">
+    <ul class="nav flex-column align-items-start mb-auto">
       <li class="nav-item">
         <a href="#" class="nav-link active" aria-current="page">
           <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#home"/></svg>
@@ -150,7 +150,7 @@ export const extra_js = [{src: 'sidebars.js'}]
     </a>
     <ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
       <li class="nav-item">
-        <a href="#" class="nav-link active py-3 border-bottom rounded-0" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
+        <a href="#" class="nav-link active py-3 border-bottom rounded-0 flex-fill" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
           <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Home"><use href="#home"/></svg>
         </a>
       </li>
diff --git a/site/src/assets/examples/sidebars/sidebars.css b/site/src/assets/examples/sidebars/sidebars.css
index 566fb0fb3e..dc40f5e459 100644
--- a/site/src/assets/examples/sidebars/sidebars.css
+++ b/site/src/assets/examples/sidebars/sidebars.css
@@ -8,11 +8,8 @@ html {
 }
 
 main {
-  height: 100vh;
   height: -webkit-fill-available;
   max-height: 100vh;
-  overflow-x: auto;
-  overflow-y: hidden;
 }
 
 .menu-toggle { outline: 0; }