78 files changed, 676 insertions, 2228 deletions

diff --git a/site/content/docs/5.2/examples/.stylelintrc b/site/content/docs/5.2/examples/.stylelintrc
deleted file mode 100644
index 79ea92d..0000000
--- a/site/content/docs/5.2/examples/.stylelintrc
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "extends": [
-    "stylelint-config-twbs-bootstrap"
-  ],
-  "rules": {
-    "at-rule-no-vendor-prefix": null,
-    "comment-empty-line-before": null,
-    "media-feature-name-no-vendor-prefix": null,
-    "property-disallowed-list": null,
-    "property-no-vendor-prefix": null,
-    "selector-no-qualifying-type": null,
-    "selector-no-vendor-prefix": null,
-    "value-no-vendor-prefix": null
-  }
-}
diff --git a/site/content/docs/5.2/examples/_index.md b/site/content/docs/5.2/examples/_index.md
deleted file mode 100644
index 4668883..0000000
--- a/site/content/docs/5.2/examples/_index.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-layout: single
-title: Examples
-description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
-aliases: "/examples/"
----
-
-{{< list-examples.inline >}}
-{{ range $entry := $.Site.Data.examples -}}
-<div class="row g-lg-5 mb-5">
-  <div class="bd-content col-lg-3">
-    <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
-    <p>{{ $entry.description }}</p>
-    {{ if eq $entry.category "RTL" -}}
-      <div class="bd-callout bd-callout-warning small">
-        <p>
-          <strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest?
-        </p>
-        <p><a href="{{ $.Site.Params.repo }}/issues/new/choose">Please open an issue.</a></p>
-      </div>
-    {{ end -}}
-  </div>
-
-  <div class="col-lg-9">
-    {{ range $i, $example := $entry.examples -}}
-      {{- $len := len $entry.examples -}}
-      {{ if (eq $i 0) }}<div class="row">{{ end }}
-        <div class="col-sm-6 col-md-4 mb-3">
-          <a class="d-block" href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}>
-            <img class="img-thumbnail mb-3" srcset="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png,
-                                                    /docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}@2x.png 2x"
-                                            src="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png"
-                                            alt=""
-                                            width="480" height="300"
-                                            loading="lazy">
-            <h3 class="h5 mb-1">{{ $example.name }}</h3>
-          </a>
-          <p class="text-muted">{{ $example.description }}</p>
-        </div>
-      {{ if (eq (add $i 1) $len) }}</div>{{ end }}
-    {{ end -}}
-  </div>
-</div>
-{{ end -}}
-{{< /list-examples.inline >}}
diff --git a/site/content/docs/5.2/examples/dashboard-rtl/index.html b/site/content/docs/5.2/examples/dashboard-rtl/index.html
deleted file mode 100644
index bc41cc6..0000000
--- a/site/content/docs/5.2/examples/dashboard-rtl/index.html
+++ /dev/null
@@ -1,253 +0,0 @@
----
-layout: examples
-title: قالب لوحة القيادة
-direction: rtl
-extra_css:
-  - "../dashboard/dashboard.rtl.css"
-extra_js:
-  - src: "https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"
-    integrity: "sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE"
-  - src: "https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"
-    integrity: "sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha"
-  - src: "dashboard.js"
----
-
-<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
-  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">اسم الشركة</a>
-  <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="عرض/إخفاء لوحة التنقل">
-    <span class="navbar-toggler-icon"></span>
-  </button>
-  <input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="بحث" aria-label="بحث">
-  <div class="navbar-nav">
-    <div class="nav-item text-nowrap">
-      <a class="nav-link px-3" href="#">تسجيل الخروج</a>
-    </div>
-  </div>
-</header>
-
-<div class="container-fluid">
-  <div class="row">
-    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
-      <div class="position-sticky pt-3 sidebar-sticky">
-        <ul class="nav flex-column">
-          <li class="nav-item">
-            <a class="nav-link active" aria-current="page" href="#">
-              <span data-feather="home" class="align-text-bottom"></span>
-              لوحة القيادة
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="file" class="align-text-bottom"></span>
-              الطلبات
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="shopping-cart" class="align-text-bottom"></span>
-              المنتجات
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="users" class="align-text-bottom"></span>
-              الزبائن
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="bar-chart-2" class="align-text-bottom"></span>
-              التقارير
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="layers" class="align-text-bottom"></span>
-              التكاملات
-            </a>
-          </li>
-        </ul>
-
-        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
-          <span>التقارير المحفوظة</span>
-          <a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
-            <span data-feather="plus-circle" class="align-text-bottom"></span>
-          </a>
-        </h6>
-        <ul class="nav flex-column mb-2">
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="file-text" class="align-text-bottom"></span>
-              الشهر الحالي
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="file-text" class="align-text-bottom"></span>
-              الربع الأخير
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="file-text" class="align-text-bottom"></span>
-              التفاعل الإجتماعي
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="file-text" class="align-text-bottom"></span>
-              مبيعات نهاية العام
-            </a>
-          </li>
-        </ul>
-      </div>
-    </nav>
-
-    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
-      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
-        <h1 class="h2">لوحة القيادة</h1>
-        <div class="btn-toolbar mb-2 mb-md-0">
-          <div class="btn-group me-2">
-            <button type="button" class="btn btn-sm btn-outline-secondary">مشاركة</button>
-            <button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button>
-          </div>
-          <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
-            <span data-feather="calendar" class="align-text-bottom"></span>
-            هذا الأسبوع
-          </button>
-        </div>
-      </div>
-
-      <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
-
-      <h2>عنوان القسم</h2>
-      <div class="table-responsive">
-        <table class="table table-striped table-sm">
-          <thead>
-            <tr>
-              <th scope="col">#</th>
-              <th scope="col">عنوان</th>
-              <th scope="col">عنوان</th>
-              <th scope="col">عنوان</th>
-              <th scope="col">عنوان</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>1,001</td>
-              <td>بيانات</td>
-              <td>عشوائية</td>
-              <td>تثري</td>
-              <td>الجدول</td>
-            </tr>
-            <tr>
-              <td>1,002</td>
-              <td>تثري</td>
-              <td>مبهة</td>
-              <td>تصميم</td>
-              <td>تنسيق</td>
-            </tr>
-            <tr>
-              <td>1,003</td>
-              <td>عشوائية</td>
-              <td>غنية</td>
-              <td>قيمة</td>
-              <td>مفيدة</td>
-            </tr>
-            <tr>
-              <td>1,003</td>
-              <td>معلومات</td>
-              <td>تثري</td>
-              <td>توضيحية</td>
-              <td>عشوائية</td>
-            </tr>
-            <tr>
-              <td>1,004</td>
-              <td>الجدول</td>
-              <td>بيانات</td>
-              <td>تنسيق</td>
-              <td>قيمة</td>
-            </tr>
-            <tr>
-              <td>1,005</td>
-              <td>قيمة</td>
-              <td>مبهة</td>
-              <td>الجدول</td>
-              <td>تثري</td>
-            </tr>
-            <tr>
-              <td>1,006</td>
-              <td>قيمة</td>
-              <td>توضيحية</td>
-              <td>غنية</td>
-              <td>عشوائية</td>
-            </tr>
-            <tr>
-              <td>1,007</td>
-              <td>تثري</td>
-              <td>مفيدة</td>
-              <td>معلومات</td>
-              <td>مبهة</td>
-            </tr>
-            <tr>
-              <td>1,008</td>
-              <td>بيانات</td>
-              <td>عشوائية</td>
-              <td>تثري</td>
-              <td>الجدول</td>
-            </tr>
-            <tr>
-              <td>1,009</td>
-              <td>تثري</td>
-              <td>مبهة</td>
-              <td>تصميم</td>
-              <td>تنسيق</td>
-            </tr>
-            <tr>
-              <td>1,010</td>
-              <td>عشوائية</td>
-              <td>غنية</td>
-              <td>قيمة</td>
-              <td>مفيدة</td>
-            </tr>
-            <tr>
-              <td>1,011</td>
-              <td>معلومات</td>
-              <td>تثري</td>
-              <td>توضيحية</td>
-              <td>عشوائية</td>
-            </tr>
-            <tr>
-              <td>1,012</td>
-              <td>الجدول</td>
-              <td>تثري</td>
-              <td>تنسيق</td>
-              <td>قيمة</td>
-            </tr>
-            <tr>
-              <td>1,013</td>
-              <td>قيمة</td>
-              <td>مبهة</td>
-              <td>الجدول</td>
-              <td>تصميم</td>
-            </tr>
-            <tr>
-              <td>1,014</td>
-              <td>قيمة</td>
-              <td>توضيحية</td>
-              <td>غنية</td>
-              <td>عشوائية</td>
-            </tr>
-            <tr>
-              <td>1,015</td>
-              <td>بيانات</td>
-              <td>مفيدة</td>
-              <td>معلومات</td>
-              <td>الجدول</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </main>
-  </div>
-</div>
diff --git a/site/content/docs/5.2/examples/dashboard/dashboard.css b/site/content/docs/5.2/examples/dashboard/dashboard.css
deleted file mode 100644
index ad12048..0000000
--- a/site/content/docs/5.2/examples/dashboard/dashboard.css
+++ /dev/null
@@ -1,92 +0,0 @@
-body {
-  font-size: .875rem;
-}
-
-.feather {
-  width: 16px;
-  height: 16px;
-}
-
-/*
- * Sidebar
- */
-
-.sidebar {
-  position: fixed;
-  top: 0;
-  /* rtl:raw:
-  right: 0;
-  */
-  bottom: 0;
-  /* rtl:remove */
-  left: 0;
-  z-index: 100; /* Behind the navbar */
-  padding: 48px 0 0; /* Height of navbar */
-  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
-}
-
-@media (max-width: 767.98px) {
-  .sidebar {
-    top: 5rem;
-  }
-}
-
-.sidebar-sticky {
-  height: calc(100vh - 48px);
-  overflow-x: hidden;
-  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
-}
-
-.sidebar .nav-link {
-  font-weight: 500;
-  color: #333;
-}
-
-.sidebar .nav-link .feather {
-  margin-right: 4px;
-  color: #727272;
-}
-
-.sidebar .nav-link.active {
-  color: #2470dc;
-}
-
-.sidebar .nav-link:hover .feather,
-.sidebar .nav-link.active .feather {
-  color: inherit;
-}
-
-.sidebar-heading {
-  font-size: .75rem;
-}
-
-/*
- * Navbar
- */
-
-.navbar-brand {
-  padding-top: .75rem;
-  padding-bottom: .75rem;
-  background-color: rgba(0, 0, 0, .25);
-  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
-}
-
-.navbar .navbar-toggler {
-  top: .25rem;
-  right: 1rem;
-}
-
-.navbar .form-control {
-  padding: .75rem 1rem;
-}
-
-.form-control-dark {
-  color: #fff;
-  background-color: rgba(255, 255, 255, .1);
-  border-color: rgba(255, 255, 255, .1);
-}
-
-.form-control-dark:focus {
-  border-color: transparent;
-  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
-}
diff --git a/site/content/docs/5.2/examples/dashboard/dashboard.rtl.css b/site/content/docs/5.2/examples/dashboard/dashboard.rtl.css
deleted file mode 100644
index 31ea3cc..0000000
--- a/site/content/docs/5.2/examples/dashboard/dashboard.rtl.css
+++ /dev/null
@@ -1,88 +0,0 @@
-body {
-  font-size: .875rem;
-}
-
-.feather {
-  width: 16px;
-  height: 16px;
-}
-
-/*
- * Sidebar
- */
-
-.sidebar {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 100; /* Behind the navbar */
-  padding: 48px 0 0; /* Height of navbar */
-  box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1);
-}
-
-@media (max-width: 767.98px) {
-  .sidebar {
-    top: 5rem;
-  }
-}
-
-.sidebar-sticky {
-  height: calc(100vh - 48px);
-  overflow-x: hidden;
-  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
-}
-
-.sidebar .nav-link {
-  font-weight: 500;
-  color: #333;
-}
-
-.sidebar .nav-link .feather {
-  margin-left: 4px;
-  color: #727272;
-}
-
-.sidebar .nav-link.active {
-  color: #2470dc;
-}
-
-.sidebar .nav-link:hover .feather,
-.sidebar .nav-link.active .feather {
-  color: inherit;
-}
-
-.sidebar-heading {
-  font-size: .75rem;
-}
-
-/*
- * Navbar
- */
-
-.navbar-brand {
-  padding-top: .75rem;
-  padding-bottom: .75rem;
-  background-color: rgba(0, 0, 0, .25);
-  box-shadow: inset 1px 0 0 rgba(0, 0, 0, .25);
-}
-
-.navbar .navbar-toggler {
-  top: .25rem;
-  left: 1rem;
-}
-
-.navbar .form-control {
-  padding: .75rem 1rem;
-}
-
-.form-control-dark {
-  color: #fff;
-  background-color: rgba(255, 255, 255, .1);
-  border-color: rgba(255, 255, 255, .1);
-}
-
-.form-control-dark:focus {
-  border-color: transparent;
-  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
-}
diff --git a/site/content/docs/5.2/examples/dashboard/index.html b/site/content/docs/5.2/examples/dashboard/index.html
deleted file mode 100644
index b3b40c2..0000000
--- a/site/content/docs/5.2/examples/dashboard/index.html
+++ /dev/null
@@ -1,252 +0,0 @@
----
-layout: examples
-title: Dashboard Template
-extra_css:
-  - "dashboard.css"
-extra_js:
-  - src: "https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"
-    integrity: "sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE"
-  - src: "https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"
-    integrity: "sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha"
-  - src: "dashboard.js"
----
-
-<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
-  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">Company name</a>
-  <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-  </button>
-  <input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
-  <div class="navbar-nav">
-    <div class="nav-item text-nowrap">
-      <a class="nav-link px-3" href="#">Sign out</a>
-    </div>
-  </div>
-</header>
-
-<div class="container-fluid">
-  <div class="row">
-    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
-      <div class="position-sticky pt-3 sidebar-sticky">
-        <ul class="nav flex-column">
-          <li class="nav-item">
-            <a class="nav-link active" aria-current="page" href="#">
-              <span data-feather="home" class="align-text-bottom"></span>
-              Dashboard
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="file" class="align-text-bottom"></span>
-              Orders
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="shopping-cart" class="align-text-bottom"></span>
-              Products
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="users" class="align-text-bottom"></span>
-              Customers
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="bar-chart-2" class="align-text-bottom"></span>
-              Reports
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="layers" class="align-text-bottom"></span>
-              Integrations
-            </a>
-          </li>
-        </ul>
-
-        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
-          <span>Saved reports</span>
-          <a class="link-secondary" href="#" aria-label="Add a new report">
-            <span data-feather="plus-circle" class="align-text-bottom"></span>
-          </a>
-        </h6>
-        <ul class="nav flex-column mb-2">
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="file-text" class="align-text-bottom"></span>
-              Current month
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="file-text" class="align-text-bottom"></span>
-              Last quarter
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="file-text" class="align-text-bottom"></span>
-              Social engagement
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="file-text" class="align-text-bottom"></span>
-              Year-end sale
-            </a>
-          </li>
-        </ul>
-      </div>
-    </nav>
-
-    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
-      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
-        <h1 class="h2">Dashboard</h1>
-        <div class="btn-toolbar mb-2 mb-md-0">
-          <div class="btn-group me-2">
-            <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
-            <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
-          </div>
-          <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
-            <span data-feather="calendar" class="align-text-bottom"></span>
-            This week
-          </button>
-        </div>
-      </div>
-
-      <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
-
-      <h2>Section title</h2>
-      <div class="table-responsive">
-        <table class="table table-striped table-sm">
-          <thead>
-            <tr>
-              <th scope="col">#</th>
-              <th scope="col">Header</th>
-              <th scope="col">Header</th>
-              <th scope="col">Header</th>
-              <th scope="col">Header</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>1,001</td>
-              <td>random</td>
-              <td>data</td>
-              <td>placeholder</td>
-              <td>text</td>
-            </tr>
-            <tr>
-              <td>1,002</td>
-              <td>placeholder</td>
-              <td>irrelevant</td>
-              <td>visual</td>
-              <td>layout</td>
-            </tr>
-            <tr>
-              <td>1,003</td>
-              <td>data</td>
-              <td>rich</td>
-              <td>dashboard</td>
-              <td>tabular</td>
-            </tr>
-            <tr>
-              <td>1,003</td>
-              <td>information</td>
-              <td>placeholder</td>
-              <td>illustrative</td>
-              <td>data</td>
-            </tr>
-            <tr>
-              <td>1,004</td>
-              <td>text</td>
-              <td>random</td>
-              <td>layout</td>
-              <td>dashboard</td>
-            </tr>
-            <tr>
-              <td>1,005</td>
-              <td>dashboard</td>
-              <td>irrelevant</td>
-              <td>text</td>
-              <td>placeholder</td>
-            </tr>
-            <tr>
-              <td>1,006</td>
-              <td>dashboard</td>
-              <td>illustrative</td>
-              <td>rich</td>
-              <td>data</td>
-            </tr>
-            <tr>
-              <td>1,007</td>
-              <td>placeholder</td>
-              <td>tabular</td>
-              <td>information</td>
-              <td>irrelevant</td>
-            </tr>
-            <tr>
-              <td>1,008</td>
-              <td>random</td>
-              <td>data</td>
-              <td>placeholder</td>
-              <td>text</td>
-            </tr>
-            <tr>
-              <td>1,009</td>
-              <td>placeholder</td>
-              <td>irrelevant</td>
-              <td>visual</td>
-              <td>layout</td>
-            </tr>
-            <tr>
-              <td>1,010</td>
-              <td>data</td>
-              <td>rich</td>
-              <td>dashboard</td>
-              <td>tabular</td>
-            </tr>
-            <tr>
-              <td>1,011</td>
-              <td>information</td>
-              <td>placeholder</td>
-              <td>illustrative</td>
-              <td>data</td>
-            </tr>
-            <tr>
-              <td>1,012</td>
-              <td>text</td>
-              <td>placeholder</td>
-              <td>layout</td>
-              <td>dashboard</td>
-            </tr>
-            <tr>
-              <td>1,013</td>
-              <td>dashboard</td>
-              <td>irrelevant</td>
-              <td>text</td>
-              <td>visual</td>
-            </tr>
-            <tr>
-              <td>1,014</td>
-              <td>dashboard</td>
-              <td>illustrative</td>
-              <td>rich</td>
-              <td>data</td>
-            </tr>
-            <tr>
-              <td>1,015</td>
-              <td>random</td>
-              <td>tabular</td>
-              <td>information</td>
-              <td>text</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </main>
-  </div>
-</div>
diff --git a/site/content/docs/5.2/examples/dropdowns/index.html b/site/content/docs/5.2/examples/dropdowns/index.html
deleted file mode 100644
index f08f697..0000000
--- a/site/content/docs/5.2/examples/dropdowns/index.html
+++ /dev/null
@@ -1,338 +0,0 @@
----
-layout: examples
-title: Dropdowns
-extra_css:
-  - "dropdowns.css"
-body_class: ""
----
-
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-  <symbol id="bootstrap" viewBox="0 0 118 94">
-    <title>Bootstrap</title>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
-  </symbol>
-
-  <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
-    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
-  </symbol>
-
-  <symbol id="check2" viewBox="0 0 16 16">
-    <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
-  </symbol>
-
-  <symbol id="check2-circle" viewBox="0 0 16 16">
-    <path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"/>
-    <path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"/>
-  </symbol>
-
-  <symbol id="bookmark-star" viewBox="0 0 16 16">
-    <path d="M7.84 4.1a.178.178 0 0 1 .32 0l.634 1.285a.178.178 0 0 0 .134.098l1.42.206c.145.021.204.2.098.303L9.42 6.993a.178.178 0 0 0-.051.158l.242 1.414a.178.178 0 0 1-.258.187l-1.27-.668a.178.178 0 0 0-.165 0l-1.27.668a.178.178 0 0 1-.257-.187l.242-1.414a.178.178 0 0 0-.05-.158l-1.03-1.001a.178.178 0 0 1 .098-.303l1.42-.206a.178.178 0 0 0 .134-.098L7.84 4.1z"/>
-    <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/>
-  </symbol>
-
-  <symbol id="grid-fill" viewBox="0 0 16 16">
-    <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
-  </symbol>
-
-  <symbol id="stars" viewBox="0 0 16 16">
-    <path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/>
-  </symbol>
-
-  <symbol id="film" viewBox="0 0 16 16">
-    <path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
-  </symbol>
-
-  <symbol id="joystick" viewBox="0 0 16 16">
-    <path d="M10 2a2 2 0 0 1-1.5 1.937v5.087c.863.083 1.5.377 1.5.726 0 .414-.895.75-2 .75s-2-.336-2-.75c0-.35.637-.643 1.5-.726V3.937A2 2 0 1 1 10 2z"/>
-    <path d="M0 9.665v1.717a1 1 0 0 0 .553.894l6.553 3.277a2 2 0 0 0 1.788 0l6.553-3.277a1 1 0 0 0 .553-.894V9.665c0-.1-.06-.19-.152-.23L9.5 6.715v.993l5.227 2.178a.125.125 0 0 1 .001.23l-5.94 2.546a2 2 0 0 1-1.576 0l-5.94-2.546a.125.125 0 0 1 .001-.23L6.5 7.708l-.013-.988L.152 9.435a.25.25 0 0 0-.152.23z"/>
-  </symbol>
-
-  <symbol id="music-note-beamed" viewBox="0 0 16 16">
-    <path d="M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2zm9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2z"/>
-    <path fill-rule="evenodd" d="M14 11V2h1v9h-1zM6 3v10H5V3h1z"/>
-    <path d="M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4V2.905z"/>
-  </symbol>
-
-  <symbol id="files" viewBox="0 0 16 16">
-    <path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"/>
-  </symbol>
-
-  <symbol id="image-fill" viewBox="0 0 16 16">
-    <path d="M.002 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2V3zm1 9v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12zm5-6.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z"/>
-  </symbol>
-
-  <symbol id="trash" viewBox="0 0 16 16">
-    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
-    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
-  </symbol>
-
-  <symbol id="question-circle" viewBox="0 0 16 16">
-    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-    <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
-  </symbol>
-
-  <symbol id="arrow-left-short" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"/>
-  </symbol>
-
-  <symbol id="arrow-right-short" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
-  </symbol>
-</svg>
-
-<div class="d-flex gap-5 justify-content-center">
-  <ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 shadow w-220px">
-    <li><a class="dropdown-item rounded-2 active" href="#">Action</a></li>
-    <li><a class="dropdown-item rounded-2" href="#">Another action</a></li>
-    <li><a class="dropdown-item rounded-2" href="#">Something else here</a></li>
-    <li><hr class="dropdown-divider"></li>
-    <li><a class="dropdown-item rounded-2" href="#">Separated link</a></li>
-  </ul>
-  <ul class="dropdown-menu dropdown-menu-dark position-static d-grid gap-1 p-2 rounded-3 mx-0 border-0 shadow w-220px">
-    <li><a class="dropdown-item rounded-2 active" href="#">Action</a></li>
-    <li><a class="dropdown-item rounded-2" href="#">Another action</a></li>
-    <li><a class="dropdown-item rounded-2" href="#">Something else here</a></li>
-    <li><hr class="dropdown-divider"></li>
-    <li><a class="dropdown-item rounded-2" href="#">Separated link</a></li>
-  </ul>
-</div>
-
-<div class="b-example-divider"></div>
-
-<div class="d-flex gap-5 justify-content-center">
-  <div class="dropdown-menu d-block position-static pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px">
-    <form class="p-2 mb-2 bg-light border-bottom">
-      <input type="search" class="form-control" autocomplete="false" placeholder="Type to filter...">
-    </form>
-    <ul class="list-unstyled mb-0">
-      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-success rounded-circle p-1"></span>
-        Action
-      </a></li>
-      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-primary rounded-circle p-1"></span>
-        Another action
-      </a></li>
-      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-danger rounded-circle p-1"></span>
-        Something else here
-      </a></li>
-      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-info rounded-circle p-1"></span>
-        Separated link
-      </a></li>
-    </ul>
-  </div>
-
-  <div class="dropdown-menu dropdown-menu-dark d-block position-static border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px">
-    <form class="p-2 mb-2 bg-dark border-bottom border-dark">
-      <input type="search" class="form-control form-control-dark" autocomplete="false" placeholder="Type to filter...">
-    </form>
-    <ul class="list-unstyled mb-0">
-      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-success rounded-circle p-1"></span>
-        Action
-      </a></li>
-      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-primary rounded-circle p-1"></span>
-        Another action
-      </a></li>
-      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-danger rounded-circle p-1"></span>
-        Something else here
-      </a></li>
-      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-info rounded-circle p-1"></span>
-        Separated link
-      </a></li>
-    </ul>
-  </div>
-</div>
-
-<div class="b-example-divider"></div>
-
-<div class="d-flex gap-5 justify-content-center">
-  <ul class="dropdown-menu d-block position-static mx-0 shadow w-220px">
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
-        Documents
-      </a>
-    </li>
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg>
-        Photos
-      </a>
-    </li>
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg>
-        Movies
-      </a>
-    </li>
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg>
-        Music
-      </a>
-    </li>
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg>
-        Games
-      </a>
-    </li>
-    <li><hr class="dropdown-divider"></li>
-    <li>
-      <a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg>
-        Trash
-      </a>
-    </li>
-  </ul>
-  <ul class="dropdown-menu dropdown-menu-dark d-block position-static mx-0 border-0 shadow w-220px">
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
-        Documents
-      </a>
-    </li>
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg>
-        Photos
-      </a>
-    </li>
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg>
-        Movies
-      </a>
-    </li>
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg>
-        Music
-      </a>
-    </li>
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg>
-        Games
-      </a>
-    </li>
-    <li><hr class="dropdown-divider"></li>
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg>
-        Trash
-      </a>
-    </li>
-  </ul>
-</div>
-
-<div class="b-example-divider"></div>
-
-<div class="dropdown-menu d-block position-static p-2 shadow rounded-3 w-340px">
-  <div class="d-grid gap-1">
-    <div class="cal">
-      <div class="cal-month">
-        <button class="btn cal-btn" type="button">
-          <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
-        </button>
-        <strong class="cal-month-name">June</strong>
-        <select class="form-select cal-month-name d-none">
-          <option value="January">January</option>
-          <option value="February">February</option>
-          <option value="March">March</option>
-          <option value="April">April</option>
-          <option value="May">May</option>
-          <option selected value="June">June</option>
-          <option value="July">July</option>
-          <option value="August">August</option>
-          <option value="September">September</option>
-          <option value="October">October</option>
-          <option value="November">November</option>
-          <option value="December">December</option>
-        </select>
-        <button class="btn cal-btn" type="button">
-          <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
-        </button>
-      </div>
-      <div class="cal-weekdays text-muted">
-        <div class="cal-weekday">Sun</div>
-        <div class="cal-weekday">Mon</div>
-        <div class="cal-weekday">Tue</div>
-        <div class="cal-weekday">Wed</div>
-        <div class="cal-weekday">Thu</div>
-        <div class="cal-weekday">Fri</div>
-        <div class="cal-weekday">Sat</div>
-      </div>
-      <div class="cal-days">
-        <button class="btn cal-btn" disabled type="button">30</button>
-        <button class="btn cal-btn" disabled type="button">31</button>
-
-        <button class="btn cal-btn" type="button">1</button>
-        <button class="btn cal-btn" type="button">2</button>
-        <button class="btn cal-btn" type="button">3</button>
-        <button class="btn cal-btn" type="button">4</button>
-        <button class="btn cal-btn" type="button">5</button>
-        <button class="btn cal-btn" type="button">6</button>
-        <button class="btn cal-btn" type="button">7</button>
-
-        <button class="btn cal-btn" type="button">8</button>
-        <button class="btn cal-btn" type="button">9</button>
-        <button class="btn cal-btn" type="button">10</button>
-        <button class="btn cal-btn" type="button">11</button>
-        <button class="btn cal-btn" type="button">12</button>
-        <button class="btn cal-btn" type="button">13</button>
-        <button class="btn cal-btn" type="button">14</button>
-
-        <button class="btn cal-btn" type="button">15</button>
-        <button class="btn cal-btn" type="button">16</button>
-        <button class="btn cal-btn" type="button">17</button>
-        <button class="btn cal-btn" type="button">18</button>
-        <button class="btn cal-btn" type="button">19</button>
-        <button class="btn cal-btn" type="button">20</button>
-        <button class="btn cal-btn" type="button">21</button>
-
-        <button class="btn cal-btn" type="button">22</button>
-        <button class="btn cal-btn" type="button">23</button>
-        <button class="btn cal-btn" type="button">24</button>
-        <button class="btn cal-btn" type="button">25</button>
-        <button class="btn cal-btn" type="button">26</button>
-        <button class="btn cal-btn" type="button">27</button>
-        <button class="btn cal-btn" type="button">28</button>
-
-        <button class="btn cal-btn" type="button">29</button>
-        <button class="btn cal-btn" type="button">30</button>
-        <button class="btn cal-btn" type="button">31</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="b-example-divider"></div>
-
-<div class="dropdown-menu position-static d-flex align-items-stretch p-3 rounded-3 shadow-lg w-600px">
-  <nav class="d-grid gap-2 col-8">
-    <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-center gap-3 py-2 px-3 lh-sm text-start">
-      <svg class="bi" width="32" height="32"><use xlink:href="#image-fill"/></svg>
-      <div>
-        <strong class="d-block">Features</strong>
-        <small>Take a tour through the product</small>
-      </div>
-    </a>
-    <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-center gap-3 py-2 px-3 lh-sm text-start">
-      <svg class="bi" width="32" height="32"><use xlink:href="#question-circle"/></svg>
-      <div>
-        <strong class="d-block">Support</strong>
-        <small>Get help from our support crew</small>
-      </div>
-    </a>
-  </nav>
-  <div class="col-4">
-    ...
-  </div>
-</div>
diff --git a/site/content/docs/5.2/examples/grid/grid.css b/site/content/docs/5.2/examples/grid/grid.css
deleted file mode 100644
index 18e3568..0000000
--- a/site/content/docs/5.2/examples/grid/grid.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.themed-grid-col {
-  padding-top: .75rem;
-  padding-bottom: .75rem;
-  background-color: rgba(86, 61, 124, .15);
-  border: 1px solid rgba(86, 61, 124, .2);
-}
-
-.themed-container {
-  padding: .75rem;
-  margin-bottom: 1.5rem;
-  background-color: rgba(0, 123, 255, .15);
-  border: 1px solid rgba(0, 123, 255, .2);
-}
diff --git a/site/content/docs/5.2/examples/list-groups/index.html b/site/content/docs/5.2/examples/list-groups/index.html
deleted file mode 100644
index 9599913..0000000
--- a/site/content/docs/5.2/examples/list-groups/index.html
+++ /dev/null
@@ -1,222 +0,0 @@
----
-layout: examples
-title: List groups
-extra_css:
-  - "list-groups.css"
-body_class: ""
----
-
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-  <symbol id="bootstrap" viewBox="0 0 118 94">
-    <title>Bootstrap</title>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
-  </symbol>
-
-  <symbol id="calendar-event" viewBox="0 0 16 16">
-    <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
-    <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
-  </symbol>
-
-  <symbol id="alarm" viewBox="0 0 16 16">
-    <path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
-    <path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>
-  </symbol>
-
-  <symbol id="list-check" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
-  </symbol>
-</svg>
-
-<div class="list-group w-auto">
-  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
-    <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
-    <div class="d-flex gap-2 w-100 justify-content-between">
-      <div>
-        <h6 class="mb-0">List group item heading</h6>
-        <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
-      </div>
-      <small class="opacity-50 text-nowrap">now</small>
-    </div>
-  </a>
-  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
-    <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
-    <div class="d-flex gap-2 w-100 justify-content-between">
-      <div>
-        <h6 class="mb-0">Another title here</h6>
-        <p class="mb-0 opacity-75">Some placeholder content in a paragraph that goes a little longer so it wraps to a new line.</p>
-      </div>
-      <small class="opacity-50 text-nowrap">3d</small>
-    </div>
-  </a>
-  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
-    <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
-    <div class="d-flex gap-2 w-100 justify-content-between">
-      <div>
-        <h6 class="mb-0">Third heading</h6>
-        <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
-      </div>
-      <small class="opacity-50 text-nowrap">1w</small>
-    </div>
-  </a>
-</div>
-
-<div class="b-example-divider"></div>
-
-<div class="d-flex gap-5 justify-content-center">
-  <div class="list-group mx-0 w-auto">
-    <label class="list-group-item d-flex gap-2">
-      <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked>
-      <span>
-        First checkbox
-        <small class="d-block text-muted">With support text underneath to add more detail</small>
-      </span>
-    </label>
-    <label class="list-group-item d-flex gap-2">
-      <input class="form-check-input flex-shrink-0" type="checkbox" value="">
-      <span>
-        Second checkbox
-        <small class="d-block text-muted">Some other text goes here</small>
-      </span>
-    </label>
-    <label class="list-group-item d-flex gap-2">
-      <input class="form-check-input flex-shrink-0" type="checkbox" value="">
-      <span>
-        Third checkbox
-        <small class="d-block text-muted">And we end with another snippet of text</small>
-      </span>
-    </label>
-  </div>
-
-  <div class="list-group mx-0 w-auto">
-    <label class="list-group-item d-flex gap-2">
-      <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios1" value="" checked>
-      <span>
-        First radio
-        <small class="d-block text-muted">With support text underneath to add more detail</small>
-      </span>
-    </label>
-    <label class="list-group-item d-flex gap-2">
-      <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios2" value="">
-      <span>
-        Second radio
-        <small class="d-block text-muted">Some other text goes here</small>
-      </span>
-    </label>
-    <label class="list-group-item d-flex gap-2">
-      <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios3" value="">
-      <span>
-        Third radio
-        <small class="d-block text-muted">And we end with another snippet of text</small>
-      </span>
-    </label>
-  </div>
-</div>
-
-<div class="b-example-divider"></div>
-
-<div class="list-group w-auto">
-  <label class="list-group-item d-flex gap-3">
-    <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked style="font-size: 1.375em;">
-    <span class="pt-1 form-checked-content">
-      <strong>Finish sales report</strong>
-      <small class="d-block text-muted">
-        <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
-        1:00–2:00pm
-      </small>
-    </span>
-  </label>
-  <label class="list-group-item d-flex gap-3">
-    <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
-    <span class="pt-1 form-checked-content">
-      <strong>Weekly All Hands</strong>
-      <small class="d-block text-muted">
-        <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
-        2:00–2:30pm
-      </small>
-    </span>
-  </label>
-  <label class="list-group-item d-flex gap-3">
-    <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
-    <span class="pt-1 form-checked-content">
-      <strong>Out of office</strong>
-      <small class="d-block text-muted">
-        <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg>
-        Tomorrow
-      </small>
-    </span>
-  </label>
-  <label class="list-group-item d-flex gap-3 bg-light">
-    <input class="form-check-input form-check-input-placeholder bg-light flex-shrink-0 pe-none" disabled type="checkbox" value="" style="font-size: 1.375em;">
-    <span class="pt-1 form-checked-content">
-      <span contenteditable="true" class="w-100">Add new task...</span>
-      <small class="d-block text-muted">
-        <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#list-check"/></svg>
-        Choose list...
-      </small>
-    </span>
-  </label>
-</div>
-
-<div class="b-example-divider"></div>
-
-<div class="list-group list-group-checkable d-grid gap-2 border-0 w-auto">
-  <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios1" value="" checked>
-  <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios1">
-    First radio
-    <span class="d-block small opacity-50">With support text underneath to add more detail</span>
-  </label>
-
-  <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios2" value="">
-  <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios2">
-    Second radio
-    <span class="d-block small opacity-50">Some other text goes here</span>
-  </label>
-
-  <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios3" value="">
-  <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios3">
-    Third radio
-    <span class="d-block small opacity-50">And we end with another snippet of text</span>
-  </label>
-
-  <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios4" value="" disabled>
-  <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios4">
-    Fourth disabled radio
-    <span class="d-block small opacity-50">This option is disabled</span>
-  </label>
-</div>
-
-<div class="b-example-divider"></div>
-
-<div class="list-group list-group-radio d-grid gap-2 border-0 w-auto">
-  <div class="position-relative">
-    <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid1" value="" checked>
-    <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid1">
-      <strong class="fw-semibold">First radio</strong>
-      <span class="d-block small opacity-75">With support text underneath to add more detail</span>
-    </label>
-  </div>
-
-  <div class="position-relative">
-    <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid2" value="">
-    <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid2">
-      <strong class="fw-semibold">Second radio</strong>
-      <span class="d-block small opacity-75">Some other text goes here</span>
-    </label>
-  </div>
-
-  <div class="position-relative">
-    <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid3" value="">
-    <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid3">
-      <strong class="fw-semibold">Third radio</strong>
-      <span class="d-block small opacity-75">And we end with another snippet of text</span>
-    </label>
-  </div>
-
-  <div class="position-relative">
-    <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid4" value="" disabled>
-    <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid4">
-      <strong class="fw-semibold">Fourth disabled radio</strong>
-      <span class="d-block small opacity-75">This option is disabled</span>
-    </label>
-  </div>
-</div>
diff --git a/site/content/docs/5.2/examples/pricing/pricing.css b/site/content/docs/5.2/examples/pricing/pricing.css
deleted file mode 100644
index c7304d1..0000000
--- a/site/content/docs/5.2/examples/pricing/pricing.css
+++ /dev/null
@@ -1,11 +0,0 @@
-body {
-  background-image: linear-gradient(180deg, #eee, #fff 100px, #fff);
-}
-
-.container {
-  max-width: 960px;
-}
-
-.pricing-header {
-  max-width: 700px;
-}
diff --git a/site/content/docs/5.2/examples/product/index.html b/site/content/docs/5.2/examples/product/index.html
deleted file mode 100644
index c2eb0eb..0000000
--- a/site/content/docs/5.2/examples/product/index.html
+++ /dev/null
@@ -1,148 +0,0 @@
----
-layout: examples
-title: Product example
-extra_css:
-  - "product.css"
----
-
-<header class="site-header sticky-top py-1">
-  <nav class="container d-flex flex-column flex-md-row justify-content-between">
-    <a class="py-2" href="#" aria-label="Product">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mx-auto" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>
-    </a>
-    <a class="py-2 d-none d-md-inline-block" href="#">Tour</a>
-    <a class="py-2 d-none d-md-inline-block" href="#">Product</a>
-    <a class="py-2 d-none d-md-inline-block" href="#">Features</a>
-    <a class="py-2 d-none d-md-inline-block" href="#">Enterprise</a>
-    <a class="py-2 d-none d-md-inline-block" href="#">Support</a>
-    <a class="py-2 d-none d-md-inline-block" href="#">Pricing</a>
-    <a class="py-2 d-none d-md-inline-block" href="#">Cart</a>
-  </nav>
-</header>
-
-<main>
-  <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
-    <div class="col-md-5 p-lg-5 mx-auto my-5">
-      <h1 class="display-4 fw-normal">Punny headline</h1>
-      <p class="lead fw-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.</p>
-      <a class="btn btn-outline-secondary" href="#">Coming soon</a>
-    </div>
-    <div class="product-device shadow-sm d-none d-md-block"></div>
-    <div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
-  </div>
-
-  <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
-    <div class="text-bg-dark me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
-      <div class="my-3 py-3">
-        <h2 class="display-5">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
-      </div>
-      <div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
-    </div>
-    <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
-      <div class="my-3 p-3">
-        <h2 class="display-5">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
-      </div>
-      <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
-    </div>
-  </div>
-
-  <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
-    <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
-      <div class="my-3 p-3">
-        <h2 class="display-5">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
-      </div>
-      <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
-    </div>
-    <div class="text-bg-primary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
-      <div class="my-3 py-3">
-        <h2 class="display-5">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
-      </div>
-      <div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
-    </div>
-  </div>
-
-  <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
-    <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
-      <div class="my-3 p-3">
-        <h2 class="display-5">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
-      </div>
-      <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
-    </div>
-    <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
-      <div class="my-3 py-3">
-        <h2 class="display-5">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
-      </div>
-      <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
-    </div>
-  </div>
-
-  <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
-    <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
-      <div class="my-3 p-3">
-        <h2 class="display-5">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
-      </div>
-      <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
-    </div>
-    <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
-      <div class="my-3 py-3">
-        <h2 class="display-5">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
-      </div>
-      <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
-    </div>
-  </div>
-</main>
-
-<footer class="container py-5">
-  <div class="row">
-    <div class="col-12 col-md">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mb-2" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>
-      <small class="d-block mb-3 text-muted">&copy; 2017–{{< year >}}</small>
-    </div>
-    <div class="col-6 col-md">
-      <h5>Features</h5>
-      <ul class="list-unstyled text-small">
-        <li><a class="link-secondary" href="#">Cool stuff</a></li>
-        <li><a class="link-secondary" href="#">Random feature</a></li>
-        <li><a class="link-secondary" href="#">Team feature</a></li>
-        <li><a class="link-secondary" href="#">Stuff for developers</a></li>
-        <li><a class="link-secondary" href="#">Another one</a></li>
-        <li><a class="link-secondary" href="#">Last time</a></li>
-      </ul>
-    </div>
-    <div class="col-6 col-md">
-      <h5>Resources</h5>
-      <ul class="list-unstyled text-small">
-        <li><a class="link-secondary" href="#">Resource name</a></li>
-        <li><a class="link-secondary" href="#">Resource</a></li>
-        <li><a class="link-secondary" href="#">Another resource</a></li>
-        <li><a class="link-secondary" href="#">Final resource</a></li>
-      </ul>
-    </div>
-    <div class="col-6 col-md">
-      <h5>Resources</h5>
-      <ul class="list-unstyled text-small">
-        <li><a class="link-secondary" href="#">Business</a></li>
-        <li><a class="link-secondary" href="#">Education</a></li>
-        <li><a class="link-secondary" href="#">Government</a></li>
-        <li><a class="link-secondary" href="#">Gaming</a></li>
-      </ul>
-    </div>
-    <div class="col-6 col-md">
-      <h5>About</h5>
-      <ul class="list-unstyled text-small">
-        <li><a class="link-secondary" href="#">Team</a></li>
-        <li><a class="link-secondary" href="#">Locations</a></li>
-        <li><a class="link-secondary" href="#">Privacy</a></li>
-        <li><a class="link-secondary" href="#">Terms</a></li>
-      </ul>
-    </div>
-  </div>
-</footer>
diff --git a/site/content/docs/5.2/examples/starter-template/index.html b/site/content/docs/5.2/examples/starter-template/index.html
deleted file mode 100644
index 5a898a4..0000000
--- a/site/content/docs/5.2/examples/starter-template/index.html
+++ /dev/null
@@ -1,52 +0,0 @@
----
-layout: examples
-title: Starter Template
-extra_css:
-  - "starter-template.css"
----
-
-<div class="col-lg-8 mx-auto p-4 py-md-5">
-  <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
-    <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
-      <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
-      <span class="fs-4">Starter template</span>
-    </a>
-  </header>
-
-  <main>
-    <h1>Get started with Bootstrap</h1>
-    <p class="fs-5 col-md-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p>
-
-    <div class="mb-5">
-      <a href="{{< docsref "/examples" >}}" class="btn btn-primary btn-lg px-4">Download examples</a>
-    </div>
-
-    <hr class="col-3 col-md-2 mb-5">
-
-    <div class="row g-5">
-      <div class="col-md-6">
-        <h2>Starter projects</h2>
-        <p>Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p>
-        <ul class="icon-list ps-0">
-          <li class="d-flex align-items-start mb-1"><a href="https://github.com/twbs/bootstrap-npm-starter" rel="noopener" target="_blank">Bootstrap npm starter</a></li>
-          <li class="text-muted d-flex align-items-start mb-1">Bootstrap Parcel starter (coming soon!)</li>
-        </ul>
-      </div>
-
-      <div class="col-md-6">
-        <h2>Guides</h2>
-        <p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p>
-        <ul class="icon-list ps-0">
-          <li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/introduction" >}}">Bootstrap quick start guide</a></li>
-          <li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/webpack" >}}">Bootstrap Webpack guide</a></li>
-          <li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/parcel" >}}">Bootstrap Parcel guide</a></li>
-          <li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/vite" >}}">Bootstrap Vite guide</a></li>
-          <li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/contribute" >}}">Contributing to Bootstrap</a></li>
-        </ul>
-      </div>
-    </div>
-  </main>
-  <footer class="pt-5 my-5 text-muted border-top">
-    Created by the Bootstrap team &middot; &copy; {{< year >}}
-  </footer>
-</div>
diff --git a/site/content/docs/5.2/examples/starter-template/starter-template.css b/site/content/docs/5.2/examples/starter-template/starter-template.css
deleted file mode 100644
index 582dcbe..0000000
--- a/site/content/docs/5.2/examples/starter-template/starter-template.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.icon-list li::before {
-  display: block;
-  flex-shrink: 0;
-  width: 1.5em;
-  height: 1.5em;
-  margin-right: .5rem;
-  content: "";
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto;
-}
diff --git a/site/content/docs/5.2/examples/album-rtl/index.html b/site/content/docs/5.3/examples/album-rtl/index.html
index 3408056..bae4737 100644
--- a/site/content/docs/5.2/examples/album-rtl/index.html
+++ b/site/content/docs/5.3/examples/album-rtl/index.html
@@ -4,16 +4,16 @@ title: مثال الألبوم
 direction: rtl
 ---
 
-<header>
-  <div class="collapse bg-dark" id="navbarHeader">
+<header data-bs-theme="dark">
+  <div class="collapse text-bg-dark" id="navbarHeader">
     <div class="container">
       <div class="row">
         <div class="col-sm-8 col-md-7 py-4">
-          <h4 class="text-white">حول</h4>
-          <p class="text-muted">أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p>
+          <h4>حول</h4>
+          <p class="text-body-secondary">أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p>
         </div>
         <div class="col-sm-4 offset-md-1 py-4">
-          <h4 class="text-white">تواصل معي</h4>
+          <h4>تواصل معي</h4>
           <ul class="list-unstyled">
             <li><a href="#" class="text-white">تابعني على تويتر</a></li>
             <li><a href="#" class="text-white">شاركني الإعجاب في فيسبوك</a></li>
@@ -42,7 +42,7 @@ direction: rtl
     <div class="row py-lg-5">
       <div class="col-lg-6 col-md-8 mx-auto">
         <h1 class="fw-light">مثال الألبوم</h1>
-        <p class="lead text-muted">وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.</p>
+        <p class="lead text-body-secondary">وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.</p>
         <p>
           <a href="#" class="btn btn-primary my-2">الدعوة الرئيسية للعمل</a>
           <a href="#" class="btn btn-secondary my-2">عمل ثانوي</a>
@@ -51,7 +51,7 @@ direction: rtl
     </div>
   </section>
 
-  <div class="album py-5 bg-light">
+  <div class="album py-5 bg-body-tertiary">
     <div class="container">
 
       <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
@@ -65,7 +65,7 @@ direction: rtl
                   <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
-                <small class="text-muted">9 دقائق</small>
+                <small class="text-body-secondary">9 دقائق</small>
               </div>
             </div>
           </div>
@@ -80,7 +80,7 @@ direction: rtl
                   <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
-                <small class="text-muted">9 دقائق</small>
+                <small class="text-body-secondary">9 دقائق</small>
               </div>
             </div>
           </div>
@@ -95,7 +95,7 @@ direction: rtl
                   <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
-                <small class="text-muted">9 دقائق</small>
+                <small class="text-body-secondary">9 دقائق</small>
               </div>
             </div>
           </div>
@@ -111,7 +111,7 @@ direction: rtl
                   <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
-                <small class="text-muted">9 دقائق</small>
+                <small class="text-body-secondary">9 دقائق</small>
               </div>
             </div>
           </div>
@@ -126,7 +126,7 @@ direction: rtl
                   <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
-                <small class="text-muted">9 دقائق</small>
+                <small class="text-body-secondary">9 دقائق</small>
               </div>
             </div>
           </div>
@@ -141,7 +141,7 @@ direction: rtl
                   <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
-                <small class="text-muted">9 دقائق</small>
+                <small class="text-body-secondary">9 دقائق</small>
               </div>
             </div>
           </div>
@@ -157,7 +157,7 @@ direction: rtl
                   <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
-                <small class="text-muted">9 دقائق</small>
+                <small class="text-body-secondary">9 دقائق</small>
               </div>
             </div>
           </div>
@@ -172,7 +172,7 @@ direction: rtl
                   <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
-                <small class="text-muted">9 دقائق</small>
+                <small class="text-body-secondary">9 دقائق</small>
               </div>
             </div>
           </div>
@@ -187,7 +187,7 @@ direction: rtl
                   <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
-                <small class="text-muted">9 دقائق</small>
+                <small class="text-body-secondary">9 دقائق</small>
               </div>
             </div>
           </div>
@@ -198,7 +198,7 @@ direction: rtl
 
 </main>
 
-<footer class="text-muted py-5">
+<footer class="text-body-secondary py-5">
   <div class="container">
     <p class="float-end mb-1">
       <a href="#">عد إلى الأعلى</a>
diff --git a/site/content/docs/5.2/examples/album/index.html b/site/content/docs/5.3/examples/album/index.html
index 2d25d72..54b2c5b 100644
--- a/site/content/docs/5.2/examples/album/index.html
+++ b/site/content/docs/5.3/examples/album/index.html
@@ -3,16 +3,16 @@ layout: examples
 title: Album example
 ---
 
-<header>
-  <div class="collapse bg-dark" id="navbarHeader">
+<header data-bs-theme="dark">
+  <div class="collapse text-bg-dark" id="navbarHeader">
     <div class="container">
       <div class="row">
         <div class="col-sm-8 col-md-7 py-4">
-          <h4 class="text-white">About</h4>
-          <p class="text-muted">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>
+          <h4>About</h4>
+          <p class="text-body-secondary">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="col-sm-4 offset-md-1 py-4">
-          <h4 class="text-white">Contact</h4>
+          <h4>Contact</h4>
           <ul class="list-unstyled">
             <li><a href="#" class="text-white">Follow on Twitter</a></li>
             <li><a href="#" class="text-white">Like on Facebook</a></li>
@@ -41,7 +41,7 @@ title: Album example
     <div class="row py-lg-5">
       <div class="col-lg-6 col-md-8 mx-auto">
         <h1 class="fw-light">Album example</h1>
-        <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
+        <p class="lead text-body-secondary">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
         <p>
           <a href="#" class="btn btn-primary my-2">Main call to action</a>
           <a href="#" class="btn btn-secondary my-2">Secondary action</a>
@@ -50,7 +50,7 @@ title: Album example
     </div>
   </section>
 
-  <div class="album py-5 bg-light">
+  <div class="album py-5 bg-body-tertiary">
     <div class="container">
 
       <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
@@ -64,7 +64,7 @@ title: Album example
                   <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                 </div>
-                <small class="text-muted">9 mins</small>
+                <small class="text-body-secondary">9 mins</small>
               </div>
             </div>
           </div>
@@ -79,7 +79,7 @@ title: Album example
                   <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                 </div>
-                <small class="text-muted">9 mins</small>
+                <small class="text-body-secondary">9 mins</small>
               </div>
             </div>
           </div>
@@ -94,7 +94,7 @@ title: Album example
                   <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                 </div>
-                <small class="text-muted">9 mins</small>
+                <small class="text-body-secondary">9 mins</small>
               </div>
             </div>
           </div>
@@ -110,7 +110,7 @@ title: Album example
                   <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                 </div>
-                <small class="text-muted">9 mins</small>
+                <small class="text-body-secondary">9 mins</small>
               </div>
             </div>
           </div>
@@ -125,7 +125,7 @@ title: Album example
                   <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                 </div>
-                <small class="text-muted">9 mins</small>
+                <small class="text-body-secondary">9 mins</small>
               </div>
             </div>
           </div>
@@ -140,7 +140,7 @@ title: Album example
                   <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                 </div>
-                <small class="text-muted">9 mins</small>
+                <small class="text-body-secondary">9 mins</small>
               </div>
             </div>
           </div>
@@ -156,7 +156,7 @@ title: Album example
                   <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                 </div>
-                <small class="text-muted">9 mins</small>
+                <small class="text-body-secondary">9 mins</small>
               </div>
             </div>
           </div>
@@ -171,7 +171,7 @@ title: Album example
                   <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                 </div>
-                <small class="text-muted">9 mins</small>
+                <small class="text-body-secondary">9 mins</small>
               </div>
             </div>
           </div>
@@ -186,7 +186,7 @@ title: Album example
                   <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                 </div>
-                <small class="text-muted">9 mins</small>
+                <small class="text-body-secondary">9 mins</small>
               </div>
             </div>
           </div>
@@ -197,7 +197,7 @@ title: Album example
 
 </main>
 
-<footer class="text-muted py-5">
+<footer class="text-body-secondary py-5">
   <div class="container">
     <p class="float-end mb-1">
       <a href="#">Back to top</a>
diff --git a/site/content/docs/5.2/examples/blog-rtl/index.html b/site/content/docs/5.3/examples/blog-rtl/index.html
index 05af925..274ea0e 100644
--- a/site/content/docs/5.2/examples/blog-rtl/index.html
+++ b/site/content/docs/5.3/examples/blog-rtl/index.html
@@ -5,17 +5,29 @@ direction: rtl
 extra_css:
   - "https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap"
   - "../blog/blog.rtl.css"
-include_js: false
 ---
 
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
+    <circle cx="12" cy="12" r="10"/>
+    <path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/>
+  </symbol>
+  <symbol id="cart" viewBox="0 0 16 16">
+    <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+  </symbol>
+  <symbol id="chevron-right" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+  </symbol>
+</svg>
+
 <div class="container">
-  <header class="blog-header lh-1 py-3">
+  <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="#">الإشتراك في النشرة البريدية</a>
       </div>
       <div class="col-4 text-center">
-        <a class="blog-header-logo text-dark" href="#">كبير</a>
+        <a class="blog-header-logo text-body-emphasis text-decoration-none" href="#">كبير</a>
       </div>
       <div class="col-4 d-flex justify-content-end align-items-center">
         <a class="link-secondary" href="#" aria-label="بحث">
@@ -26,30 +38,30 @@ include_js: false
     </div>
   </header>
 
-  <div class="nav-scroller py-1 mb-2">
-    <nav class="nav d-flex justify-content-between">
-      <a class="p-2 link-secondary" href="#">العالم</a>
-      <a class="p-2 link-secondary" href="#">الولايات المتحدة</a>
-      <a class="p-2 link-secondary" href="#">التقنية</a>
-      <a class="p-2 link-secondary" href="#">التصميم</a>
-      <a class="p-2 link-secondary" href="#">الحضارة</a>
-      <a class="p-2 link-secondary" href="#">المال والأعمال</a>
-      <a class="p-2 link-secondary" href="#">السياسة</a>
-      <a class="p-2 link-secondary" href="#">الرأي العام</a>
-      <a class="p-2 link-secondary" href="#">العلوم</a>
-      <a class="p-2 link-secondary" href="#">الصحة</a>
-      <a class="p-2 link-secondary" href="#">الموضة</a>
-      <a class="p-2 link-secondary" href="#">السفر</a>
+  <div class="nav-scroller py-1 mb-3 border-bottom">
+    <nav class="nav nav-underline justify-content-between">
+      <a class="nav-item nav-link link-body-emphasis active" href="#">العالم</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">الولايات المتحدة</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">التقنية</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">التصميم</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">الحضارة</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">المال والأعمال</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">السياسة</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">الرأي العام</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">العلوم</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">الصحة</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">الموضة</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">السفر</a>
     </nav>
   </div>
 </div>
 
 <main class="container">
-  <div class="p-4 p-md-5 mb-4 rounded text-bg-dark">
-    <div class="col-md-6 px-0">
+  <div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary">
+    <div class="col-lg-6 px-0">
       <h1 class="display-4 fst-italic">عنوان تدوينة مميزة أطول</h1>
       <p class="lead my-3">عدة أسطر نصية متعددة تعبر عن التدوية، وذلك لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه التدوينة.</p>
-      <p class="lead mb-0"><a href="#" class="text-white fw-bold">أكمل القراءة...</a></p>
+      <p class="lead mb-0"><a href="#" class="text-body-emphasis fw-bold">أكمل القراءة...</a></p>
     </div>
   </div>
 
@@ -57,11 +69,14 @@ include_js: false
     <div class="col-md-6">
       <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
         <div class="col p-4 d-flex flex-column position-static">
-          <strong class="d-inline-block mb-2 text-primary">العالم</strong>
+          <strong class="d-inline-block mb-2 text-primary-emphasis">العالم</strong>
           <h3 class="mb-0">مشاركة مميزة</h3>
-          <div class="mb-1 text-muted">نوفمبر 12</div>
+          <div class="mb-1 text-body-secondary">نوفمبر 12</div>
           <p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
-          <a href="#" class="stretched-link">أكمل القراءة</a>
+          <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
+            أكمل القراءة
+            <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+          </a>
         </div>
         <div class="col-auto d-none d-lg-block">
           {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}}
@@ -71,11 +86,14 @@ include_js: false
     <div class="col-md-6">
       <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
         <div class="col p-4 d-flex flex-column position-static">
-          <strong class="d-inline-block mb-2 text-success">التصميم</strong>
+          <strong class="d-inline-block mb-2 text-success-emphasis">التصميم</strong>
           <h3 class="mb-0">عنوان الوظيفة</h3>
-          <div class="mb-1 text-muted">نوفمبر 11</div>
+          <div class="mb-1 text-body-secondary">نوفمبر 11</div>
           <p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
-          <a href="#" class="stretched-link">أكمل القراءة</a>
+          <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
+            أكمل القراءة
+            <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+          </a>
         </div>
         <div class="col-auto d-none d-lg-block">
           {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}}
@@ -84,20 +102,20 @@ include_js: false
     </div>
   </div>
 
-  <div class="row">
+  <div class="row g-5">
     <div class="col-md-8">
       <h3 class="pb-4 mb-4 fst-italic border-bottom">
         من Firehose
       </h3>
 
       <article class="blog-post">
-        <h2 class="blog-post-title mb-1">مثال على تدوينة</h2>
+        <h2 class="display-5 link-body-emphasis mb-1">مثال على تدوينة</h2>
         <p class="blog-post-meta">1 يناير 2021 بواسطة <a href="#"> Mark </a></p>
 
         <p>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد مدعومة بشكل كامل.</p>
         <hr>
         <p>يشكِّل تأمين الغذاء في المستقبل قضية تؤرِّق حكومات العالَم والعلماء على حدٍّ سواء. فخلال القرن العشرين ازداد عدد سكان الأرض أربعة أضعاف، وتشير التقديرات إلى أن العدد سوف يصل إلى عشرة مليارات إنسان بحلول عام 2050م. وسوف تمثل هذه الزيادة الهائلة تحدياً كبيراً وضغطاً متصاعداً على قدرة الإنتاج الزراعي. الأمر الذي كان ولا بد من أن يدفع إلى تطوير تقنيات مبتكرة في تصنيع الغذاء غير الزراعة، منها تقنية مستقبلية تقوم على تصنيع الغذاء من الهواء.</p>
-        <blockquote>
+        <blockquote class="blockquote">
           <p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه، كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية</p>
         </blockquote>
         <p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه. كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية، وللمقارنة فإن هذه النسبة من الانبعاثات هي أكبر مما ينتجه قطاع النقل بكل ما فيه من سيارات وشاحنات وطائرات وقطارات.</p>
@@ -126,7 +144,7 @@ include_js: false
       </article>
 
       <article class="blog-post">
-        <h2 class="blog-post-title mb-1">تدوينة أخرى</h2>
+        <h2 class="display-5 link-body-emphasis mb-1">تدوينة أخرى</h2>
         <p class="blog-post-meta">23 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p>
 
         <p>في الوقت الحالي، تدرس عدَّة شركات هذه الميكروبات بشكل أعمق، وتستزرعها من أجل الحصول على الغذاء. ففي عام 2019م، أعلن باحثون في شركة (Air Protein) الأمريكية نجاحهم في تحويل ثاني أكسيد الكربون الموجود في الهواء إلى لحوم صناعية مصنوعة من البروتين، التي لا تتطلَّب أي أرض زراعية، بل هي معتمدة بشكل أساسي على الهواء.</p>
@@ -138,7 +156,7 @@ include_js: false
       </article>
 
       <article class="blog-post">
-        <h2 class="blog-post-title mb-1">ميزة جديدة</h2>
+        <h2 class="display-5 link-body-emphasis mb-1">ميزة جديدة</h2>
         <p class="blog-post-meta">14 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p>
 
         <p>كما أن الشركة الفنلندية (Solar Foods) طوَّرت تقنية لإنتاج البروتين من الهواء، حيث تبدأ العملية بتقسيم الماء إلى مكوناته الهيدروجين والأكسجين عن طريق الكهرباء. فالهيدروجين يوفِّر الطاقة للبكتريا لتحويل ثاني أكسيد الكربون والنيتروجين الموجودين في الهواء إلى مادة عضوية غنية بالبروتين بشكل أكفأ من نمو النباتات باستخدام البناء الضوئي. وهذا البروتين يشبه دقيق القمح وقد أطلق عليه اسم "سولين" (Solein).</p>
@@ -161,11 +179,44 @@ include_js: false
 
     <div class="col-md-4">
       <div class="position-sticky" style="top: 2rem;">
-        <div class="p-4 mb-3 bg-light rounded">
+        <div class="p-4 mb-3 bg-body-tertiary rounded">
           <h4 class="fst-italic">حول</h4>
           <p class="mb-0">أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.</p>
         </div>
 
+        <div>
+          <h4 class="fst-italic">المشاركات الاخيرة</h4>
+          <ul class="list-unstyled">
+            <li>
+              <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
+                {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
+                <div class="col-lg-8">
+                  <h6 class="mb-0">مثال على عنوان منشور المدونة</h6>
+                  <small class="text-body-secondary">15 يناير 2023</small>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
+                {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
+                <div class="col-lg-8">
+                  <h6 class="mb-0">هذا عنوان آخر للمدونة</h6>
+                  <small class="text-body-secondary">14 يناير 2023</small>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
+                {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
+                <div class="col-lg-8">
+                  <h6 class="mb-0">أطول عنوان منشور للمدونة: يحتوي هذا الخط على عدة أسطر!</h6>
+                  <small class="text-body-secondary">13 يناير 2023</small>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </div>
+
         <div class="p-4">
           <h4 class="fst-italic">الأرشيف</h4>
           <ol class="list-unstyled mb-0">
@@ -198,9 +249,9 @@ include_js: false
 
 </main>
 
-<footer class="blog-footer">
+<footer class="py-5 text-center text-body-secondary bg-body-tertiary">
   <p>تم تصميم نموذج المدونة لـ <a href="https://getbootstrap.com/">Bootstrap</a> بواسطة <a href="https://twitter.com/mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>.</p>
-  <p>
+  <p class="mb-0">
     <a href="#">عد إلى الأعلى</a>
   </p>
 </footer>
diff --git a/site/content/docs/5.2/examples/blog/blog.css b/site/content/docs/5.3/examples/blog/blog.css
index cc5fc74..ddbca5a 100644
--- a/site/content/docs/5.2/examples/blog/blog.css
+++ b/site/content/docs/5.3/examples/blog/blog.css
@@ -1,8 +1,4 @@
-/* stylelint-disable selector-list-comma-newline-after */
-
-.blog-header {
-  border-bottom: 1px solid #e5e5e5;
-}
+/* stylelint-disable stylistic/selector-list-comma-newline-after */
 
 .blog-header-logo {
   font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
@@ -17,15 +13,6 @@ h1, h2, h3, h4, h5, h6 {
   font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
 }
 
-.display-4 {
-  font-size: 2.5rem;
-}
-@media (min-width: 768px) {
-  .display-4 {
-    font-size: 3rem;
-  }
-}
-
 .flex-auto {
   flex: 0 0 auto;
 }
@@ -46,24 +33,7 @@ h1, h2, h3, h4, h5, h6 {
 .blog-post {
   margin-bottom: 4rem;
 }
-.blog-post-title {
-  font-size: 2.5rem;
-}
 .blog-post-meta {
   margin-bottom: 1.25rem;
   color: #727272;
 }
-
-/*
- * Footer
- */
-.blog-footer {
-  padding: 2.5rem 0;
-  color: #727272;
-  text-align: center;
-  background-color: #f9f9f9;
-  border-top: .05rem solid #e5e5e5;
-}
-.blog-footer p:last-child {
-  margin-bottom: 0;
-}
diff --git a/site/content/docs/5.2/examples/blog/blog.rtl.css b/site/content/docs/5.3/examples/blog/blog.rtl.css
index fc03c35..043d4e6 100644
--- a/site/content/docs/5.2/examples/blog/blog.rtl.css
+++ b/site/content/docs/5.3/examples/blog/blog.rtl.css
@@ -1,8 +1,4 @@
-/* stylelint-disable selector-list-comma-newline-after */
-
-.blog-header {
-  border-bottom: 1px solid #e5e5e5;
-}
+/* stylelint-disable stylistic/selector-list-comma-newline-after */
 
 .blog-header-logo {
   font-family: Amiri, Georgia, "Times New Roman", serif;
@@ -17,15 +13,6 @@ h1, h2, h3, h4, h5, h6 {
   font-family: Amiri, Georgia, "Times New Roman", serif;
 }
 
-.display-4 {
-  font-size: 2.5rem;
-}
-@media (min-width: 768px) {
-  .display-4 {
-    font-size: 3rem;
-  }
-}
-
 .flex-auto {
   flex: 0 0 auto;
 }
@@ -46,24 +33,7 @@ h1, h2, h3, h4, h5, h6 {
 .blog-post {
   margin-bottom: 4rem;
 }
-.blog-post-title {
-  font-size: 2.5rem;
-}
 .blog-post-meta {
   margin-bottom: 1.25rem;
   color: #727272;
 }
-
-/*
- * Footer
- */
-.blog-footer {
-  padding: 2.5rem 0;
-  color: #727272;
-  text-align: center;
-  background-color: #f9f9f9;
-  border-top: .05rem solid #e5e5e5;
-}
-.blog-footer p:last-child {
-  margin-bottom: 0;
-}
diff --git a/site/content/docs/5.2/examples/blog/index.html b/site/content/docs/5.3/examples/blog/index.html
index 6b60ea0..d0d6f08 100644
--- a/site/content/docs/5.2/examples/blog/index.html
+++ b/site/content/docs/5.3/examples/blog/index.html
@@ -4,17 +4,29 @@ title: Blog Template
 extra_css:
   - "https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap"
   - "blog.css"
-include_js: false
 ---
 
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
+    <circle cx="12" cy="12" r="10"/>
+    <path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/>
+  </symbol>
+  <symbol id="cart" viewBox="0 0 16 16">
+    <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+  </symbol>
+  <symbol id="chevron-right" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+  </symbol>
+</svg>
+
 <div class="container">
-  <header class="blog-header lh-1 py-3">
+  <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>
       </div>
       <div class="col-4 text-center">
-        <a class="blog-header-logo text-dark" href="#">Large</a>
+        <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">
@@ -25,30 +37,30 @@ include_js: false
     </div>
   </header>
 
-  <div class="nav-scroller py-1 mb-2">
-    <nav class="nav d-flex justify-content-between">
-      <a class="p-2 link-secondary" href="#">World</a>
-      <a class="p-2 link-secondary" href="#">U.S.</a>
-      <a class="p-2 link-secondary" href="#">Technology</a>
-      <a class="p-2 link-secondary" href="#">Design</a>
-      <a class="p-2 link-secondary" href="#">Culture</a>
-      <a class="p-2 link-secondary" href="#">Business</a>
-      <a class="p-2 link-secondary" href="#">Politics</a>
-      <a class="p-2 link-secondary" href="#">Opinion</a>
-      <a class="p-2 link-secondary" href="#">Science</a>
-      <a class="p-2 link-secondary" href="#">Health</a>
-      <a class="p-2 link-secondary" href="#">Style</a>
-      <a class="p-2 link-secondary" href="#">Travel</a>
+  <div class="nav-scroller py-1 mb-3 border-bottom">
+    <nav class="nav nav-underline justify-content-between">
+      <a class="nav-item nav-link link-body-emphasis active" href="#">World</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">U.S.</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">Technology</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">Design</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">Culture</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">Business</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">Politics</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">Opinion</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">Science</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">Health</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">Style</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">Travel</a>
     </nav>
   </div>
 </div>
 
 <main class="container">
-  <div class="p-4 p-md-5 mb-4 rounded text-bg-dark">
-    <div class="col-md-6 px-0">
+  <div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary">
+    <div class="col-lg-6 px-0">
       <h1 class="display-4 fst-italic">Title of a longer featured blog post</h1>
       <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
-      <p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
+      <p class="lead mb-0"><a href="#" class="text-body-emphasis fw-bold">Continue reading...</a></p>
     </div>
   </div>
 
@@ -56,11 +68,14 @@ include_js: false
     <div class="col-md-6">
       <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
         <div class="col p-4 d-flex flex-column position-static">
-          <strong class="d-inline-block mb-2 text-primary">World</strong>
+          <strong class="d-inline-block mb-2 text-primary-emphasis">World</strong>
           <h3 class="mb-0">Featured post</h3>
-          <div class="mb-1 text-muted">Nov 12</div>
+          <div class="mb-1 text-body-secondary">Nov 12</div>
           <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
-          <a href="#" class="stretched-link">Continue reading</a>
+          <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
+            Continue reading
+            <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+          </a>
         </div>
         <div class="col-auto d-none d-lg-block">
           {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
@@ -70,11 +85,14 @@ include_js: false
     <div class="col-md-6">
       <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
         <div class="col p-4 d-flex flex-column position-static">
-          <strong class="d-inline-block mb-2 text-success">Design</strong>
+          <strong class="d-inline-block mb-2 text-success-emphasis">Design</strong>
           <h3 class="mb-0">Post title</h3>
-          <div class="mb-1 text-muted">Nov 11</div>
+          <div class="mb-1 text-body-secondary">Nov 11</div>
           <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
-          <a href="#" class="stretched-link">Continue reading</a>
+          <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
+            Continue reading
+            <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+          </a>
         </div>
         <div class="col-auto d-none d-lg-block">
           {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
@@ -90,7 +108,7 @@ include_js: false
       </h3>
 
       <article class="blog-post">
-        <h2 class="blog-post-title mb-1">Sample blog post</h2>
+        <h2 class="display-5 link-body-emphasis mb-1">Sample blog post</h2>
         <p class="blog-post-meta">January 1, 2021 by <a href="#">Mark</a></p>
 
         <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.</p>
@@ -144,7 +162,7 @@ include_js: false
       </article>
 
       <article class="blog-post">
-        <h2 class="blog-post-title mb-1">Another blog post</h2>
+        <h2 class="display-5 link-body-emphasis mb-1">Another blog post</h2>
         <p class="blog-post-meta">December 23, 2020 by <a href="#">Jacob</a></p>
 
         <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
@@ -192,7 +210,7 @@ include_js: false
       </article>
 
       <article class="blog-post">
-        <h2 class="blog-post-title mb-1">New feature</h2>
+        <h2 class="display-5 link-body-emphasis mb-1">New feature</h2>
         <p class="blog-post-meta">December 14, 2020 by <a href="#">Chris</a></p>
 
         <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
@@ -213,11 +231,44 @@ include_js: false
 
     <div class="col-md-4">
       <div class="position-sticky" style="top: 2rem;">
-        <div class="p-4 mb-3 bg-light rounded">
+        <div class="p-4 mb-3 bg-body-tertiary rounded">
           <h4 class="fst-italic">About</h4>
           <p class="mb-0">Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.</p>
         </div>
 
+        <div>
+          <h4 class="fst-italic">Recent posts</h4>
+          <ul class="list-unstyled">
+            <li>
+              <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
+                {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
+                <div class="col-lg-8">
+                  <h6 class="mb-0">Example blog post title</h6>
+                  <small class="text-body-secondary">January 15, 2023</small>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
+                {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
+                <div class="col-lg-8">
+                  <h6 class="mb-0">This is another blog post title</h6>
+                  <small class="text-body-secondary">January 14, 2023</small>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
+                {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
+                <div class="col-lg-8">
+                  <h6 class="mb-0">Longer blog post title: This one has multiple lines!</h6>
+                  <small class="text-body-secondary">January 13, 2023</small>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </div>
+
         <div class="p-4">
           <h4 class="fst-italic">Archives</h4>
           <ol class="list-unstyled mb-0">
@@ -250,9 +301,9 @@ include_js: false
 
 </main>
 
-<footer class="blog-footer">
+<footer class="py-5 text-center text-body-secondary bg-body-tertiary">
   <p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
-  <p>
+  <p class="mb-0">
     <a href="#">Back to top</a>
   </p>
 </footer>
diff --git a/site/content/docs/5.2/examples/carousel-rtl/index.html b/site/content/docs/5.3/examples/carousel-rtl/index.html
index b8c35d6..db184d7 100644
--- a/site/content/docs/5.2/examples/carousel-rtl/index.html
+++ b/site/content/docs/5.3/examples/carousel-rtl/index.html
@@ -6,7 +6,7 @@ extra_css:
   - "../carousel/carousel.rtl.css"
 ---
 
-<header>
+<header data-bs-theme="dark">
   <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">شرائح العرض</a>
@@ -36,7 +36,7 @@ extra_css:
 
 <main>
 
-  <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
+  <div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel" data-bs-theme="light">
     <div class="carousel-indicators">
       <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
       <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
@@ -44,17 +44,17 @@ extra_css:
     </div>
     <div class="carousel-inner">
       <div class="carousel-item active">
-        {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+        {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
         <div class="container">
           <div class="carousel-caption text-start">
             <h1>عنوان المثال.</h1>
-            <p>تشير الدراسات الإحصائية حسب الجمعية الأمريكية للغات بأن الإقبال على العربية زاد %126 في الولايات المتحدة الأمريكية وحدها بين عامي 2002 و2009م.</p>
+            <p class="opacity-75">تشير الدراسات الإحصائية حسب الجمعية الأمريكية للغات بأن الإقبال على العربية زاد %126 في الولايات المتحدة الأمريكية وحدها بين عامي 2002 و2009م.</p>
             <p><a class="btn btn-lg btn-primary" href="#">سجل اليوم</a></p>
           </div>
         </div>
       </div>
       <div class="carousel-item">
-        {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+        {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
         <div class="container">
           <div class="carousel-caption">
             <h1>عنوان مثال آخر.</h1>
@@ -64,7 +64,7 @@ extra_css:
         </div>
       </div>
       <div class="carousel-item">
-        {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+        {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
         <div class="container">
           <div class="carousel-caption text-end">
             <h1>واحد أكثر لقياس جيد.</h1>
@@ -94,19 +94,19 @@ extra_css:
     <!-- Three columns of text below the carousel -->
     <div class="row">
       <div class="col-lg-4">
-        {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
+        {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
         <h2 class="fw-normal">عنوان</h2>
         <p>تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على التحليل، والقدرة على التأليف، والاستدلال المنطقي.</p>
         <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
-        {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
+        {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
         <h2 class="fw-normal">عنوان آخر</h2>
         <p>إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية، والمعالجة النحوية، والمعالجة الدلالية.</p>
         <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
-        {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
+        {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
         <h2 class="fw-normal">عنوان ثالث لتأكيد المعلومة</h2>
         <p>بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.</p>
         <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
@@ -120,11 +120,11 @@ extra_css:
 
     <div class="row featurette">
       <div class="col-md-7">
-        <h2 class="featurette-heading fw-normal lh-1">العنوان الأول المميز. <span class="text-muted"> سيذهل عقلك. </span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">العنوان الأول المميز. <span class="text-body-secondary"> سيذهل عقلك. </span></h2>
         <p class="lead">وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.</p>
       </div>
       <div class="col-md-5">
-        {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+        {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
       </div>
     </div>
 
@@ -132,11 +132,11 @@ extra_css:
 
     <div class="row featurette">
       <div class="col-md-7 order-md-2">
-        <h2 class="featurette-heading fw-normal lh-1">أوه نعم، هذا جيد. <span class="text-muted"> شاهد بنفسك. </span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">أوه نعم، هذا جيد. <span class="text-body-secondary"> شاهد بنفسك. </span></h2>
         <p class="lead">عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.</p>
       </div>
       <div class="col-md-5 order-md-1">
-        {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+        {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
       </div>
     </div>
 
@@ -144,11 +144,11 @@ extra_css:
 
     <div class="row featurette">
       <div class="col-md-7">
-        <h2 class="featurette-heading fw-normal lh-1">وأخيرًا، هذا. <span class="text-muted"> كش ملك. </span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">وأخيرًا، هذا. <span class="text-body-secondary"> كش ملك. </span></h2>
         <p class="lead">إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ</p>
       </div>
       <div class="col-md-5">
-        {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+        {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
       </div>
     </div>
 
diff --git a/site/content/docs/5.2/examples/carousel/carousel.css b/site/content/docs/5.3/examples/carousel/carousel.css
index 0bdf976..be0af52 100644
--- a/site/content/docs/5.2/examples/carousel/carousel.css
+++ b/site/content/docs/5.3/examples/carousel/carousel.css
@@ -5,7 +5,7 @@
 body {
   padding-top: 3rem;
   padding-bottom: 3rem;
-  color: #5a5a5a;
+  color: rgb(var(--bs-tertiary-color-rgb));
 }
 
 
diff --git a/site/content/docs/5.2/examples/carousel/carousel.rtl.css b/site/content/docs/5.3/examples/carousel/carousel.rtl.css
index d20a811..9ff275d 100644
--- a/site/content/docs/5.2/examples/carousel/carousel.rtl.css
+++ b/site/content/docs/5.3/examples/carousel/carousel.rtl.css
@@ -5,7 +5,7 @@
 body {
   padding-top: 3rem;
   padding-bottom: 3rem;
-  color: #5a5a5a;
+  color: rgb(var(--bs-tertiary-color-rgb));
 }
 
 
diff --git a/site/content/docs/5.2/examples/carousel/index.html b/site/content/docs/5.3/examples/carousel/index.html
index 67c0dd5..e03f4d7 100644
--- a/site/content/docs/5.2/examples/carousel/index.html
+++ b/site/content/docs/5.3/examples/carousel/index.html
@@ -5,7 +5,7 @@ extra_css:
   - "carousel.css"
 ---
 
-<header>
+<header data-bs-theme="dark">
   <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Carousel</a>
@@ -35,7 +35,7 @@ extra_css:
 
 <main>
 
-  <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
+  <div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel" data-bs-theme="light">
     <div class="carousel-indicators">
       <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
       <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
@@ -43,17 +43,17 @@ extra_css:
     </div>
     <div class="carousel-inner">
       <div class="carousel-item active">
-        {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+        {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
         <div class="container">
           <div class="carousel-caption text-start">
             <h1>Example headline.</h1>
-            <p>Some representative placeholder content for the first slide of the carousel.</p>
+            <p class="opacity-75">Some representative placeholder content for the first slide of the carousel.</p>
             <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
           </div>
         </div>
       </div>
       <div class="carousel-item">
-        {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+        {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
         <div class="container">
           <div class="carousel-caption">
             <h1>Another example headline.</h1>
@@ -63,7 +63,7 @@ extra_css:
         </div>
       </div>
       <div class="carousel-item">
-        {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+        {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
         <div class="container">
           <div class="carousel-caption text-end">
             <h1>One more for good measure.</h1>
@@ -93,19 +93,19 @@ extra_css:
     <!-- Three columns of text below the carousel -->
     <div class="row">
       <div class="col-lg-4">
-        {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
+        {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
         <h2 class="fw-normal">Heading</h2>
         <p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
         <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
-        {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
+        {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
         <h2 class="fw-normal">Heading</h2>
         <p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
         <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
-        {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
+        {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
         <h2 class="fw-normal">Heading</h2>
         <p>And lastly this, the third column of representative placeholder content.</p>
         <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
@@ -119,11 +119,11 @@ extra_css:
 
     <div class="row featurette">
       <div class="col-md-7">
-        <h2 class="featurette-heading fw-normal lh-1">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">First featurette heading. <span class="text-body-secondary">It’ll blow your mind.</span></h2>
         <p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
       </div>
       <div class="col-md-5">
-        {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+        {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
       </div>
     </div>
 
@@ -131,11 +131,11 @@ extra_css:
 
     <div class="row featurette">
       <div class="col-md-7 order-md-2">
-        <h2 class="featurette-heading fw-normal lh-1">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">Oh yeah, it’s that good. <span class="text-body-secondary">See for yourself.</span></h2>
         <p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
       </div>
       <div class="col-md-5 order-md-1">
-        {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+        {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
       </div>
     </div>
 
@@ -143,11 +143,11 @@ extra_css:
 
     <div class="row featurette">
       <div class="col-md-7">
-        <h2 class="featurette-heading fw-normal lh-1">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">And lastly, this one. <span class="text-body-secondary">Checkmate.</span></h2>
         <p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
       </div>
       <div class="col-md-5">
-        {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+        {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
       </div>
     </div>
 
diff --git a/site/content/docs/5.2/examples/cheatsheet-rtl/index.html b/site/content/docs/5.3/examples/cheatsheet-rtl/index.html
index a057998..8ffbb57 100644
--- a/site/content/docs/5.2/examples/cheatsheet-rtl/index.html
+++ b/site/content/docs/5.3/examples/cheatsheet-rtl/index.html
@@ -5,7 +5,7 @@ extra_css:
   - "../cheatsheet/cheatsheet.rtl.css"
 extra_js:
   - src: "../cheatsheet/cheatsheet.js"
-body_class: "bg-light"
+body_class: "bg-body-tertiary"
 direction: rtl
 ---
 
@@ -18,7 +18,7 @@ direction: rtl
     <a href="{{< docsref "/examples/cheatsheet" >}}" class="ms-auto link-light" hreflang="en">جدول بيانات LTR</a>
   </div>
 </header>
-<aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-2">
+<aside class="bd-aside sticky-xl-top text-body-secondary align-self-start mb-3 mb-xl-5 px-2">
   <h2 class="h6 pt-4 pb-3 mb-4 border-bottom">على هذه الصفحة</h2>
   <nav class="small" id="toc">
     <ul class="list-unstyled">
@@ -623,36 +623,36 @@ direction: rtl
         {{< example show_markup="false" >}}
         <div class="accordion" id="accordionExample">
           <div class="accordion-item">
-            <h4 class="accordion-header" id="headingOne">
+            <h4 class="accordion-header">
               <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                 عنصر المطوية الأول
               </button>
             </h4>
-            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+            <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
               <div class="accordion-body">
                 <strong>هذا هو محتوى عنصر المطوية الأول.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
               </div>
             </div>
           </div>
           <div class="accordion-item">
-            <h4 class="accordion-header" id="headingTwo">
+            <h4 class="accordion-header">
               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                 عنصر المطوية الثاني
               </button>
             </h4>
-            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
+            <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
               <div class="accordion-body">
                 <strong>هذا هو محتوى عنصر المطوية الثاني.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
               </div>
             </div>
           </div>
           <div class="accordion-item">
-            <h4 class="accordion-header" id="headingThree">
+            <h4 class="accordion-header">
               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                 عنصر المطوية الثالث
               </button>
             </h4>
-            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+            <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
               <div class="accordion-body">
                 <strong>هذا هو محتوى عنصر المطوية الثالث.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
               </div>
@@ -821,7 +821,7 @@ direction: rtl
                 <p class="card-text">بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p>
                 <a href="#" class="btn btn-primary">اذهب لمكان ما</a>
               </div>
-              <div class="card-footer text-muted">
+              <div class="card-footer text-body-secondary">
                 منذ يومان
               </div>
             </div>
@@ -853,7 +853,7 @@ direction: rtl
                   <div class="card-body">
                     <h5 class="card-title">عنوان البطاقة</h5>
                     <p class="card-text">هذه بطاقة أعرض مع نص داعم تحتها كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
-                    <p class="card-text"><small class="text-muted">آخر تحديث منذ 3 دقائق</small></p>
+                    <p class="card-text"><small class="text-body-secondary">آخر تحديث منذ 3 دقائق</small></p>
                   </div>
                 </div>
               </div>
@@ -1221,7 +1221,7 @@ direction: rtl
 
       <div>
         {{< example show_markup="false" >}}
-        <nav class="navbar navbar-expand-lg bg-light">
+        <nav class="navbar navbar-expand-lg bg-body-tertiary">
           <div class="container-fluid">
             <a class="navbar-brand" href="#">
               <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
@@ -1397,27 +1397,31 @@ direction: rtl
 
       <div>
         {{< example show_markup="false" >}}
-        <div class="progress mb-3">
-          <div class="progress-bar" role="progressbar" aria-label="مثال مع عنوان" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
+        <div class="progress mb-3" role="progressbar" aria-label="مثال مع عنوان" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-bar">0%</div>
         </div>
-        <div class="progress mb-3">
-          <div class="progress-bar bg-success w-25" role="progressbar" aria-label="مثال ناجح مع عنوان" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
+        <div class="progress mb-3" role="progressbar" aria-label="مثال ناجح مع عنوان" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-bar bg-success w-25">25%</div>
         </div>
-        <div class="progress mb-3">
-          <div class="progress-bar text-bg-info w-50" role="progressbar" aria-label="مثال توضيح مع عنوان" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
+        <div class="progress mb-3" role="progressbar" aria-label="مثال توضيح مع عنوان" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-bar text-bg-info w-50">50%</div>
         </div>
-        <div class="progress mb-3">
-          <div class="progress-bar text-bg-warning w-75" role="progressbar" aria-label="مثال تنبيه مع عنوان" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
+        <div class="progress mb-3" role="progressbar" aria-label="مثال تنبيه مع عنوان" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-bar text-bg-warning w-75">75%</div>
         </div>
-        <div class="progress">
-          <div class="progress-bar bg-danger w-100" role="progressbar" aria-label="مثال خطر مع عنوان" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
+        <div class="progress" role="progressbar" aria-label="مثال خطر مع عنوان" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-bar bg-danger w-100">100%</div>
         </div>
         {{< /example >}}
 
         {{< example show_markup="false" >}}
-        <div class="progress">
-          <div class="progress-bar" role="progressbar" aria-label="القسم الأول - مثال افتراضي" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
-          <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-label="القسم الثاني - مثال ناجح مقلّم متحرك" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
+        <div class="progress-stacked">
+          <div class="progress" role="progressbar" aria-label="القسم الأول - مثال افتراضي" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
+            <div class="progress-bar"></div>
+          </div>
+          <div class="progress" role="progressbar" aria-label="القسم الثاني - مثال ناجح مقلّم متحرك" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
+            <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
+          </div>
         </div>
         {{< /example >}}
       </div>
@@ -1430,7 +1434,7 @@ direction: rtl
 
       <div>
         <div class="bd-example">
-          <nav id="navbar-example2" class="navbar bg-light px-3">
+          <nav id="navbar-example2" class="navbar bg-body-tertiary px-3">
             <a class="navbar-brand" href="#">شريط التنقل</a>
             <ul class="nav nav-pills">
               <li class="nav-item">
@@ -1506,7 +1510,7 @@ direction: rtl
           <div class="toast-header">
             {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
             <strong class="me-auto">Bootstrap</strong>
-            <small class="text-muted">قبل 11 دقيقة</small>
+            <small class="text-body-secondary">قبل 11 دقيقة</small>
             <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="قريب"></button>
           </div>
           <div class="toast-body">
diff --git a/site/content/docs/5.2/examples/cheatsheet/cheatsheet.css b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.css
index e2f99b8..e2f99b8 100644
--- a/site/content/docs/5.2/examples/cheatsheet/cheatsheet.css
+++ b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.css
diff --git a/site/content/docs/5.2/examples/cheatsheet/cheatsheet.js b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.js
index e25a89e..e25a89e 100644
--- a/site/content/docs/5.2/examples/cheatsheet/cheatsheet.js
+++ b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.js
diff --git a/site/content/docs/5.2/examples/cheatsheet/cheatsheet.rtl.css b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.rtl.css
index e04d848..e04d848 100644
--- a/site/content/docs/5.2/examples/cheatsheet/cheatsheet.rtl.css
+++ b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.rtl.css
diff --git a/site/content/docs/5.2/examples/cheatsheet/index.html b/site/content/docs/5.3/examples/cheatsheet/index.html
index a2285d0..7470c4e 100644
--- a/site/content/docs/5.2/examples/cheatsheet/index.html
+++ b/site/content/docs/5.3/examples/cheatsheet/index.html
@@ -5,7 +5,7 @@ extra_css:
   - "cheatsheet.css"
 extra_js:
   - src: "cheatsheet.js"
-body_class: "bg-light"
+body_class: "bg-body-tertiary"
 ---
 
 <header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark">
@@ -17,7 +17,7 @@ body_class: "bg-light"
     <a href="{{< docsref "/examples/cheatsheet-rtl" >}}" class="ms-auto link-light" hreflang="ar">RTL cheatsheet</a>
   </div>
 </header>
-<aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-2">
+<aside class="bd-aside sticky-xl-top text-body-secondary align-self-start mb-3 mb-xl-5 px-2">
   <h2 class="h6 pt-4 pb-3 mb-4 border-bottom">On this page</h2>
   <nav class="small" id="toc">
     <ul class="list-unstyled">
@@ -622,36 +622,36 @@ body_class: "bg-light"
         {{< example show_markup="false" >}}
         <div class="accordion" id="accordionExample">
           <div class="accordion-item">
-            <h4 class="accordion-header" id="headingOne">
+            <h4 class="accordion-header">
               <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                 Accordion Item #1
               </button>
             </h4>
-            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+            <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
               <div class="accordion-body">
                 <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
               </div>
             </div>
           </div>
           <div class="accordion-item">
-            <h4 class="accordion-header" id="headingTwo">
+            <h4 class="accordion-header">
               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                 Accordion Item #2
               </button>
             </h4>
-            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
+            <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
               <div class="accordion-body">
                 <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
               </div>
             </div>
           </div>
           <div class="accordion-item">
-            <h4 class="accordion-header" id="headingThree">
+            <h4 class="accordion-header">
               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                 Accordion Item #3
               </button>
             </h4>
-            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+            <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
               <div class="accordion-body">
                 <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
               </div>
@@ -820,7 +820,7 @@ body_class: "bg-light"
                 <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                 <a href="#" class="btn btn-primary">Go somewhere</a>
               </div>
-              <div class="card-footer text-muted">
+              <div class="card-footer text-body-secondary">
                 2 days ago
               </div>
             </div>
@@ -852,7 +852,7 @@ body_class: "bg-light"
                   <div class="card-body">
                     <h5 class="card-title">Card title</h5>
                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+                    <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
                   </div>
                 </div>
               </div>
@@ -1220,7 +1220,7 @@ body_class: "bg-light"
 
       <div>
         {{< example show_markup="false" >}}
-        <nav class="navbar navbar-expand-lg bg-light">
+        <nav class="navbar navbar-expand-lg bg-body-tertiary">
           <div class="container-fluid">
             <a class="navbar-brand" href="#">
               <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
@@ -1394,27 +1394,31 @@ body_class: "bg-light"
 
       <div>
         {{< example show_markup="false" >}}
-        <div class="progress mb-3">
-          <div class="progress-bar" role="progressbar" aria-label="Example with label" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
+        <div class="progress mb-3" role="progressbar" aria-label="Example with label" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-bar">0%</div>
         </div>
-        <div class="progress mb-3">
-          <div class="progress-bar bg-success w-25" role="progressbar" aria-label="Success example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
+        <div class="progress mb-3" role="progressbar" aria-label="Success example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-bar bg-success w-25">25%</div>
         </div>
-        <div class="progress mb-3">
-          <div class="progress-bar text-bg-info w-50" role="progressbar" aria-label="Info example with label" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
+        <div class="progress mb-3" role="progressbar" aria-label="Info example with label" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-bar text-bg-info w-50">50%</div>
         </div>
-        <div class="progress mb-3">
-          <div class="progress-bar text-bg-warning w-75" role="progressbar" aria-label="Warning example with label" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
+        <div class="progress mb-3" role="progressbar" aria-label="Warning example with label" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-bar text-bg-warning w-75">75%</div>
         </div>
-        <div class="progress">
-          <div class="progress-bar bg-danger w-100" role="progressbar" aria-label="Danger example with label" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
+        <div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-bar bg-danger w-100">100%</div>
         </div>
         {{< /example >}}
 
         {{< example show_markup="false" >}}
-        <div class="progress">
-          <div class="progress-bar" role="progressbar" aria-label="Segment one - default example" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
-          <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-label="Segment two - animated striped success example" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
+        <div class="progress-stacked">
+          <div class="progress" role="progressbar" aria-label="Segment one - default example" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
+            <div class="progress-bar"></div>
+          </div>
+          <div class="progress" role="progressbar" aria-label="Segment two - animated striped success example" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
+            <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
+          </div>
         </div>
         {{< /example >}}
       </div>
@@ -1427,7 +1431,7 @@ body_class: "bg-light"
 
       <div>
         <div class="bd-example">
-          <nav id="navbar-example2" class="navbar bg-light px-3">
+          <nav id="navbar-example2" class="navbar bg-body-tertiary px-3">
             <a class="navbar-brand" href="#">Navbar</a>
             <ul class="nav nav-pills">
               <li class="nav-item">
@@ -1502,7 +1506,7 @@ body_class: "bg-light"
           <div class="toast-header">
             {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
             <strong class="me-auto">Bootstrap</strong>
-            <small class="text-muted">11 mins ago</small>
+            <small class="text-body-secondary">11 mins ago</small>
             <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
           </div>
           <div class="toast-body">
diff --git a/site/content/docs/5.2/examples/checkout-rtl/index.html b/site/content/docs/5.3/examples/checkout-rtl/index.html
index e0ca621..6516efe 100644
--- a/site/content/docs/5.2/examples/checkout-rtl/index.html
+++ b/site/content/docs/5.3/examples/checkout-rtl/index.html
@@ -3,10 +3,10 @@ layout: examples
 title: مثال إتمام الشراء
 direction: rtl
 extra_css:
-  - "../checkout/form-validation.css"
+  - "../checkout/checkout.css"
 extra_js:
-  - src: "../checkout/form-validation.js"
-body_class: "bg-light"
+  - src: "../checkout/checkout.js"
+body_class: "bg-body-tertiary"
 ---
 
 <div class="container">
@@ -20,32 +20,32 @@ body_class: "bg-light"
     <div class="row g-3">
       <div class="col-md-5 col-lg-4 order-md-last">
         <h4 class="d-flex justify-content-between align-items-center mb-3">
-          <span class="text-muted">عربة التسوق</span>
+          <span class="text-body-secondary">عربة التسوق</span>
           <span class="badge bg-secondary rounded-pill">3</span>
         </h4>
         <ul class="list-group mb-3">
           <li class="list-group-item d-flex justify-content-between lh-sm">
             <div>
               <h6 class="my-0">اسم المنتج</h6>
-              <small class="text-muted">وصف مختصر</small>
+              <small class="text-body-secondary">وصف مختصر</small>
             </div>
-            <span class="text-muted">$12</span>
+            <span class="text-body-secondary">$12</span>
           </li>
           <li class="list-group-item d-flex justify-content-between lh-sm">
             <div>
               <h6 class="my-0">المنتج الثاني</h6>
-              <small class="text-muted">وصف مختصر</small>
+              <small class="text-body-secondary">وصف مختصر</small>
             </div>
-            <span class="text-muted">$8</span>
+            <span class="text-body-secondary">$8</span>
           </li>
           <li class="list-group-item d-flex justify-content-between lh-sm">
             <div>
               <h6 class="my-0">البند الثالث</h6>
-              <small class="text-muted">وصف مختصر</small>
+              <small class="text-body-secondary">وصف مختصر</small>
             </div>
-            <span class="text-muted">$5</span>
+            <span class="text-body-secondary">$5</span>
           </li>
-          <li class="list-group-item d-flex justify-content-between bg-light">
+          <li class="list-group-item d-flex justify-content-between bg-body-tertiary">
             <div class="text-success">
               <h6 class="my-0">رمز ترويجي</h6>
               <small>EXAMPLECODE</small>
@@ -97,7 +97,7 @@ body_class: "bg-light"
             </div>
 
             <div class="col-12">
-              <label for="email" class="form-label">البريد الإلكتروني <span class="text-muted">(اختياري)</span></label>
+              <label for="email" class="form-label">البريد الإلكتروني <span class="text-body-secondary">(اختياري)</span></label>
               <input type="email" class="form-control" id="email" placeholder="you@example.com">
               <div class="invalid-feedback">
                 يرجى إدخال عنوان بريد إلكتروني صحيح لتصلكم تحديثات الشحن.
@@ -113,7 +113,7 @@ body_class: "bg-light"
             </div>
 
             <div class="col-12">
-              <label for="address2" class="form-label">عنوان 2 <span class="text-muted">(اختياري)</span></label>
+              <label for="address2" class="form-label">عنوان 2 <span class="text-body-secondary">(اختياري)</span></label>
               <input type="text" class="form-control" id="address2" placeholder="شقة 24">
             </div>
 
@@ -183,7 +183,7 @@ body_class: "bg-light"
             <div class="col-md-6">
               <label for="cc-name" class="form-label">الاسم على البطاقة</label>
               <input type="text" class="form-control" id="cc-name" placeholder="" required>
-              <small class="text-muted">الاسم الكامل كما هو معروض على البطاقة</small>
+              <small class="text-body-secondary">الاسم الكامل كما هو معروض على البطاقة</small>
               <div class="invalid-feedback">
                 الاسم على البطاقة مطلوب
               </div>
@@ -221,7 +221,7 @@ body_class: "bg-light"
       </div>
     </div>
   </main>
-  <footer class="my-5 pt-5 text-muted text-center text-small">
+  <footer class="my-5 pt-5 text-body-secondary text-center text-small">
     <p class="mb-1">&copy; {{< year >}}-2017 اسم الشركة</p>
     <ul class="list-inline">
       <li class="list-inline-item"><a href="#">سياسة الخصوصية</a></li>
diff --git a/site/content/docs/5.2/examples/checkout/form-validation.css b/site/content/docs/5.3/examples/checkout/checkout.css
index e5ea31c..e5ea31c 100644
--- a/site/content/docs/5.2/examples/checkout/form-validation.css
+++ b/site/content/docs/5.3/examples/checkout/checkout.css
diff --git a/site/content/docs/5.2/examples/checkout/form-validation.js b/site/content/docs/5.3/examples/checkout/checkout.js
index 30ea0aa..30ea0aa 100644
--- a/site/content/docs/5.2/examples/checkout/form-validation.js
+++ b/site/content/docs/5.3/examples/checkout/checkout.js
diff --git a/site/content/docs/5.2/examples/checkout/index.html b/site/content/docs/5.3/examples/checkout/index.html
index 4809dc4..d39f0f2 100644
--- a/site/content/docs/5.2/examples/checkout/index.html
+++ b/site/content/docs/5.3/examples/checkout/index.html
@@ -2,10 +2,10 @@
 layout: examples
 title: Checkout example
 extra_css:
-  - "form-validation.css"
+  - "checkout.css"
 extra_js:
-  - src: "form-validation.js"
-body_class: "bg-light"
+  - src: "checkout.js"
+body_class: "bg-body-tertiary"
 ---
 
 <div class="container">
@@ -26,25 +26,25 @@ body_class: "bg-light"
           <li class="list-group-item d-flex justify-content-between lh-sm">
             <div>
               <h6 class="my-0">Product name</h6>
-              <small class="text-muted">Brief description</small>
+              <small class="text-body-secondary">Brief description</small>
             </div>
-            <span class="text-muted">$12</span>
+            <span class="text-body-secondary">$12</span>
           </li>
           <li class="list-group-item d-flex justify-content-between lh-sm">
             <div>
               <h6 class="my-0">Second product</h6>
-              <small class="text-muted">Brief description</small>
+              <small class="text-body-secondary">Brief description</small>
             </div>
-            <span class="text-muted">$8</span>
+            <span class="text-body-secondary">$8</span>
           </li>
           <li class="list-group-item d-flex justify-content-between lh-sm">
             <div>
               <h6 class="my-0">Third item</h6>
-              <small class="text-muted">Brief description</small>
+              <small class="text-body-secondary">Brief description</small>
             </div>
-            <span class="text-muted">$5</span>
+            <span class="text-body-secondary">$5</span>
           </li>
-          <li class="list-group-item d-flex justify-content-between bg-light">
+          <li class="list-group-item d-flex justify-content-between bg-body-tertiary">
             <div class="text-success">
               <h6 class="my-0">Promo code</h6>
               <small>EXAMPLECODE</small>
@@ -96,7 +96,7 @@ body_class: "bg-light"
             </div>
 
             <div class="col-12">
-              <label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
+              <label for="email" class="form-label">Email <span class="text-body-secondary">(Optional)</span></label>
               <input type="email" class="form-control" id="email" placeholder="you@example.com">
               <div class="invalid-feedback">
                 Please enter a valid email address for shipping updates.
@@ -112,7 +112,7 @@ body_class: "bg-light"
             </div>
 
             <div class="col-12">
-              <label for="address2" class="form-label">Address 2 <span class="text-muted">(Optional)</span></label>
+              <label for="address2" class="form-label">Address 2 <span class="text-body-secondary">(Optional)</span></label>
               <input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
             </div>
 
@@ -182,7 +182,7 @@ body_class: "bg-light"
             <div class="col-md-6">
               <label for="cc-name" class="form-label">Name on card</label>
               <input type="text" class="form-control" id="cc-name" placeholder="" required>
-              <small class="text-muted">Full name as displayed on card</small>
+              <small class="text-body-secondary">Full name as displayed on card</small>
               <div class="invalid-feedback">
                 Name on card is required
               </div>
@@ -221,7 +221,7 @@ body_class: "bg-light"
     </div>
   </main>
 
-  <footer class="my-5 pt-5 text-muted text-center text-small">
+  <footer class="my-5 pt-5 text-body-secondary text-center text-small">
     <p class="mb-1">&copy; 2017–{{< year >}} Company Name</p>
     <ul class="list-inline">
       <li class="list-inline-item"><a href="#">Privacy</a></li>
diff --git a/site/content/docs/5.2/examples/cover/cover.css b/site/content/docs/5.3/examples/cover/cover.css
index 1b1c540..2e7aef8 100644
--- a/site/content/docs/5.2/examples/cover/cover.css
+++ b/site/content/docs/5.3/examples/cover/cover.css
@@ -4,9 +4,9 @@
 
 
 /* Custom default button */
-.btn-secondary,
-.btn-secondary:hover,
-.btn-secondary:focus {
+.btn-light,
+.btn-light:hover,
+.btn-light:focus {
   color: #333;
   text-shadow: none; /* Prevent inheritance from `body` */
 }
diff --git a/site/content/docs/5.2/examples/cover/index.html b/site/content/docs/5.3/examples/cover/index.html
index 34dc1c2..002a5c3 100644
--- a/site/content/docs/5.2/examples/cover/index.html
+++ b/site/content/docs/5.3/examples/cover/index.html
@@ -5,7 +5,6 @@ extra_css:
   - "cover.css"
 html_class: "h-100"
 body_class: "d-flex h-100 text-center text-bg-dark"
-include_js: false
 ---
 
 <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
@@ -24,7 +23,7 @@ include_js: false
     <h1>Cover your page.</h1>
     <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
     <p class="lead">
-      <a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">Learn more</a>
+      <a href="#" class="btn btn-lg btn-light fw-bold border-white bg-white">Learn more</a>
     </p>
   </main>
 
diff --git a/site/content/docs/5.2/examples/dashboard-rtl/dashboard.js b/site/content/docs/5.3/examples/dashboard-rtl/dashboard.js
index 96e0895..bdb3029 100644
--- a/site/content/docs/5.2/examples/dashboard-rtl/dashboard.js
+++ b/site/content/docs/5.3/examples/dashboard-rtl/dashboard.js
@@ -1,10 +1,8 @@
-/* globals Chart:false, feather:false */
+/* globals Chart:false */
 
 (() => {
   'use strict'
 
-  feather.replace({ 'aria-hidden': 'true' })
-
   // Graphs
   const ctx = document.getElementById('myChart')
   // eslint-disable-next-line no-unused-vars
@@ -38,15 +36,13 @@
       }]
     },
     options: {
-      scales: {
-        yAxes: [{
-          ticks: {
-            beginAtZero: false
-          }
-        }]
-      },
-      legend: {
-        display: false
+      plugins: {
+        legend: {
+          display: false
+        },
+        tooltip: {
+          boxPadding: 3
+        }
       }
     }
   })
diff --git a/site/content/docs/5.2/examples/dashboard/dashboard.js b/site/content/docs/5.3/examples/dashboard/dashboard.js
index e137975..a60b393 100644
--- a/site/content/docs/5.2/examples/dashboard/dashboard.js
+++ b/site/content/docs/5.3/examples/dashboard/dashboard.js
@@ -1,10 +1,8 @@
-/* globals Chart:false, feather:false */
+/* globals Chart:false */
 
 (() => {
   'use strict'
 
-  feather.replace({ 'aria-hidden': 'true' })
-
   // Graphs
   const ctx = document.getElementById('myChart')
   // eslint-disable-next-line no-unused-vars
@@ -38,15 +36,13 @@
       }]
     },
     options: {
-      scales: {
-        yAxes: [{
-          ticks: {
-            beginAtZero: false
-          }
-        }]
-      },
-      legend: {
-        display: false
+      plugins: {
+        legend: {
+          display: false
+        },
+        tooltip: {
+          boxPadding: 3
+        }
       }
     }
   })
diff --git a/site/content/docs/5.2/examples/dropdowns/dropdowns.css b/site/content/docs/5.3/examples/dropdowns/dropdowns.css
index 556f310..f633e2c 100644
--- a/site/content/docs/5.2/examples/dropdowns/dropdowns.css
+++ b/site/content/docs/5.3/examples/dropdowns/dropdowns.css
@@ -1,7 +1,3 @@
-.dropdown-menu {
-  margin: 4rem auto;
-}
-
 .dropdown-item-danger {
   color: var(--bs-red);
 }
@@ -15,12 +11,13 @@
 }
 
 .btn-hover-light {
-  background-color: var(--bs-white);
+  color: var(--bs-body-color);
+  background-color: var(--bs-body-bg);
 }
 .btn-hover-light:hover,
 .btn-hover-light:focus {
-  color: var(--bs-blue);
-  background-color: var(--bs-light);
+  color: var(--bs-link-hover-color);
+  background-color: var(--bs-tertiary-bg);
 }
 
 .cal-month,
@@ -46,22 +43,17 @@
 }
 .cal-btn:not([disabled]) {
   font-weight: 500;
+  color: var(--bs-emphasis-color);
 }
 .cal-btn:hover,
 .cal-btn:focus {
-  background-color: rgba(0, 0, 0, .05);
+  background-color: var(--bs-secondary-bg);
 }
 .cal-btn[disabled] {
   border: 0;
   opacity: .5;
 }
 
-.form-control-dark {
-  background-color: rgba(255, 255, 255, .05);
-  border-color: rgba(255, 255, 255, .15);
-}
-
-
 .w-220px {
   width: 220px;
 }
@@ -74,6 +66,6 @@
   width: 340px;
 }
 
-.w-600px {
-  width: 600px;
+.opacity-10 {
+  opacity: .1;
 }
diff --git a/site/content/docs/5.2/examples/features/features.css b/site/content/docs/5.3/examples/features/features.css
index b5d658f..debc263 100644
--- a/site/content/docs/5.2/examples/features/features.css
+++ b/site/content/docs/5.3/examples/features/features.css
@@ -4,16 +4,6 @@
   border-radius: .75rem;
 }
 
-.icon-link > .bi {
-  margin-top: .125rem;
-  margin-left: .125rem;
-  fill: currentcolor;
-  transition: transform .25s ease-in-out;
-}
-.icon-link:hover > .bi {
-  transform: translate(.25rem);
-}
-
 .icon-square {
   width: 3rem;
   height: 3rem;
diff --git a/site/content/docs/5.2/examples/features/index.html b/site/content/docs/5.3/examples/features/index.html
index c134a0a..02fad75 100644
--- a/site/content/docs/5.2/examples/features/index.html
+++ b/site/content/docs/5.3/examples/features/index.html
@@ -25,9 +25,6 @@ body_class: ""
     <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
     <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
   </symbol>
-  <symbol id="grid" viewBox="0 0 16 16">
-    <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
-  </symbol>
   <symbol id="collection" viewBox="0 0 16 16">
     <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/>
   </symbol>
@@ -35,9 +32,6 @@ body_class: ""
     <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
     <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
   </symbol>
-  <symbol id="chat-quote-fill" viewBox="0 0 16 16">
-    <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/>
-  </symbol>
   <symbol id="cpu-fill" viewBox="0 0 16 16">
     <path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
     <path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/>
@@ -74,33 +68,33 @@ body_class: ""
         <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg>
         </div>
-        <h3 class="fs-2">Featured title</h3>
+        <h3 class="fs-2 text-body-emphasis">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 d-inline-flex align-items-center">
+        <a href="#" class="icon-link">
           Call to action
-          <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
+          <svg class="bi"><use xlink:href="#chevron-right"/></svg>
         </a>
       </div>
       <div class="feature col">
         <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg>
         </div>
-        <h3 class="fs-2">Featured title</h3>
+        <h3 class="fs-2 text-body-emphasis">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 d-inline-flex align-items-center">
+        <a href="#" class="icon-link">
           Call to action
-          <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
+          <svg class="bi"><use xlink:href="#chevron-right"/></svg>
         </a>
       </div>
       <div class="feature col">
         <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
         </div>
-        <h3 class="fs-2">Featured title</h3>
+        <h3 class="fs-2 text-body-emphasis">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 d-inline-flex align-items-center">
+        <a href="#" class="icon-link">
           Call to action
-          <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
+          <svg class="bi"><use xlink:href="#chevron-right"/></svg>
         </a>
       </div>
     </div>
@@ -112,11 +106,11 @@ body_class: ""
     <h2 class="pb-2 border-bottom">Hanging icons</h2>
     <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
       <div class="col d-flex align-items-start">
-        <div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
+        <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
         </div>
         <div>
-          <h3 class="fs-2">Featured title</h3>
+          <h3 class="fs-2 text-body-emphasis">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 btn-primary">
             Primary button
@@ -124,11 +118,11 @@ body_class: ""
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
+        <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
         </div>
         <div>
-          <h3 class="fs-2">Featured title</h3>
+          <h3 class="fs-2 text-body-emphasis">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 btn-primary">
             Primary button
@@ -136,11 +130,11 @@ body_class: ""
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
+        <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
         </div>
         <div>
-          <h3 class="fs-2">Featured title</h3>
+          <h3 class="fs-2 text-body-emphasis">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 btn-primary">
             Primary button
@@ -228,58 +222,58 @@ body_class: ""
 
     <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
       <div class="col d-flex align-items-start">
-        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">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 text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">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 text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">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 text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">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 text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">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 text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">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 text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">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 text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg>
         <div>
-          <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
+          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
@@ -292,54 +286,53 @@ body_class: ""
     <h2 class="pb-2 border-bottom">Features with title</h2>
 
     <div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
-      <div class="d-flex flex-column align-items-start gap-2">
-        <h3 class="fw-bold">Left-aligned title explaining these awesome features</h3>
-        <p class="text-muted">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>
+      <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>
+        <p class="text-body-secondary">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 btn-primary btn-lg">Primary button</a>
       </div>
-      <div class="row row-cols-1 row-cols-sm-2 g-4">
-        <div class="d-flex flex-column gap-2">
-          <div
-            class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-            <svg class="bi" width="1em" height="1em">
-              <use xlink:href="#collection" />
-            </svg>
+
+      <div class="col">
+        <div class="row row-cols-1 row-cols-sm-2 g-4">
+          <div class="col d-flex flex-column gap-2">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+              <svg class="bi" width="1em" height="1em">
+                <use xlink:href="#collection" />
+              </svg>
+            </div>
+            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
+            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
           </div>
-          <h4 class="fw-semibold mb-0">Featured title</h4>
-          <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
-        </div>
 
-        <div class="d-flex flex-column gap-2">
-          <div
-            class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-            <svg class="bi" width="1em" height="1em">
-              <use xlink:href="#gear-fill" />
-            </svg>
+          <div class="col d-flex flex-column gap-2">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+              <svg class="bi" width="1em" height="1em">
+                <use xlink:href="#gear-fill" />
+              </svg>
+            </div>
+            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
+            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
           </div>
-          <h4 class="fw-semibold mb-0">Featured title</h4>
-          <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
-        </div>
 
-        <div class="d-flex flex-column gap-2">
-          <div
-            class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-            <svg class="bi" width="1em" height="1em">
-              <use xlink:href="#speedometer" />
-            </svg>
+          <div class="col d-flex flex-column gap-2">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+              <svg class="bi" width="1em" height="1em">
+                <use xlink:href="#speedometer" />
+              </svg>
+            </div>
+            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
+            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
           </div>
-          <h4 class="fw-semibold mb-0">Featured title</h4>
-          <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
-        </div>
 
-        <div class="d-flex flex-column gap-2">
-          <div
-            class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-            <svg class="bi" width="1em" height="1em">
-              <use xlink:href="#table" />
-            </svg>
+          <div class="col d-flex flex-column gap-2">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+              <svg class="bi" width="1em" height="1em">
+                <use xlink:href="#table" />
+              </svg>
+            </div>
+            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
+            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
           </div>
-          <h4 class="fw-semibold mb-0">Featured title</h4>
-          <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
     </div>
diff --git a/site/content/docs/5.2/examples/features/unsplash-photo-1.jpg b/site/content/docs/5.3/examples/features/unsplash-photo-1.jpg
index ed2e36a..ed2e36a 100644
--- a/site/content/docs/5.2/examples/features/unsplash-photo-1.jpg
+++ b/site/content/docs/5.3/examples/features/unsplash-photo-1.jpg
diff --git a/site/content/docs/5.2/examples/features/unsplash-photo-2.jpg b/site/content/docs/5.3/examples/features/unsplash-photo-2.jpg
index b66864a..b66864a 100644
--- a/site/content/docs/5.2/examples/features/unsplash-photo-2.jpg
+++ b/site/content/docs/5.3/examples/features/unsplash-photo-2.jpg
diff --git a/site/content/docs/5.2/examples/features/unsplash-photo-3.jpg b/site/content/docs/5.3/examples/features/unsplash-photo-3.jpg
index c411b17..c411b17 100644
--- a/site/content/docs/5.2/examples/features/unsplash-photo-3.jpg
+++ b/site/content/docs/5.3/examples/features/unsplash-photo-3.jpg
diff --git a/site/content/docs/5.2/examples/footers/index.html b/site/content/docs/5.3/examples/footers/index.html
index 827c242..83c2409 100644
--- a/site/content/docs/5.2/examples/footers/index.html
+++ b/site/content/docs/5.3/examples/footers/index.html
@@ -22,18 +22,18 @@ body_class: ""
 
 <div class="container">
   <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
-    <p class="col-md-4 mb-0 text-muted">&copy; {{< year >}} Company, Inc</p>
+    <p class="col-md-4 mb-0 text-body-secondary">&copy; {{< year >}} Company, Inc</p>
 
-    <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
+    <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
       <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
     </a>
 
     <ul class="nav col-md-4 justify-content-end">
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Features</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Pricing</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
     </ul>
   </footer>
 </div>
@@ -43,16 +43,16 @@ body_class: ""
 <div class="container">
   <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
     <div class="col-md-4 d-flex align-items-center">
-      <a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
+      <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
         <svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
       </a>
-      <span class="mb-3 mb-md-0 text-muted">&copy; {{< year >}} Company, Inc</span>
+      <span class="mb-3 mb-md-0 text-body-secondary">&copy; {{< year >}} Company, Inc</span>
     </div>
 
     <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
-      <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
-      <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
-      <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
+      <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
+      <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
+      <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
     </ul>
   </footer>
 </div>
@@ -62,13 +62,13 @@ body_class: ""
 <div class="container">
   <footer class="py-3 my-4">
     <ul class="nav justify-content-center border-bottom pb-3 mb-3">
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Features</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Pricing</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
     </ul>
-    <p class="text-center text-muted">&copy; {{< year >}} Company, Inc</p>
+    <p class="text-center text-body-secondary">&copy; {{< year >}} Company, Inc</p>
   </footer>
 </div>
 
@@ -77,10 +77,10 @@ body_class: ""
 <div class="container">
   <footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
     <div class="col mb-3">
-      <a href="/" class="d-flex align-items-center mb-3 link-dark text-decoration-none">
+      <a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
         <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
       </a>
-      <p class="text-muted">&copy; {{< year >}}</p>
+      <p class="text-body-secondary">&copy; {{< year >}}</p>
     </div>
 
     <div class="col mb-3">
@@ -90,33 +90,33 @@ body_class: ""
     <div class="col mb-3">
       <h5>Section</h5>
       <ul class="nav flex-column">
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
       </ul>
     </div>
 
     <div class="col mb-3">
       <h5>Section</h5>
       <ul class="nav flex-column">
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
       </ul>
     </div>
 
     <div class="col mb-3">
       <h5>Section</h5>
       <ul class="nav flex-column">
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
       </ul>
     </div>
   </footer>
@@ -131,33 +131,33 @@ body_class: ""
       <div class="col-6 col-md-2 mb-3">
         <h5>Section</h5>
         <ul class="nav flex-column">
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
         </ul>
       </div>
 
       <div class="col-6 col-md-2 mb-3">
         <h5>Section</h5>
         <ul class="nav flex-column">
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
         </ul>
       </div>
 
       <div class="col-6 col-md-2 mb-3">
         <h5>Section</h5>
         <ul class="nav flex-column">
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
         </ul>
       </div>
 
@@ -177,9 +177,9 @@ body_class: ""
     <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
       <p>&copy; {{< year >}} Company, Inc. All rights reserved.</p>
       <ul class="list-unstyled d-flex">
-        <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
-        <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
-        <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
+        <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
+        <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
+        <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
       </ul>
     </div>
   </footer>
diff --git a/site/content/docs/5.2/examples/grid/index.html b/site/content/docs/5.3/examples/grid/index.html
index 7c4f1d3..8a61582 100644
--- a/site/content/docs/5.2/examples/grid/index.html
+++ b/site/content/docs/5.3/examples/grid/index.html
@@ -4,7 +4,6 @@ title: Grid Template
 extra_css:
   - "grid.css"
 body_class: "py-4"
-include_js: false
 ---
 
 <main>
diff --git a/site/content/docs/5.2/examples/headers/headers.css b/site/content/docs/5.3/examples/headers/headers.css
index 8230c9a..f887573 100644
--- a/site/content/docs/5.2/examples/headers/headers.css
+++ b/site/content/docs/5.3/examples/headers/headers.css
@@ -10,6 +10,6 @@
   font-size: 85%;
 }
 
-.dropdown-toggle {
+.dropdown-toggle:not(:focus) {
   outline: 0;
 }
diff --git a/site/content/docs/5.2/examples/headers/index.html b/site/content/docs/5.3/examples/headers/index.html
index b8fc8b2..d47597f 100644
--- a/site/content/docs/5.2/examples/headers/index.html
+++ b/site/content/docs/5.3/examples/headers/index.html
@@ -35,7 +35,7 @@ body_class: ""
 
   <div class="container">
     <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
-      <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
+      <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
         <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
         <span class="fs-4">Simple header</span>
       </a>
@@ -68,16 +68,18 @@ body_class: ""
 
   <div class="container">
     <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
-      <a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
-        <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
-      </a>
+      <div class="col-md-3 mb-2 mb-md-0">
+        <a href="/" class="d-inline-flex link-body-emphasis text-decoration-none">
+          <svg class="bi" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
+        </a>
+      </div>
 
       <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
         <li><a href="#" class="nav-link px-2 link-secondary">Home</a></li>
-        <li><a href="#" class="nav-link px-2 link-dark">Features</a></li>
-        <li><a href="#" class="nav-link px-2 link-dark">Pricing</a></li>
-        <li><a href="#" class="nav-link px-2 link-dark">FAQs</a></li>
-        <li><a href="#" class="nav-link px-2 link-dark">About</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>
+        <li><a href="#" class="nav-link px-2">About</a></li>
       </ul>
 
       <div class="col-md-3 text-end">
@@ -121,15 +123,15 @@ body_class: ""
   <header class="p-3 mb-3 border-bottom">
     <div class="container">
       <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
-        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none">
+        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none">
           <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
         </a>
 
         <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
           <li><a href="#" class="nav-link px-2 link-secondary">Overview</a></li>
-          <li><a href="#" class="nav-link px-2 link-dark">Inventory</a></li>
-          <li><a href="#" class="nav-link px-2 link-dark">Customers</a></li>
-          <li><a href="#" class="nav-link px-2 link-dark">Products</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>
         </ul>
 
         <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
@@ -137,7 +139,7 @@ body_class: ""
         </form>
 
         <div class="dropdown text-end">
-          <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+          <a href="#" class="d-block link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
             <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
           </a>
           <ul class="dropdown-menu text-small">
@@ -157,7 +159,7 @@ body_class: ""
   <header class="py-3 mb-3 border-bottom">
     <div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;">
       <div class="dropdown">
-        <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+        <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
           <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
         </a>
         <ul class="dropdown-menu text-small shadow">
@@ -177,7 +179,7 @@ body_class: ""
         </form>
 
         <div class="flex-shrink-0 dropdown">
-          <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+          <a href="#" class="d-block link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
             <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
           </a>
           <ul class="dropdown-menu text-small shadow">
@@ -194,10 +196,10 @@ body_class: ""
 
   <div class="container-fluid pb-3">
     <div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr;">
-      <div class="bg-light border rounded-3">
+      <div class="bg-body-tertiary border rounded-3">
         <br><br><br><br><br><br><br><br><br><br>
       </div>
-      <div class="bg-light border rounded-3">
+      <div class="bg-body-tertiary border rounded-3">
         <br><br><br><br><br><br><br><br><br><br>
       </div>
     </div>
@@ -205,24 +207,24 @@ body_class: ""
 
   <div class="b-example-divider"></div>
 
-  <nav class="py-2 bg-light border-bottom">
+  <nav class="py-2 bg-body-tertiary border-bottom">
     <div class="container d-flex flex-wrap">
       <ul class="nav me-auto">
-        <li class="nav-item"><a href="#" class="nav-link link-dark px-2 active" aria-current="page">Home</a></li>
-        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Features</a></li>
-        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Pricing</a></li>
-        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">FAQs</a></li>
-        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">About</a></li>
+        <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2 active" aria-current="page">Home</a></li>
+        <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Features</a></li>
+        <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Pricing</a></li>
+        <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">FAQs</a></li>
+        <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">About</a></li>
       </ul>
       <ul class="nav">
-        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Login</a></li>
-        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Sign up</a></li>
+        <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Login</a></li>
+        <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Sign up</a></li>
       </ul>
     </div>
   </nav>
   <header class="py-3 mb-4 border-bottom">
     <div class="container d-flex flex-wrap justify-content-center">
-      <a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark text-decoration-none">
+      <a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none">
         <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
         <span class="fs-4">Double header</span>
       </a>
@@ -235,7 +237,7 @@ body_class: ""
   <div class="b-example-divider"></div>
 
   <header>
-    <div class="px-3 py-2 text-bg-dark">
+    <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 justify-content-lg-start">
           <a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
diff --git a/site/content/docs/5.2/examples/heroes/bootstrap-docs.png b/site/content/docs/5.3/examples/heroes/bootstrap-docs.png
index 471a9ed..471a9ed 100644
--- a/site/content/docs/5.2/examples/heroes/bootstrap-docs.png
+++ b/site/content/docs/5.3/examples/heroes/bootstrap-docs.png
diff --git a/site/content/docs/5.2/examples/heroes/bootstrap-themes.png b/site/content/docs/5.3/examples/heroes/bootstrap-themes.png
index 13c3233..13c3233 100644
--- a/site/content/docs/5.2/examples/heroes/bootstrap-themes.png
+++ b/site/content/docs/5.3/examples/heroes/bootstrap-themes.png
diff --git a/site/content/docs/5.2/examples/heroes/heroes.css b/site/content/docs/5.3/examples/heroes/heroes.css
index e9deaf7..e9deaf7 100644
--- a/site/content/docs/5.2/examples/heroes/heroes.css
+++ b/site/content/docs/5.3/examples/heroes/heroes.css
diff --git a/site/content/docs/5.2/examples/heroes/index.html b/site/content/docs/5.3/examples/heroes/index.html
index ef621fd..7f5daa9 100644
--- a/site/content/docs/5.2/examples/heroes/index.html
+++ b/site/content/docs/5.3/examples/heroes/index.html
@@ -11,7 +11,7 @@ body_class: ""
 
   <div class="px-4 py-5 my-5 text-center">
     <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
-    <h1 class="display-5 fw-bold">Centered hero</h1>
+    <h1 class="display-5 fw-bold text-body-emphasis">Centered hero</h1>
     <div class="col-lg-6 mx-auto">
       <p class="lead 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 d-sm-flex justify-content-sm-center">
@@ -24,7 +24,7 @@ body_class: ""
   <div class="b-example-divider"></div>
 
   <div class="px-4 pt-5 my-5 text-center border-bottom">
-    <h1 class="display-4 fw-bold">Centered screenshot</h1>
+    <h1 class="display-4 fw-bold text-body-emphasis">Centered screenshot</h1>
     <div class="col-lg-6 mx-auto">
       <p class="lead 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 d-sm-flex justify-content-sm-center mb-5">
@@ -47,7 +47,7 @@ body_class: ""
         <img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
       </div>
       <div class="col-lg-6">
-        <h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1>
+        <h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">Responsive left-aligned hero with image</h1>
         <p class="lead">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 d-md-flex justify-content-md-start">
           <button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button>
@@ -62,11 +62,11 @@ body_class: ""
   <div class="container col-xl-10 col-xxl-8 px-4 py-5">
     <div class="row align-items-center g-lg-5 py-5">
       <div class="col-lg-7 text-center text-lg-start">
-        <h1 class="display-4 fw-bold lh-1 mb-3">Vertically centered hero sign-up form</h1>
+        <h1 class="display-4 fw-bold lh-1 text-body-emphasis mb-3">Vertically centered hero sign-up form</h1>
         <p class="col-lg-10 fs-4">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
       </div>
       <div class="col-md-10 mx-auto col-lg-5">
-        <form class="p-4 p-md-5 border rounded-3 bg-light">
+        <form class="p-4 p-md-5 border rounded-3 bg-body-tertiary">
           <div class="form-floating mb-3">
             <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
             <label for="floatingInput">Email address</label>
@@ -82,7 +82,7 @@ body_class: ""
           </div>
           <button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button>
           <hr class="my-4">
-          <small class="text-muted">By clicking Sign up, you agree to the terms of use.</small>
+          <small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>
         </form>
       </div>
     </div>
@@ -93,7 +93,7 @@ body_class: ""
   <div class="container my-5">
     <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
       <div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
-        <h1 class="display-4 fw-bold lh-1">Border hero with cropped image and shadows</h1>
+        <h1 class="display-4 fw-bold lh-1 text-body-emphasis">Border hero with cropped image and shadows</h1>
         <p class="lead">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 d-md-flex justify-content-md-start mb-4 mb-lg-3">
           <button type="button" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Primary</button>
@@ -110,7 +110,7 @@ body_class: ""
 
   <div class="bg-dark text-secondary px-4 py-5 text-center">
     <div class="py-5">
-      <h1 class="display-5 fw-bold text-white">Dark mode hero</h1>
+      <h1 class="display-5 fw-bold text-white">Dark color hero</h1>
       <div class="col-lg-6 mx-auto">
         <p class="fs-5 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 d-sm-flex justify-content-sm-center">
diff --git a/site/content/docs/5.2/examples/jumbotron/index.html b/site/content/docs/5.3/examples/jumbotron/index.html
index 8131d19..049684d 100644
--- a/site/content/docs/5.2/examples/jumbotron/index.html
+++ b/site/content/docs/5.3/examples/jumbotron/index.html
@@ -1,19 +1,18 @@
 ---
 layout: examples
 title: Jumbotron example
-include_js: false
 ---
 
 <main>
   <div class="container py-4">
     <header class="pb-3 mb-4 border-bottom">
-      <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
+      <a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
         <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
         <span class="fs-4">Jumbotron example</span>
       </a>
     </header>
 
-    <div class="p-5 mb-4 bg-light rounded-3">
+    <div class="p-5 mb-4 bg-body-tertiary rounded-3">
       <div class="container-fluid py-5">
         <h1 class="display-5 fw-bold">Custom jumbotron</h1>
         <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
@@ -30,7 +29,7 @@ include_js: false
         </div>
       </div>
       <div class="col-md-6">
-        <div class="h-100 p-5 bg-light border rounded-3">
+        <div class="h-100 p-5 bg-body-tertiary border rounded-3">
           <h2>Add borders</h2>
           <p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p>
           <button class="btn btn-outline-secondary" type="button">Example button</button>
@@ -38,7 +37,7 @@ include_js: false
       </div>
     </div>
 
-    <footer class="pt-3 mt-4 text-muted border-top">
+    <footer class="pt-3 mt-4 text-body-secondary border-top">
       &copy; {{< year >}}
     </footer>
   </div>
diff --git a/site/content/docs/5.2/examples/list-groups/list-groups.css b/site/content/docs/5.3/examples/list-groups/list-groups.css
index 2185084..b90cfa0 100644
--- a/site/content/docs/5.2/examples/list-groups/list-groups.css
+++ b/site/content/docs/5.3/examples/list-groups/list-groups.css
@@ -1,6 +1,7 @@
 .list-group {
+  width: 100%;
   max-width: 460px;
-  margin: 4rem auto;
+  margin-inline: 1.5rem;
 }
 
 .form-check-input:checked + .form-checked-content {
@@ -22,11 +23,12 @@
   clip: rect(0, 0, 0, 0);
 }
 .list-group-item-check:hover + .list-group-item {
-  background-color: var(--bs-light);
+  background-color: var(--bs-secondary-bg);
 }
 .list-group-item-check:checked + .list-group-item {
   color: #fff;
-  background-color: var(--bs-blue);
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
 }
 .list-group-item-check[disabled] + .list-group-item,
 .list-group-item-check:disabled + .list-group-item {
@@ -45,13 +47,13 @@
 }
 .list-group-radio .list-group-item:hover,
 .list-group-radio .list-group-item:focus {
-  background-color: var(--bs-light);
+  background-color: var(--bs-secondary-bg);
 }
 
 .list-group-radio .form-check-input:checked + .list-group-item {
   background-color: var(--bs-body);
-  border-color: var(--bs-blue);
-  box-shadow: 0 0 0 2px var(--bs-blue);
+  border-color: var(--bs-primary);
+  box-shadow: 0 0 0 2px var(--bs-primary);
 }
 .list-group-radio .form-check-input[disabled] + .list-group-item,
 .list-group-radio .form-check-input:disabled + .list-group-item {
diff --git a/site/content/docs/5.2/examples/masonry/index.html b/site/content/docs/5.3/examples/masonry/index.html
index b4aecaa..c554deb 100644
--- a/site/content/docs/5.2/examples/masonry/index.html
+++ b/site/content/docs/5.3/examples/masonry/index.html
@@ -37,7 +37,7 @@ extra_js:
           <blockquote class="blockquote">
             <p>A well-known quote, contained in a blockquote element.</p>
           </blockquote>
-          <figcaption class="blockquote-footer mb-0 text-muted">
+          <figcaption class="blockquote-footer mb-0 text-body-secondary">
             Someone famous in <cite title="Source Title">Source Title</cite>
           </figcaption>
         </figure>
@@ -49,7 +49,7 @@ extra_js:
         <div class="card-body">
           <h5 class="card-title">Card title</h5>
           <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
-          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+          <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
         </div>
       </div>
     </div>
@@ -70,7 +70,7 @@ extra_js:
         <div class="card-body">
           <h5 class="card-title">Card title</h5>
           <p class="card-text">This card has a regular title and short paragraph of text below it.</p>
-          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+          <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
         </div>
       </div>
     </div>
@@ -85,7 +85,7 @@ extra_js:
           <blockquote class="blockquote">
             <p>A well-known quote, contained in a blockquote element.</p>
           </blockquote>
-          <figcaption class="blockquote-footer mb-0 text-muted">
+          <figcaption class="blockquote-footer mb-0 text-body-secondary">
             Someone famous in <cite title="Source Title">Source Title</cite>
           </figcaption>
         </figure>
@@ -96,7 +96,7 @@ extra_js:
         <div class="card-body">
           <h5 class="card-title">Card title</h5>
           <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
-          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+          <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
         </div>
       </div>
     </div>
diff --git a/site/content/docs/5.2/examples/modals/index.html b/site/content/docs/5.3/examples/modals/index.html
index a68bd41..5fcc2d2 100644
--- a/site/content/docs/5.2/examples/modals/index.html
+++ b/site/content/docs/5.3/examples/modals/index.html
@@ -7,24 +7,6 @@ body_class: ""
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-  <symbol id="bootstrap" viewBox="0 0 118 94">
-    <title>Bootstrap</title>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
-  </symbol>
-
-  <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
-    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
-  </symbol>
-
-  <symbol id="check2" viewBox="0 0 16 16">
-    <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
-  </symbol>
-
-  <symbol id="check2-circle" viewBox="0 0 16 16">
-    <path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"/>
-    <path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"/>
-  </symbol>
-
   <symbol id="bookmark-star" viewBox="0 0 16 16">
     <path d="M7.84 4.1a.178.178 0 0 1 .32 0l.634 1.285a.178.178 0 0 0 .134.098l1.42.206c.145.021.204.2.098.303L9.42 6.993a.178.178 0 0 0-.051.158l.242 1.414a.178.178 0 0 1-.258.187l-1.27-.668a.178.178 0 0 0-.165 0l-1.27.668a.178.178 0 0 1-.257-.187l.242-1.414a.178.178 0 0 0-.05-.158l-1.03-1.001a.178.178 0 0 1 .098-.303l1.42-.206a.178.178 0 0 0 .134-.098L7.84 4.1z"/>
     <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/>
@@ -34,10 +16,6 @@ body_class: ""
     <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
   </symbol>
 
-  <symbol id="stars" viewBox="0 0 16 16">
-    <path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/>
-  </symbol>
-
   <symbol id="film" viewBox="0 0 16 16">
     <path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
   </symbol>
@@ -55,7 +33,7 @@ body_class: ""
   </symbol>
 </svg>
 
-<div class="modal modal-sheet position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSheet">
+<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalSheet">
   <div class="modal-dialog" role="document">
     <div class="modal-content rounded-4 shadow">
       <div class="modal-header border-bottom-0">
@@ -65,9 +43,9 @@ body_class: ""
       <div class="modal-body py-0">
         <p>This is a modal sheet, a variation of the modal that docs itself to the bottom of the viewport like the newer share sheets in iOS.</p>
       </div>
-      <div class="modal-footer flex-column border-top-0">
-        <button type="button" class="btn btn-lg btn-primary w-100 mx-0 mb-2">Save changes</button>
-        <button type="button" class="btn btn-lg btn-light w-100 mx-0" data-bs-dismiss="modal">Close</button>
+      <div class="modal-footer flex-column align-items-stretch w-100 gap-2 pb-3 border-top-0">
+        <button type="button" class="btn btn-lg btn-primary">Save changes</button>
+        <button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -75,7 +53,7 @@ body_class: ""
 
 <div class="b-example-divider"></div>
 
-<div class="modal modal-alert position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalChoice">
+<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalChoice">
   <div class="modal-dialog" role="document">
     <div class="modal-content rounded-3 shadow">
       <div class="modal-body p-4 text-center">
@@ -83,8 +61,8 @@ body_class: ""
         <p class="mb-0">You can always change your mind in your account settings.</p>
       </div>
       <div class="modal-footer flex-nowrap p-0">
-        <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0 border-end"><strong>Yes, enable</strong></button>
-        <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0" data-bs-dismiss="modal">No thanks</button>
+        <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0 border-end"><strong>Yes, enable</strong></button>
+        <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0" data-bs-dismiss="modal">No thanks</button>
       </div>
     </div>
   </div>
@@ -92,15 +70,15 @@ body_class: ""
 
 <div class="b-example-divider"></div>
 
-<div class="modal modal-tour position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalTour">
+<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalTour">
   <div class="modal-dialog" role="document">
     <div class="modal-content rounded-4 shadow">
       <div class="modal-body p-5">
         <h2 class="fw-bold mb-0">What's new</h2>
 
-        <ul class="d-grid gap-4 my-5 list-unstyled">
+        <ul class="d-grid gap-4 my-5 list-unstyled small">
           <li class="d-flex gap-4">
-            <svg class="bi text-muted flex-shrink-0" width="48" height="48"><use xlink:href="#grid-fill"/></svg>
+            <svg class="bi text-body-secondary flex-shrink-0" width="48" height="48"><use xlink:href="#grid-fill"/></svg>
             <div>
               <h5 class="mb-0">Grid view</h5>
               Not into lists? Try the new grid view.
@@ -129,11 +107,10 @@ body_class: ""
 
 <div class="b-example-divider"></div>
 
-<div class="modal modal-signin position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSignin">
+<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalSignin">
   <div class="modal-dialog" role="document">
     <div class="modal-content rounded-4 shadow">
       <div class="modal-header p-5 pb-4 border-bottom-0">
-        <!-- <h1 class="modal-title fs-5" >Modal title</h1> -->
         <h1 class="fw-bold mb-0 fs-2">Sign up for free</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
@@ -149,10 +126,10 @@ body_class: ""
             <label for="floatingPassword">Password</label>
           </div>
           <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary" type="submit">Sign up</button>
-          <small class="text-muted">By clicking Sign up, you agree to the terms of use.</small>
+          <small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>
           <hr class="my-4">
           <h2 class="fs-5 fw-bold mb-3">Or use a third-party</h2>
-          <button class="w-100 py-2 mb-2 btn btn-outline-dark rounded-3" type="submit">
+          <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit">
             <svg class="bi me-1" width="16" height="16"><use xlink:href="#twitter"/></svg>
             Sign up with Twitter
           </button>
diff --git a/site/content/docs/5.2/examples/modals/modals.css b/site/content/docs/5.3/examples/modals/modals.css
index 51ad2c4..924952a 100644
--- a/site/content/docs/5.2/examples/modals/modals.css
+++ b/site/content/docs/5.3/examples/modals/modals.css
@@ -6,10 +6,3 @@
   padding-bottom: 2rem;
 }
 
-.modal-alert .modal-dialog {
-  width: 380px;
-}
-
-.modal-tour .modal-dialog {
-  width: 380px;
-}
diff --git a/site/content/docs/5.2/examples/navbar-bottom/index.html b/site/content/docs/5.3/examples/navbar-bottom/index.html
index c0e859a..92eed64 100644
--- a/site/content/docs/5.2/examples/navbar-bottom/index.html
+++ b/site/content/docs/5.3/examples/navbar-bottom/index.html
@@ -4,7 +4,7 @@ title: Bottom navbar example
 ---
 
 <main class="container">
-  <div class="bg-light p-5 rounded mt-3">
+  <div class="bg-body-tertiary p-5 rounded mt-3">
     <h1>Bottom Navbar example</h1>
     <p class="lead">This example is a quick exercise to illustrate how the bottom navbar works.</p>
     <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
diff --git a/site/content/docs/5.2/examples/navbar-fixed/index.html b/site/content/docs/5.3/examples/navbar-fixed/index.html
index b0d9986..a2a1c75 100644
--- a/site/content/docs/5.2/examples/navbar-fixed/index.html
+++ b/site/content/docs/5.3/examples/navbar-fixed/index.html
@@ -2,7 +2,7 @@
 layout: examples
 title: Fixed top navbar example
 extra_css:
-  - "navbar-top-fixed.css"
+  - "navbar-fixed.css"
 ---
 
 <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
@@ -32,7 +32,7 @@ extra_css:
 </nav>
 
 <main class="container">
-  <div class="bg-light p-5 rounded">
+  <div class="bg-body-tertiary p-5 rounded">
     <h1>Navbar example</h1>
     <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
     <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
diff --git a/site/content/docs/5.2/examples/navbar-fixed/navbar-top-fixed.css b/site/content/docs/5.3/examples/navbar-fixed/navbar-fixed.css
index c77c0c1..c77c0c1 100644
--- a/site/content/docs/5.2/examples/navbar-fixed/navbar-top-fixed.css
+++ b/site/content/docs/5.3/examples/navbar-fixed/navbar-fixed.css
diff --git a/site/content/docs/5.2/examples/navbar-static/index.html b/site/content/docs/5.3/examples/navbar-static/index.html
index b6c26c9..2b1b308 100644
--- a/site/content/docs/5.2/examples/navbar-static/index.html
+++ b/site/content/docs/5.3/examples/navbar-static/index.html
@@ -2,7 +2,7 @@
 layout: examples
 title: Top navbar example
 extra_css:
-  - "navbar-top.css"
+  - "navbar-static.css"
 ---
 
 <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
@@ -32,7 +32,7 @@ extra_css:
 </nav>
 
 <main class="container">
-  <div class="bg-light p-5 rounded">
+  <div class="bg-body-tertiary p-5 rounded">
     <h1>Navbar example</h1>
     <p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
     <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
diff --git a/site/content/docs/5.2/examples/navbar-static/navbar-top.css b/site/content/docs/5.3/examples/navbar-static/navbar-static.css
index 25bbdde..25bbdde 100644
--- a/site/content/docs/5.2/examples/navbar-static/navbar-top.css
+++ b/site/content/docs/5.3/examples/navbar-static/navbar-static.css
diff --git a/site/content/docs/5.2/examples/navbars-offcanvas/index.html b/site/content/docs/5.3/examples/navbars-offcanvas/index.html
index 9099dc9..858998f 100644
--- a/site/content/docs/5.2/examples/navbars-offcanvas/index.html
+++ b/site/content/docs/5.3/examples/navbars-offcanvas/index.html
@@ -2,14 +2,14 @@
 layout: examples
 title: Navbar Template
 extra_css:
-  - "navbar.css"
+  - "navbars-offcanvas.css"
 ---
 
 <main>
   <nav class="navbar navbar-dark bg-dark" aria-label="Dark offcanvas navbar">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Dark offcanvas navbar</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarDark" aria-controls="offcanvasNavbarDark">
+      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarDark" aria-controls="offcanvasNavbarDark" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbarDark" aria-labelledby="offcanvasNavbarDarkLabel">
@@ -48,10 +48,10 @@ extra_css:
     </div>
   </nav>
 
-  <nav class="navbar bg-light" aria-label="Light offcanvas navbar">
+  <nav class="navbar bg-body-tertiary" aria-label="Light offcanvas navbar">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Light offcanvas navbar</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarLight" aria-controls="offcanvasNavbarLight">
+      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarLight" aria-controls="offcanvasNavbarLight" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbarLight" aria-labelledby="offcanvasNavbarLightLabel">
@@ -93,7 +93,7 @@ extra_css:
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Offcanvas navbar large">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Responsive offcanvas navbar</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar2" aria-controls="offcanvasNavbar2">
+      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar2" aria-controls="offcanvasNavbar2" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbar2" aria-labelledby="offcanvasNavbar2Label">
@@ -133,7 +133,7 @@ extra_css:
   </nav>
 
   <div class="container my-5">
-    <div class="bg-light p-5 rounded">
+    <div class="bg-body-tertiary p-5 rounded">
       <div class="col-sm-8 py-5 mx-auto">
         <h1 class="display-5 fw-normal">Navbar with offcanvas examples</h1>
         <p class="fs-5">This example shows how responsive offcanvas menus work within the navbar. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p>
diff --git a/site/content/docs/5.2/examples/navbars-offcanvas/navbar.css b/site/content/docs/5.3/examples/navbars-offcanvas/navbars-offcanvas.css
index 70d2094..70d2094 100644
--- a/site/content/docs/5.2/examples/navbars-offcanvas/navbar.css
+++ b/site/content/docs/5.3/examples/navbars-offcanvas/navbars-offcanvas.css
diff --git a/site/content/docs/5.2/examples/navbars/index.html b/site/content/docs/5.3/examples/navbars/index.html
index cc90b8c..4c903bb 100644
--- a/site/content/docs/5.2/examples/navbars/index.html
+++ b/site/content/docs/5.3/examples/navbars/index.html
@@ -2,7 +2,7 @@
 layout: examples
 title: Navbar Template
 extra_css:
-  - "navbar.css"
+  - "navbars.css"
 ---
 
 <main>
@@ -336,7 +336,7 @@ extra_css:
   </nav>
 
   <div class="container">
-    <nav class="navbar navbar-expand-lg bg-light rounded" aria-label="Eleventh navbar example">
+    <nav class="navbar navbar-expand-lg bg-body-tertiary rounded" aria-label="Eleventh navbar example">
       <div class="container-fluid">
         <a class="navbar-brand" href="#">Navbar</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
@@ -370,7 +370,7 @@ extra_css:
       </div>
     </nav>
 
-    <nav class="navbar navbar-expand-lg bg-light rounded" aria-label="Twelfth navbar example">
+    <nav class="navbar navbar-expand-lg bg-body-tertiary rounded" aria-label="Twelfth navbar example">
       <div class="container-fluid">
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
@@ -400,8 +400,42 @@ extra_css:
       </div>
     </nav>
 
+    <nav class="navbar navbar-expand-lg bg-body-tertiary rounded" aria-label="Thirteenth navbar example">
+      <div class="container-fluid">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample11" aria-controls="navbarsExample11" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse d-lg-flex" id="navbarsExample11">
+          <a class="navbar-brand col-lg-3 me-0" href="#">Centered nav</a>
+          <ul class="navbar-nav col-lg-6 justify-content-lg-center">
+            <li class="nav-item">
+              <a class="nav-link active" aria-current="page" href="#">Home</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Link</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link disabled">Disabled</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+              <ul class="dropdown-menu">
+                <li><a class="dropdown-item" href="#">Action</a></li>
+                <li><a class="dropdown-item" href="#">Another action</a></li>
+                <li><a class="dropdown-item" href="#">Something else here</a></li>
+              </ul>
+            </li>
+          </ul>
+          <div class="d-lg-flex col-lg-3 justify-content-lg-end">
+            <button class="btn btn-primary">Button</button>
+          </div>
+        </div>
+      </div>
+    </nav>
+
     <div>
-      <div class="bg-light p-5 rounded">
+      <div class="bg-body-tertiaryp-5 rounded">
         <div class="col-sm-8 mx-auto">
           <h1>Navbar examples</h1>
           <p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p>
diff --git a/site/content/docs/5.2/examples/navbars/navbar.css b/site/content/docs/5.3/examples/navbars/navbars.css
index 70d2094..70d2094 100644
--- a/site/content/docs/5.2/examples/navbars/navbar.css
+++ b/site/content/docs/5.3/examples/navbars/navbars.css
diff --git a/site/content/docs/5.2/examples/offcanvas-navbar/index.html b/site/content/docs/5.3/examples/offcanvas-navbar/index.html
index 81c9bb4..f72583f 100644
--- a/site/content/docs/5.2/examples/offcanvas-navbar/index.html
+++ b/site/content/docs/5.3/examples/offcanvas-navbar/index.html
@@ -2,11 +2,11 @@
 layout: examples
 title: Offcanvas navbar template
 extra_css:
-  - "offcanvas.css"
+  - "offcanvas-navbar.css"
 extra_js:
-  - src: "offcanvas.js"
-body_class: "bg-light"
-aliases: "/docs/5.2/examples/offcanvas/"
+  - src: "offcanvas-navbar.js"
+body_class: "bg-body-tertiary"
+aliases: "/docs/5.3/examples/offcanvas/"
 ---
 
 <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
@@ -75,21 +75,21 @@ aliases: "/docs/5.2/examples/offcanvas/"
 
   <div class="my-3 p-3 bg-body rounded shadow-sm">
     <h6 class="border-bottom pb-2 mb-0">Recent updates</h6>
-    <div class="d-flex text-muted pt-3">
+    <div class="d-flex text-body-secondary pt-3">
       {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
       <p class="pb-3 mb-0 small lh-sm border-bottom">
         <strong class="d-block text-gray-dark">@username</strong>
         Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps?
       </p>
     </div>
-    <div class="d-flex text-muted pt-3">
+    <div class="d-flex text-body-secondary pt-3">
       {{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 me-2 rounded" >}}
       <p class="pb-3 mb-0 small lh-sm border-bottom">
         <strong class="d-block text-gray-dark">@username</strong>
         Some more representative placeholder content, related to this other user. Another status update, perhaps.
       </p>
     </div>
-    <div class="d-flex text-muted pt-3">
+    <div class="d-flex text-body-secondary pt-3">
       {{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 me-2 rounded" >}}
       <p class="pb-3 mb-0 small lh-sm border-bottom">
         <strong class="d-block text-gray-dark">@username</strong>
@@ -103,7 +103,7 @@ aliases: "/docs/5.2/examples/offcanvas/"
 
   <div class="my-3 p-3 bg-body rounded shadow-sm">
     <h6 class="border-bottom pb-2 mb-0">Suggestions</h6>
-    <div class="d-flex text-muted pt-3">
+    <div class="d-flex text-body-secondary pt-3">
       {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
       <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
         <div class="d-flex justify-content-between">
@@ -113,7 +113,7 @@ aliases: "/docs/5.2/examples/offcanvas/"
         <span class="d-block">@username</span>
       </div>
     </div>
-    <div class="d-flex text-muted pt-3">
+    <div class="d-flex text-body-secondary pt-3">
       {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
       <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
         <div class="d-flex justify-content-between">
@@ -123,7 +123,7 @@ aliases: "/docs/5.2/examples/offcanvas/"
         <span class="d-block">@username</span>
       </div>
     </div>
-    <div class="d-flex text-muted pt-3">
+    <div class="d-flex text-body-secondary pt-3">
       {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
       <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
         <div class="d-flex justify-content-between">
diff --git a/site/content/docs/5.2/examples/offcanvas-navbar/offcanvas.css b/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.css
index f855b96..f855b96 100644
--- a/site/content/docs/5.2/examples/offcanvas-navbar/offcanvas.css
+++ b/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.css
diff --git a/site/content/docs/5.2/examples/offcanvas-navbar/offcanvas.js b/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.js
index b97a171..b97a171 100644
--- a/site/content/docs/5.2/examples/offcanvas-navbar/offcanvas.js
+++ b/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.js
diff --git a/site/content/docs/5.2/examples/pricing/index.html b/site/content/docs/5.3/examples/pricing/index.html
index 64b856a..e4e7b8a 100644
--- a/site/content/docs/5.2/examples/pricing/index.html
+++ b/site/content/docs/5.3/examples/pricing/index.html
@@ -3,7 +3,6 @@ layout: examples
 title: Pricing example
 extra_css:
   - "pricing.css"
-include_js: false
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
@@ -16,22 +15,22 @@ include_js: false
 <div class="container py-3">
   <header>
     <div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
-      <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
+      <a href="/" class="d-flex align-items-center link-body-emphasis text-decoration-none">
         <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
         <span class="fs-4">Pricing example</span>
       </a>
 
       <nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
-        <a class="me-3 py-2 text-dark text-decoration-none" href="#">Features</a>
-        <a class="me-3 py-2 text-dark text-decoration-none" href="#">Enterprise</a>
-        <a class="me-3 py-2 text-dark text-decoration-none" href="#">Support</a>
-        <a class="py-2 text-dark text-decoration-none" href="#">Pricing</a>
+        <a class="me-3 py-2 link-body-emphasis text-decoration-none" href="#">Features</a>
+        <a class="me-3 py-2 link-body-emphasis text-decoration-none" href="#">Enterprise</a>
+        <a class="me-3 py-2 link-body-emphasis text-decoration-none" href="#">Support</a>
+        <a class="py-2 link-body-emphasis text-decoration-none" href="#">Pricing</a>
       </nav>
     </div>
 
     <div class="pricing-header p-3 pb-md-4 mx-auto text-center">
-      <h1 class="display-4 fw-normal">Pricing</h1>
-      <p class="fs-5 text-muted">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
+      <h1 class="display-4 fw-normal text-body-emphasis">Pricing</h1>
+      <p class="fs-5 text-body-secondary">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
     </div>
   </header>
 
@@ -43,7 +42,7 @@ include_js: false
             <h4 class="my-0 fw-normal">Free</h4>
           </div>
           <div class="card-body">
-            <h1 class="card-title pricing-card-title">$0<small class="text-muted fw-light">/mo</small></h1>
+            <h1 class="card-title pricing-card-title">$0<small class="text-body-secondary fw-light">/mo</small></h1>
             <ul class="list-unstyled mt-3 mb-4">
               <li>10 users included</li>
               <li>2 GB of storage</li>
@@ -60,7 +59,7 @@ include_js: false
             <h4 class="my-0 fw-normal">Pro</h4>
           </div>
           <div class="card-body">
-            <h1 class="card-title pricing-card-title">$15<small class="text-muted fw-light">/mo</small></h1>
+            <h1 class="card-title pricing-card-title">$15<small class="text-body-secondary fw-light">/mo</small></h1>
             <ul class="list-unstyled mt-3 mb-4">
               <li>20 users included</li>
               <li>10 GB of storage</li>
@@ -77,7 +76,7 @@ include_js: false
             <h4 class="my-0 fw-normal">Enterprise</h4>
           </div>
           <div class="card-body">
-            <h1 class="card-title pricing-card-title">$29<small class="text-muted fw-light">/mo</small></h1>
+            <h1 class="card-title pricing-card-title">$29<small class="text-body-secondary fw-light">/mo</small></h1>
             <ul class="list-unstyled mt-3 mb-4">
               <li>30 users included</li>
               <li>15 GB of storage</li>
@@ -151,7 +150,7 @@ include_js: false
     <div class="row">
       <div class="col-12 col-md">
         <img class="mb-2" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="24" height="19">
-        <small class="d-block mb-3 text-muted">&copy; 2017–{{< year >}}</small>
+        <small class="d-block mb-3 text-body-secondary">&copy; 2017–{{< year >}}</small>
       </div>
       <div class="col-6 col-md">
         <h5>Features</h5>
diff --git a/site/content/docs/5.2/examples/product/product.css b/site/content/docs/5.3/examples/product/product.css
index 5fcb582..6c90ae5 100644
--- a/site/content/docs/5.2/examples/product/product.css
+++ b/site/content/docs/5.3/examples/product/product.css
@@ -2,6 +2,11 @@
   max-width: 960px;
 }
 
+.icon-link > .bi {
+  width: .75em;
+  height: .75em;
+}
+
 /*
  * Custom translucent site header
  */
diff --git a/site/content/docs/5.2/examples/sidebars/index.html b/site/content/docs/5.3/examples/sidebars/index.html
index 48889fa..ee1edc1 100644
--- a/site/content/docs/5.2/examples/sidebars/index.html
+++ b/site/content/docs/5.3/examples/sidebars/index.html
@@ -30,41 +30,6 @@ body_class: ""
   <symbol id="grid" viewBox="0 0 16 16">
     <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
   </symbol>
-  <symbol id="collection" viewBox="0 0 16 16">
-    <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/>
-  </symbol>
-  <symbol id="calendar3" viewBox="0 0 16 16">
-    <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
-    <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
-  </symbol>
-  <symbol id="chat-quote-fill" viewBox="0 0 16 16">
-    <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/>
-  </symbol>
-  <symbol id="cpu-fill" viewBox="0 0 16 16">
-    <path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
-    <path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/>
-  </symbol>
-  <symbol id="gear-fill" viewBox="0 0 16 16">
-    <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
-  </symbol>
-  <symbol id="speedometer" viewBox="0 0 16 16">
-    <path d="M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
-    <path fill-rule="evenodd" d="M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.945 11.945 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0z"/>
-  </symbol>
-  <symbol id="toggles2" viewBox="0 0 16 16">
-    <path d="M9.465 10H12a2 2 0 1 1 0 4H9.465c.34-.588.535-1.271.535-2 0-.729-.195-1.412-.535-2z"/>
-    <path d="M6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm.535-10a3.975 3.975 0 0 1-.409-1H4a1 1 0 0 1 0-2h2.126c.091-.355.23-.69.41-1H4a2 2 0 1 0 0 4h2.535z"/>
-    <path d="M14 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/>
-  </symbol>
-  <symbol id="tools" viewBox="0 0 16 16">
-    <path d="M1 0L0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
-  </symbol>
-  <symbol id="chevron-right" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
-  </symbol>
-  <symbol id="geo-fill" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/>
-  </symbol>
 </svg>
 
 <main class="d-flex flex-nowrap">
@@ -126,8 +91,8 @@ body_class: ""
 
   <div class="b-example-divider b-example-vr"></div>
 
-  <div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 280px;">
-    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
+  <div class="d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary" style="width: 280px;">
+    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
       <svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
       <span class="fs-4">Sidebar</span>
     </a>
@@ -140,25 +105,25 @@ body_class: ""
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link link-dark">
+        <a href="#" class="nav-link link-body-emphasis">
           <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
           Dashboard
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link link-dark">
+        <a href="#" class="nav-link link-body-emphasis">
           <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg>
           Orders
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link link-dark">
+        <a href="#" class="nav-link link-body-emphasis">
           <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
           Products
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link link-dark">
+        <a href="#" class="nav-link link-body-emphasis">
           <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
           Customers
         </a>
@@ -166,7 +131,7 @@ body_class: ""
     </ul>
     <hr>
     <div class="dropdown">
-      <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+      <a href="#" class="d-flex align-items-center link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
         <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
         <strong>mdo</strong>
       </a>
@@ -182,8 +147,8 @@ body_class: ""
 
   <div class="b-example-divider b-example-vr"></div>
 
-  <div class="d-flex flex-column flex-shrink-0 bg-light" style="width: 4.5rem;">
-    <a href="/" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
+  <div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 4.5rem;">
+    <a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
       <svg class="bi pe-none" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
       <span class="visually-hidden">Icon-only</span>
     </a>
@@ -215,7 +180,7 @@ body_class: ""
       </li>
     </ul>
     <div class="dropdown border-top">
-      <a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+      <a href="#" class="d-flex align-items-center justify-content-center p-3 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
         <img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle">
       </a>
       <ul class="dropdown-menu text-small shadow">
@@ -230,8 +195,8 @@ body_class: ""
 
   <div class="b-example-divider b-example-vr"></div>
 
-  <div class="flex-shrink-0 p-3 bg-white" style="width: 280px;">
-    <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
+  <div class="flex-shrink-0 p-3" style="width: 280px;">
+    <a href="/" class="d-flex align-items-center pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom">
       <svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
       <span class="fs-5 fw-semibold">Collapsible</span>
     </a>
@@ -242,9 +207,9 @@ body_class: ""
         </button>
         <div class="collapse show" id="home-collapse">
           <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Overview</a></li>
-            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Updates</a></li>
-            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Reports</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Overview</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Updates</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Reports</a></li>
           </ul>
         </div>
       </li>
@@ -254,10 +219,10 @@ body_class: ""
         </button>
         <div class="collapse" id="dashboard-collapse">
           <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Overview</a></li>
-            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Weekly</a></li>
-            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Monthly</a></li>
-            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Annually</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Overview</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Weekly</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Monthly</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Annually</a></li>
           </ul>
         </div>
       </li>
@@ -267,10 +232,10 @@ body_class: ""
         </button>
         <div class="collapse" id="orders-collapse">
           <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">New</a></li>
-            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Processed</a></li>
-            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Shipped</a></li>
-            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Returned</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">New</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Processed</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Shipped</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Returned</a></li>
           </ul>
         </div>
       </li>
@@ -293,8 +258,8 @@ body_class: ""
 
   <div class="b-example-divider b-example-vr"></div>
 
-  <div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-white" style="width: 380px;">
-    <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
+  <div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-body-tertiary" style="width: 380px;">
+    <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
       <svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
       <span class="fs-5 fw-semibold">List group</span>
     </a>
@@ -309,14 +274,14 @@ body_class: ""
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Tues</small>
+          <small class="text-body-secondary">Tues</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Mon</small>
+          <small class="text-body-secondary">Mon</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
@@ -324,63 +289,63 @@ body_class: ""
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Wed</small>
+          <small class="text-body-secondary">Wed</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Tues</small>
+          <small class="text-body-secondary">Tues</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Mon</small>
+          <small class="text-body-secondary">Mon</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Wed</small>
+          <small class="text-body-secondary">Wed</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Tues</small>
+          <small class="text-body-secondary">Tues</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Mon</small>
+          <small class="text-body-secondary">Mon</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Wed</small>
+          <small class="text-body-secondary">Wed</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Tues</small>
+          <small class="text-body-secondary">Tues</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
       <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Mon</small>
+          <small class="text-body-secondary">Mon</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
diff --git a/site/content/docs/5.2/examples/sidebars/sidebars.css b/site/content/docs/5.3/examples/sidebars/sidebars.css
index 5dc9fba..f6a8f1c 100644
--- a/site/content/docs/5.2/examples/sidebars/sidebars.css
+++ b/site/content/docs/5.3/examples/sidebars/sidebars.css
@@ -20,13 +20,13 @@ main {
 .btn-toggle {
   padding: .25rem .5rem;
   font-weight: 600;
-  color: rgba(0, 0, 0, .65);
+  color: var(--bs-emphasis-color);
   background-color: transparent;
 }
 .btn-toggle:hover,
 .btn-toggle:focus {
-  color: rgba(0, 0, 0, .85);
-  background-color: #d2f4ea;
+  color: rgba(var(--bs-emphasis-color-rgb), .85);
+  background-color: var(--bs-tertiary-bg);
 }
 
 .btn-toggle::before {
@@ -37,8 +37,12 @@ main {
   transform-origin: .5em 50%;
 }
 
+[data-bs-theme="dark"] .btn-toggle::before {
+  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+}
+
 .btn-toggle[aria-expanded="true"] {
-  color: rgba(0, 0, 0, .85);
+  color: rgba(var(--bs-emphasis-color-rgb), .85);
 }
 .btn-toggle[aria-expanded="true"]::before {
   transform: rotate(90deg);
@@ -51,7 +55,7 @@ main {
 }
 .btn-toggle-nav a:hover,
 .btn-toggle-nav a:focus {
-  background-color: #d2f4ea;
+  background-color: var(--bs-tertiary-bg);
 }
 
 .scrollarea {
diff --git a/site/content/docs/5.2/examples/sidebars/sidebars.js b/site/content/docs/5.3/examples/sidebars/sidebars.js
index 4075f1f..4075f1f 100644
--- a/site/content/docs/5.2/examples/sidebars/sidebars.js
+++ b/site/content/docs/5.3/examples/sidebars/sidebars.js
diff --git a/site/content/docs/5.2/examples/sign-in/index.html b/site/content/docs/5.3/examples/sign-in/index.html
index 8772ba3..8420c45 100644
--- a/site/content/docs/5.2/examples/sign-in/index.html
+++ b/site/content/docs/5.3/examples/sign-in/index.html
@@ -2,9 +2,8 @@
 layout: examples
 title: Signin Template
 extra_css:
-  - "signin.css"
-body_class: "text-center"
-include_js: false
+  - "sign-in.css"
+body_class: "d-flex align-items-center py-4 bg-body-tertiary"
 ---
 
 <main class="form-signin w-100 m-auto">
@@ -21,12 +20,13 @@ include_js: false
       <label for="floatingPassword">Password</label>
     </div>
 
-    <div class="checkbox mb-3">
-      <label>
-        <input type="checkbox" value="remember-me"> Remember me
+    <div class="form-check text-start my-3">
+      <input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault">
+      <label class="form-check-label" for="flexCheckDefault">
+        Remember me
       </label>
     </div>
-    <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
-    <p class="mt-5 mb-3 text-muted">&copy; 2017–{{< year >}}</p>
+    <button class="btn btn-primary w-100 py-2" type="submit">Sign in</button>
+    <p class="mt-5 mb-3 text-body-secondary">&copy; 2017–{{< year >}}</p>
   </form>
 </main>
diff --git a/site/content/docs/5.2/examples/sign-in/signin.css b/site/content/docs/5.3/examples/sign-in/sign-in.css
index 89deea4..641f6d9 100644
--- a/site/content/docs/5.2/examples/sign-in/signin.css
+++ b/site/content/docs/5.3/examples/sign-in/sign-in.css
@@ -3,17 +3,9 @@ body {
   height: 100%;
 }
 
-body {
-  display: flex;
-  align-items: center;
-  padding-top: 40px;
-  padding-bottom: 40px;
-  background-color: #f5f5f5;
-}
-
 .form-signin {
   max-width: 330px;
-  padding: 15px;
+  padding: 1rem;
 }
 
 .form-signin .form-floating:focus-within {
diff --git a/site/content/docs/5.2/examples/sticky-footer-navbar/index.html b/site/content/docs/5.3/examples/sticky-footer-navbar/index.html
index 1f807a6..75b99cd 100644
--- a/site/content/docs/5.2/examples/sticky-footer-navbar/index.html
+++ b/site/content/docs/5.3/examples/sticky-footer-navbar/index.html
@@ -45,8 +45,8 @@ body_class: "d-flex flex-column h-100"
   </div>
 </main>
 
-<footer class="footer mt-auto py-3 bg-light">
+<footer class="footer mt-auto py-3 bg-body-tertiary">
   <div class="container">
-    <span class="text-muted">Place sticky footer content here.</span>
+    <span class="text-body-secondary">Place sticky footer content here.</span>
   </div>
 </footer>
diff --git a/site/content/docs/5.2/examples/sticky-footer-navbar/sticky-footer-navbar.css b/site/content/docs/5.3/examples/sticky-footer-navbar/sticky-footer-navbar.css
index 3087ead..3087ead 100644
--- a/site/content/docs/5.2/examples/sticky-footer-navbar/sticky-footer-navbar.css
+++ b/site/content/docs/5.3/examples/sticky-footer-navbar/sticky-footer-navbar.css
diff --git a/site/content/docs/5.2/examples/sticky-footer/index.html b/site/content/docs/5.3/examples/sticky-footer/index.html
index 7a6e127..631adda 100644
--- a/site/content/docs/5.2/examples/sticky-footer/index.html
+++ b/site/content/docs/5.3/examples/sticky-footer/index.html
@@ -5,7 +5,6 @@ extra_css:
   - "sticky-footer.css"
 html_class: "h-100"
 body_class: "d-flex flex-column h-100"
-include_js: false
 ---
 
 <!-- Begin page content -->
@@ -17,8 +16,8 @@ include_js: false
   </div>
 </main>
 
-<footer class="footer mt-auto py-3 bg-light">
+<footer class="footer mt-auto py-3 bg-body-tertiary">
   <div class="container">
-    <span class="text-muted">Place sticky footer content here.</span>
+    <span class="text-body-secondary">Place sticky footer content here.</span>
   </div>
 </footer>
diff --git a/site/content/docs/5.2/examples/sticky-footer/sticky-footer.css b/site/content/docs/5.3/examples/sticky-footer/sticky-footer.css
index f8be437..f8be437 100644
--- a/site/content/docs/5.2/examples/sticky-footer/sticky-footer.css
+++ b/site/content/docs/5.3/examples/sticky-footer/sticky-footer.css