From fb1ecc5ba739813209c4dc84983a969a549b9c95 Mon Sep 17 00:00:00 2001
From: Andrii Kurdiumov <kant2002@gmail.com>
Date: Mon, 16 Sep 2024 15:33:46 +0500
Subject: [PATCH] Modify Boostrap to be servable from Github pages

---
 .github/workflows/docs.yml                     |  2 +-
 hugo.yml                                       |  4 ++--
 site/content/docs/5.3/_index.html              |  2 +-
 site/content/docs/5.3/about/brand.md           |  6 +++---
 site/content/docs/5.3/components/navbar.md     |  4 ++--
 site/content/docs/5.3/examples/_index.md       |  8 ++++----
 .../5.3/examples/cheatsheet-rtl/index.html     |  6 +++---
 .../docs/5.3/examples/cheatsheet/index.html    |  6 +++---
 .../docs/5.3/examples/checkout-rtl/index.html  |  2 +-
 .../docs/5.3/examples/checkout/index.html      |  2 +-
 .../docs/5.3/examples/heroes/index.html        |  2 +-
 .../5.3/examples/offcanvas-navbar/index.html   |  4 ++--
 .../docs/5.3/examples/pricing/index.html       |  2 +-
 .../docs/5.3/examples/sign-in/index.html       |  2 +-
 site/content/docs/5.3/forms/validation.md      |  2 +-
 .../content/docs/5.3/getting-started/parcel.md |  6 +++---
 site/content/docs/5.3/getting-started/vite.md  |  6 +++---
 .../docs/5.3/getting-started/webpack.md        |  6 +++---
 site/content/docs/_index.html                  |  2 +-
 .../_default/_markup/render-heading.html       |  2 +-
 site/layouts/_default/examples.html            |  6 +++---
 site/layouts/_default/single.html              |  4 ++--
 site/layouts/partials/docs-navbar.html         |  4 ++--
 site/layouts/partials/docs-sidebar.html        |  4 ++--
 site/layouts/partials/docs-versions.html       |  2 +-
 site/layouts/partials/favicons.html            | 12 ++++++------
 site/layouts/partials/footer.html              | 16 ++++++++--------
 site/layouts/partials/header.html              |  4 ++--
 .../partials/home/components-utilities.html    |  8 ++++----
 site/layouts/partials/home/css-variables.html  |  4 ++--
 site/layouts/partials/home/customize.html      |  6 +++---
 site/layouts/partials/home/get-started.html    | 18 +++++++++---------
 site/layouts/partials/home/icons.html          |  4 ++--
 site/layouts/partials/home/masthead.html       |  8 ++++----
 site/layouts/partials/home/plugins.html        |  6 +++---
 site/layouts/partials/home/themes.html         |  4 ++--
 site/layouts/partials/scripts.html             |  4 ++--
 site/layouts/partials/social.html              |  2 +-
 site/layouts/partials/stylesheet.html          |  6 +++---
 site/layouts/shortcodes/docsref.html           |  2 +-
 40 files changed, 100 insertions(+), 100 deletions(-)

diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
index e641bb13d5f5..4a677678f2e3 100644
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -59,7 +59,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:
-          path: ./_site
+          path: ./_site/custom-bootstrap
 
   # Deployment job
   deploy:
diff --git a/hugo.yml b/hugo.yml
index 17f8b7b6806e..0935394c5306 100644
--- a/hugo.yml
+++ b/hugo.yml
@@ -1,6 +1,6 @@
 languageCode:           "en"
 title:                  "Bootstrap"
-baseURL:                "https://getbootstrap.com"
+baseURL:                "https://kant2002.github.io/custom-bootstrap/"
 
 security:
   enableInlineShortcodes: true
@@ -28,7 +28,7 @@ enableRobotsTXT:        true
 metaDataFormat:         "yaml"
 disableKinds:           ["404", "taxonomy", "term", "RSS"]
 
-publishDir:             "_site"
+publishDir:             "_site/custom-bootstrap"
 
 module:
   mounts:
diff --git a/site/content/docs/5.3/_index.html b/site/content/docs/5.3/_index.html
index b04e391bc4be..ac70fa2b1d3d 100644
--- a/site/content/docs/5.3/_index.html
+++ b/site/content/docs/5.3/_index.html
@@ -1,5 +1,5 @@
 ---
 layout: redirect
 sitemap_exclude: true
-redirect: "/docs/5.3/getting-started/introduction/"
+redirect: "docs/5.3/getting-started/introduction/"
 ---
diff --git a/site/content/docs/5.3/about/brand.md b/site/content/docs/5.3/about/brand.md
index 59f262eff853..c549ea6bd3df 100644
--- a/site/content/docs/5.3/about/brand.md
+++ b/site/content/docs/5.3/about/brand.md
@@ -13,17 +13,17 @@ Have a need for Bootstrap's brand resources? Great! We have only a few guideline
 When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap's branding for your own open or closed source projects.
 
 <div class="bd-brand-item px-2 py-5 mb-3 border rounded-3">
-  <img class="d-block img-fluid mx-auto" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="256" height="204">
+  <img class="d-block img-fluid mx-auto" src="docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="256" height="204">
 </div>
 
 Our logo mark is also available in black and white. All rules for our primary logo apply to these as well.
 
 <div class="bd-brand-logos d-sm-flex text-center bg-light rounded-3 overflow-hidden w-100 mb-3">
   <div class="bd-brand-item w-100 px-2 py-5">
-    <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-black.svg" alt="Bootstrap" width="128" height="102" loading="lazy">
+    <img src="docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-black.svg" alt="Bootstrap" width="128" height="102" loading="lazy">
   </div>
   <div class="bd-brand-item w-100 px-2 py-5 inverse">
-    <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" alt="Bootstrap" width="128" height="102" loading="lazy">
+    <img src="docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" alt="Bootstrap" width="128" height="102" loading="lazy">
   </div>
 </div>
 
diff --git a/site/content/docs/5.3/components/navbar.md b/site/content/docs/5.3/components/navbar.md
index ab6c2305ce8a..7c2b445edab6 100644
--- a/site/content/docs/5.3/components/navbar.md
+++ b/site/content/docs/5.3/components/navbar.md
@@ -109,7 +109,7 @@ You can replace the text within the `.navbar-brand` with an `<img>`.
 <nav class="navbar bg-body-tertiary">
   <div class="container">
     <a class="navbar-brand" href="#">
-      <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
+      <img src="docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
     </a>
   </div>
 </nav>
@@ -123,7 +123,7 @@ You can also make use of some additional utilities to add an image and text at t
 <nav class="navbar bg-body-tertiary">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">
-      <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
+      <img src="docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
       Bootstrap
     </a>
   </div>
diff --git a/site/content/docs/5.3/examples/_index.md b/site/content/docs/5.3/examples/_index.md
index c3c242312ac5..e09a66779521 100644
--- a/site/content/docs/5.3/examples/_index.md
+++ b/site/content/docs/5.3/examples/_index.md
@@ -45,10 +45,10 @@ aliases: "/examples/"
         </div>
       {{ else }}
         <div class="col-sm-6 col-md-3 mb-3">
-          <a class="d-block link-offset-1" 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"
+          <a class="d-block link-offset-1" 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">
diff --git a/site/content/docs/5.3/examples/cheatsheet-rtl/index.html b/site/content/docs/5.3/examples/cheatsheet-rtl/index.html
index eeb825fad3fb..8cd6ccfdedf4 100644
--- a/site/content/docs/5.3/examples/cheatsheet-rtl/index.html
+++ b/site/content/docs/5.3/examples/cheatsheet-rtl/index.html
@@ -12,7 +12,7 @@
 <header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark">
   <div class="container-fluid d-flex align-items-center">
     <h1 class="d-flex align-items-center fs-4 text-white mb-0">
-      <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap">
+      <img src="docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap">
       ورقة الغش
     </h1>
     <a href="{{< docsref "/examples/cheatsheet" >}}" class="ms-auto link-light" hreflang="en">جدول بيانات LTR</a>
@@ -1224,7 +1224,7 @@ <h3>شريط التنقل</h3>
         <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"
+              <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"
                    style="filter: invert(1) grayscale(100%) brightness(200%);">
             </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="تبديل التنقل">
@@ -1264,7 +1264,7 @@ <h3>شريط التنقل</h3>
         <nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
           <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">
+              <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">
             </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="تبديل التنقل">
               <span class="navbar-toggler-icon"></span>
diff --git a/site/content/docs/5.3/examples/cheatsheet/index.html b/site/content/docs/5.3/examples/cheatsheet/index.html
index cbe2b745c9ef..a19ec9f65448 100644
--- a/site/content/docs/5.3/examples/cheatsheet/index.html
+++ b/site/content/docs/5.3/examples/cheatsheet/index.html
@@ -11,7 +11,7 @@
 <header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark">
   <div class="container-fluid d-flex align-items-center">
     <h1 class="d-flex align-items-center fs-4 text-white mb-0">
-      <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap">
+      <img src="docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap">
       Cheatsheet
     </h1>
     <a href="{{< docsref "/examples/cheatsheet-rtl" >}}" class="ms-auto link-light" hreflang="ar">RTL cheatsheet</a>
@@ -1223,7 +1223,7 @@ <h3>Navbar</h3>
         <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"
+              <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"
                    style="filter: invert(1) grayscale(100%) brightness(200%);">
             </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -1263,7 +1263,7 @@ <h3>Navbar</h3>
         <nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
           <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">
+              <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">
             </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
diff --git a/site/content/docs/5.3/examples/checkout-rtl/index.html b/site/content/docs/5.3/examples/checkout-rtl/index.html
index 6516efea61ab..d7371316c1bd 100644
--- a/site/content/docs/5.3/examples/checkout-rtl/index.html
+++ b/site/content/docs/5.3/examples/checkout-rtl/index.html
@@ -12,7 +12,7 @@
 <div class="container">
   <main>
     <div class="py-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">
+      <img class="d-block mx-auto mb-4" src="docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
       <h2>نموذج إتمام الشراء</h2>
       <p class="lead">فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.</p>
     </div>
diff --git a/site/content/docs/5.3/examples/checkout/index.html b/site/content/docs/5.3/examples/checkout/index.html
index d39f0f2a41e2..f53bc7a69594 100644
--- a/site/content/docs/5.3/examples/checkout/index.html
+++ b/site/content/docs/5.3/examples/checkout/index.html
@@ -11,7 +11,7 @@
 <div class="container">
   <main>
     <div class="py-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">
+      <img class="d-block mx-auto mb-4" src="docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
       <h2>Checkout form</h2>
       <p class="lead">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>
diff --git a/site/content/docs/5.3/examples/heroes/index.html b/site/content/docs/5.3/examples/heroes/index.html
index 7f5daa9b9099..93d662c6767f 100644
--- a/site/content/docs/5.3/examples/heroes/index.html
+++ b/site/content/docs/5.3/examples/heroes/index.html
@@ -10,7 +10,7 @@
   <h1 class="visually-hidden">Heroes examples</h1>
 
   <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">
+    <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 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>
diff --git a/site/content/docs/5.3/examples/offcanvas-navbar/index.html b/site/content/docs/5.3/examples/offcanvas-navbar/index.html
index f72583f9b1c5..8cd9177bf815 100644
--- a/site/content/docs/5.3/examples/offcanvas-navbar/index.html
+++ b/site/content/docs/5.3/examples/offcanvas-navbar/index.html
@@ -6,7 +6,7 @@
 extra_js:
   - src: "offcanvas-navbar.js"
 body_class: "bg-body-tertiary"
-aliases: "/docs/5.3/examples/offcanvas/"
+aliases: "docs/5.3/examples/offcanvas/"
 ---
 
 <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
@@ -66,7 +66,7 @@
 
 <main class="container">
   <div class="d-flex align-items-center p-3 my-3 text-white bg-purple rounded shadow-sm">
-    <img class="me-3" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" alt="" width="48" height="38">
+    <img class="me-3" src="docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" alt="" width="48" height="38">
     <div class="lh-1">
       <h1 class="h6 mb-0 text-white lh-1">Bootstrap</h1>
       <small>Since 2011</small>
diff --git a/site/content/docs/5.3/examples/pricing/index.html b/site/content/docs/5.3/examples/pricing/index.html
index 2f375b36d251..d5a98d5dd9a4 100644
--- a/site/content/docs/5.3/examples/pricing/index.html
+++ b/site/content/docs/5.3/examples/pricing/index.html
@@ -149,7 +149,7 @@ <h2 class="display-6 text-center mb-4">Compare plans</h2>
   <footer class="pt-4 my-md-5 pt-md-5 border-top">
     <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">
+        <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-body-secondary">&copy; 2017–{{< year >}}</small>
       </div>
       <div class="col-6 col-md">
diff --git a/site/content/docs/5.3/examples/sign-in/index.html b/site/content/docs/5.3/examples/sign-in/index.html
index 8420c45274f7..fc1371bb10b0 100644
--- a/site/content/docs/5.3/examples/sign-in/index.html
+++ b/site/content/docs/5.3/examples/sign-in/index.html
@@ -8,7 +8,7 @@
 
 <main class="form-signin w-100 m-auto">
   <form>
-    <img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
+    <img class="mb-4" src="docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
     <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
 
     <div class="form-floating">
diff --git a/site/content/docs/5.3/forms/validation.md b/site/content/docs/5.3/forms/validation.md
index c66bbaf87c82..e5b1c3043feb 100644
--- a/site/content/docs/5.3/forms/validation.md
+++ b/site/content/docs/5.3/forms/validation.md
@@ -5,7 +5,7 @@ description: Provide valuable, actionable feedback to your users with HTML5 form
 group: forms
 toc: true
 extra_js:
-  - src: "/docs/5.3/assets/js/validate-forms.js"
+  - src: "docs/5.3/assets/js/validate-forms.js"
     async: true
 ---
 
diff --git a/site/content/docs/5.3/getting-started/parcel.md b/site/content/docs/5.3/getting-started/parcel.md
index a987b4587be1..b0e64d8ae7e0 100644
--- a/site/content/docs/5.3/getting-started/parcel.md
+++ b/site/content/docs/5.3/getting-started/parcel.md
@@ -7,7 +7,7 @@ toc: true
 thumbnail: guides/bootstrap-parcel@2x.png
 ---
 
-<img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png" width="2000" height="1000" alt="">
+<img class="mb-4 img-fluid rounded-3" srcset="docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel@2x.png 2x" src="docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png" width="2000" height="1000" alt="">
 
 {{< callout >}}
 **Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/parcel). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/parcel?file=index.html) but not run it because Parcel isn't currently supported there.
@@ -111,7 +111,7 @@ With dependencies installed and our project folder ready for us to start coding,
    npm start
    ```
 
-   <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/parcel-dev-server.png" alt="Parcel dev server running">
+   <img class="img-fluid" src="docs/{{< param docs_version >}}/assets/img/guides/parcel-dev-server.png" alt="Parcel dev server running">
 
 In the next and final section to this guide, we'll import all of Bootstrap's CSS and JavaScript.
 
@@ -150,7 +150,7 @@ Importing Bootstrap into Parcel requires two imports, one into our `styles.scss`
 
 3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:
 
-   <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/parcel-dev-server-bootstrap.png" alt="Parcel dev server running with Bootstrap">
+   <img class="img-fluid" src="docs/{{< param docs_version >}}/assets/img/guides/parcel-dev-server-bootstrap.png" alt="Parcel dev server running with Bootstrap">
 
    Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Parcel example project](https://github.com/twbs/examples/tree/main/parcel) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.
 
diff --git a/site/content/docs/5.3/getting-started/vite.md b/site/content/docs/5.3/getting-started/vite.md
index 33b76d3df6a2..aaaf1562b9bc 100644
--- a/site/content/docs/5.3/getting-started/vite.md
+++ b/site/content/docs/5.3/getting-started/vite.md
@@ -7,7 +7,7 @@ toc: true
 thumbnail: guides/bootstrap-vite@2x.png
 ---
 
-<img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png" width="2000" height="1000" alt="">
+<img class="mb-4 img-fluid rounded-3" srcset="docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite@2x.png 2x" src="docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png" width="2000" height="1000" alt="">
 
 {{< callout >}}
 **Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/vite). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/vite?file=index.html) for live editing.
@@ -132,7 +132,7 @@ With dependencies installed and our project folder ready for us to start coding,
    npm start
    ```
 
-   <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server.png" alt="Vite dev server running">
+   <img class="img-fluid" src="docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server.png" alt="Vite dev server running">
 
 In the next and final section to this guide, we’ll import all of Bootstrap’s CSS and JavaScript.
 
@@ -172,7 +172,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s
 
 3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:
 
-   <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server-bootstrap.png" alt="Vite dev server running with Bootstrap">
+   <img class="img-fluid" src="docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server-bootstrap.png" alt="Vite dev server running with Bootstrap">
 
    Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Vite example project](https://github.com/twbs/examples/tree/main/vite) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.
 
diff --git a/site/content/docs/5.3/getting-started/webpack.md b/site/content/docs/5.3/getting-started/webpack.md
index 39adaf61a255..d9ead4569fec 100644
--- a/site/content/docs/5.3/getting-started/webpack.md
+++ b/site/content/docs/5.3/getting-started/webpack.md
@@ -7,7 +7,7 @@ toc: true
 thumbnail: guides/bootstrap-webpack@2x.png
 ---
 
-<img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png" width="2000" height="1000" alt="">
+<img class="mb-4 img-fluid rounded-3" srcset="docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack@2x.png 2x" src="docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png" width="2000" height="1000" alt="">
 
 {{< callout >}}
 **Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/webpack). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/webpack?file=index.html) for live editing.
@@ -141,7 +141,7 @@ With dependencies installed and our project folder ready for us to start coding,
    npm start
    ```
 
-   <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/webpack-dev-server.png" alt="Webpack dev server running">
+   <img class="img-fluid" src="docs/{{< param docs_version >}}/assets/img/guides/webpack-dev-server.png" alt="Webpack dev server running">
 
 In the next and final section to this guide, we'll set up the Webpack loaders and import all of Bootstrap's CSS and JavaScript.
 
@@ -244,7 +244,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
 
 4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:
 
-   <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/webpack-dev-server-bootstrap.png" alt="Webpack dev server running with Bootstrap">
+   <img class="img-fluid" src="docs/{{< param docs_version >}}/assets/img/guides/webpack-dev-server-bootstrap.png" alt="Webpack dev server running with Bootstrap">
 
    Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Webpack example project](https://github.com/twbs/examples/tree/main/webpack) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.
 
diff --git a/site/content/docs/_index.html b/site/content/docs/_index.html
index b04e391bc4be..ac70fa2b1d3d 100644
--- a/site/content/docs/_index.html
+++ b/site/content/docs/_index.html
@@ -1,5 +1,5 @@
 ---
 layout: redirect
 sitemap_exclude: true
-redirect: "/docs/5.3/getting-started/introduction/"
+redirect: "docs/5.3/getting-started/introduction/"
 ---
diff --git a/site/layouts/_default/_markup/render-heading.html b/site/layouts/_default/_markup/render-heading.html
index cfb3d8fe79c3..c7ce2ac09456 100644
--- a/site/layouts/_default/_markup/render-heading.html
+++ b/site/layouts/_default/_markup/render-heading.html
@@ -1,5 +1,5 @@
 <h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}
 {{- if and (ge .Level .Page.Site.Params.anchors.min) (le .Level .Page.Site.Params.anchors.max) }}{{" " -}}
-<a class="anchor-link" href="#{{ .Anchor | safeURL }}" aria-label="Link to this section: {{ .Text | safeHTML }}"></a>
+<a class="anchor-link" href="{{ .Page.RelPermalink | safeURL }}#{{ .Anchor | safeURL }}" aria-label="Link to this section: {{ .Text | safeHTML }}"></a>
 {{- end -}}
 </h{{ .Level }}>
diff --git a/site/layouts/_default/examples.html b/site/layouts/_default/examples.html
index e99c6975d473..9fbca91b4c55 100644
--- a/site/layouts/_default/examples.html
+++ b/site/layouts/_default/examples.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html {{ if eq .Page.Params.direction "rtl" }}lang="ar" dir="rtl"{{ else }}lang="en"{{ end }}{{ with .Page.Params.html_class }} class="{{ . }}"{{ end }} data-bs-theme="auto">
   <head>
-    {{- $colorModeJS := printf "/docs/%s/assets/js/color-modes.js" $.Site.Params.docs_version -}}
+    {{- $colorModeJS := printf "docs/%s/assets/js/color-modes.js" $.Site.Params.docs_version -}}
     <script src="{{ $colorModeJS | relURL }}"></script>
 
     <meta charset="utf-8">
@@ -159,9 +159,9 @@
     {{ .Content }}
 
     {{- if eq hugo.Environment "production" -}}
-      <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }} crossorigin="anonymous"></script>
+      <script src="docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }} crossorigin="anonymous"></script>
     {{- else -}}
-      <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
+      <script src="docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
     {{- end }}
 
     {{ range .Page.Params.extra_js -}}
diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html
index 52ae87c8e177..776a0ad724b3 100644
--- a/site/layouts/_default/single.html
+++ b/site/layouts/_default/single.html
@@ -41,9 +41,9 @@ <h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2>
             </p>
             <a href="{{ .Site.Params.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
           </div>
-          <img class="d-block img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage.png,
+          <img class="d-block img-fluid mt-3 mx-auto" srcset="docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage.png,
                                                               /docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage@2x.png 2x"
-                                                        src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage.png"
+                                                        src="docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage.png"
                                                         alt="Bootstrap Themes" width="1150" height="320" loading="lazy">
         </div>
       {{ end }}
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index 94f61d646b13..0b88c541d932 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -33,10 +33,10 @@ <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5
         <hr class="d-lg-none text-white-50">
         <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
           <li class="nav-item col-6 col-lg-auto">
-            <a class="nav-link py-2 px-0 px-lg-2{{ if eq .Page.Layout "docs" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
+            <a class="nav-link py-2 px-0 px-lg-2{{ if eq .Page.Layout "docs" }} active" aria-current="true{{ end }}" href="docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
           </li>
           <li class="nav-item col-6 col-lg-auto">
-            <a class="nav-link py-2 px-0 px-lg-2{{ if eq .Page.Title "Examples" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
+            <a class="nav-link py-2 px-0 px-lg-2{{ if eq .Page.Title "Examples" }} active" aria-current="true{{ end }}" href="docs/{{ .Site.Params.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
           </li>
           <li class="nav-item col-6 col-lg-auto">
             <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.icons }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html
index e7b5576874b3..4e94468853f3 100644
--- a/site/layouts/partials/docs-sidebar.html
+++ b/site/layouts/partials/docs-sidebar.html
@@ -28,7 +28,7 @@
           {{- range $doc := $group.pages -}}
             {{- $doc_slug := $doc.title | urlize -}}
             {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
-            {{- $href := printf "/docs/%s/%s/%s/" $.Site.Params.docs_version $group_slug $doc_slug }}
+            {{- $href := printf "docs/%s/%s/%s/" $.Site.Params.docs_version $group_slug $doc_slug }}
             <li><a href="{{ $href }}" class="bd-links-link d-inline-block rounded{{ if $is_active }} active{{ end }}"{{ if $is_active }} aria-current="page"{{ end }}>{{ $doc.title }}</a></li>
           {{- end }}
         </ul>
@@ -36,7 +36,7 @@
     {{- else }}
       <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
       <li class="bd-links-span-all">
-        <a href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/" class="bd-links-link d-inline-block rounded small {{ if $is_active_group }} active{{ end }}"{{ if $is_active_group }} aria-current="page"{{ end }}>
+        <a href="docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/" class="bd-links-link d-inline-block rounded small {{ if $is_active_group }} active{{ end }}"{{ if $is_active_group }} aria-current="page"{{ end }}>
           {{ $group.title }}
         </a>
       </li>
diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html
index d09c6551a86b..6a6dadeb3e27 100644
--- a/site/layouts/partials/docs-versions.html
+++ b/site/layouts/partials/docs-versions.html
@@ -49,6 +49,6 @@
     <li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
     <li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
     <li><hr class="dropdown-divider"></li>
-    <li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
+    <li><a class="dropdown-item" href="docs/versions/">All versions</a></li>
   </ul>
 </li>
diff --git a/site/layouts/partials/favicons.html b/site/layouts/partials/favicons.html
index 58bdb8b8b3f9..79d4bb873452 100644
--- a/site/layouts/partials/favicons.html
+++ b/site/layouts/partials/favicons.html
@@ -1,8 +1,8 @@
 {{ "<!-- Favicons -->" | safeHTML }}
-<link rel="apple-touch-icon" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
-<link rel="icon" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
-<link rel="icon" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
-<link rel="manifest" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
-<link rel="icon" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/favicon.ico">
+<link rel="apple-touch-icon" href="docs/{{ .Site.Params.docs_version }}/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="docs/{{ .Site.Params.docs_version }}/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="docs/{{ .Site.Params.docs_version }}/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="docs/{{ .Site.Params.docs_version }}/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="docs/{{ .Site.Params.docs_version }}/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
+<link rel="icon" href="docs/{{ .Site.Params.docs_version }}/assets/img/favicons/favicon.ico">
 <meta name="theme-color" content="#712cf9">
diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
index 421b70ec8d46..5c5627842b80 100644
--- a/site/layouts/partials/footer.html
+++ b/site/layouts/partials/footer.html
@@ -7,7 +7,7 @@
           <span class="fs-5">Bootstrap</span>
         </a>
         <ul class="list-unstyled small">
-          <li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/{{ .Site.Params.docs_version }}/about/team/">Bootstrap team</a> with the help of <a href="{{ .Site.Params.repo }}/graphs/contributors">our contributors</a>.</li>
+          <li class="mb-2">Designed and built with all the love in the world by the <a href="docs/{{ .Site.Params.docs_version }}/about/team/">Bootstrap team</a> with the help of <a href="{{ .Site.Params.repo }}/graphs/contributors">our contributors</a>.</li>
           <li class="mb-2">Code licensed <a href="{{ .Site.Params.repo }}/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
           <li class="mb-2">Currently v{{ .Site.Params.current_version }}.</li>
         </ul>
@@ -16,8 +16,8 @@
         <h5>Links</h5>
         <ul class="list-unstyled">
           <li class="mb-2"><a href="/">Home</a></li>
-          <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/">Docs</a></li>
-          <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/examples/">Examples</a></li>
+          <li class="mb-2"><a href="docs/{{ .Site.Params.docs_version }}/">Docs</a></li>
+          <li class="mb-2"><a href="docs/{{ .Site.Params.docs_version }}/examples/">Examples</a></li>
           <li class="mb-2"><a href="{{ .Site.Params.icons }}">Icons</a></li>
           <li class="mb-2"><a href="{{ .Site.Params.themes }}">Themes</a></li>
           <li class="mb-2"><a href="{{ .Site.Params.blog }}">Blog</a></li>
@@ -27,11 +27,11 @@ <h5>Links</h5>
       <div class="col-6 col-lg-2 mb-3">
         <h5>Guides</h5>
         <ul class="list-unstyled">
-          <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/">Getting started</a></li>
-          <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/examples/starter-template/">Starter template</a></li>
-          <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/webpack/">Webpack</a></li>
-          <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/parcel/">Parcel</a></li>
-          <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/vite/">Vite</a></li>
+          <li class="mb-2"><a href="docs/{{ .Site.Params.docs_version }}/getting-started/">Getting started</a></li>
+          <li class="mb-2"><a href="docs/{{ .Site.Params.docs_version }}/examples/starter-template/">Starter template</a></li>
+          <li class="mb-2"><a href="docs/{{ .Site.Params.docs_version }}/getting-started/webpack/">Webpack</a></li>
+          <li class="mb-2"><a href="docs/{{ .Site.Params.docs_version }}/getting-started/parcel/">Parcel</a></li>
+          <li class="mb-2"><a href="docs/{{ .Site.Params.docs_version }}/getting-started/vite/">Vite</a></li>
         </ul>
       </div>
       <div class="col-6 col-lg-2 mb-3">
diff --git a/site/layouts/partials/header.html b/site/layouts/partials/header.html
index 6323f4908676..f6d68e324518 100644
--- a/site/layouts/partials/header.html
+++ b/site/layouts/partials/header.html
@@ -3,7 +3,7 @@
 <meta name="description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}">
 <meta name="author" content="{{ .Site.Params.authors }}">
 <meta name="generator" content="Hugo {{ hugo.Version }}">
-
+<base href="/custom-bootstrap/">
 <meta name="docsearch:language" content="en">
 <meta name="docsearch:version" content="{{ .Site.Params.docs_version }}">
 
@@ -17,7 +17,7 @@
 <meta name="robots" content="{{ . }}">
 {{- end }}
 
-{{- $colorModeJS := printf "/docs/%s/assets/js/color-modes.js" $.Site.Params.docs_version -}}
+{{- $colorModeJS := printf "docs/%s/assets/js/color-modes.js" $.Site.Params.docs_version -}}
 <script src="{{ $colorModeJS | relURL }}"></script>
 
 {{ partial "stylesheet" . }}
diff --git a/site/layouts/partials/home/components-utilities.html b/site/layouts/partials/home/components-utilities.html
index f945a038657b..8776587679d9 100644
--- a/site/layouts/partials/home/components-utilities.html
+++ b/site/layouts/partials/home/components-utilities.html
@@ -9,13 +9,13 @@
     </div>
     <h2 class="display-5 mb-3 fw-semibold lh-sm">Components, meet the Utility&nbsp;API</h2>
     <p class="lead fw-normal">
-      New in Bootstrap 5, our utilities are now generated by our <a href="/docs/{{ .Site.Params.docs_version }}/utilities/api/">Utility API</a>. We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them custom names.
+      New in Bootstrap 5, our utilities are now generated by our <a href="docs/{{ .Site.Params.docs_version }}/utilities/api/">Utility API</a>. We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them custom names.
     </p>
   </div>
   <div class="row gx-md-5">
     <div class="col-lg-6">
       <h3 class="fw-semibold">Quickly customize components</h3>
-      <p>Apply any of our included utility classes to our components to customize their appearance, like the navigation example below. There are hundreds of classes available—from <a href="/docs/{{ .Site.Params.docs_version }}/utilities/position/">positioning</a> and <a href="/docs/{{ .Site.Params.docs_version }}/utilities/sizing/">sizing</a> to <a href="/docs/{{ .Site.Params.docs_version }}/utilities/colors/">colors</a> and <a href="/docs/{{ .Site.Params.docs_version }}/utilities/shadows/">effects</a>. Mix them with CSS variable overrides for even more control.</p>
+      <p>Apply any of our included utility classes to our components to customize their appearance, like the navigation example below. There are hundreds of classes available—from <a href="docs/{{ .Site.Params.docs_version }}/utilities/position/">positioning</a> and <a href="docs/{{ .Site.Params.docs_version }}/utilities/sizing/">sizing</a> to <a href="docs/{{ .Site.Params.docs_version }}/utilities/colors/">colors</a> and <a href="docs/{{ .Site.Params.docs_version }}/utilities/shadows/">effects</a>. Mix them with CSS variable overrides for even more control.</p>
       <div class="p-4 border rounded-3 mb-4">
         <ul class="nav nav-pills mb-4" id="pillNav" role="tablist">
           <li class="nav-item" role="presentation">
@@ -53,7 +53,7 @@ <h3 class="fw-semibold">Quickly customize components</h3>
 </ul>
 `) "html" "" }}
       <p class="d-flex justify-content-start mb-md-0">
-        <a href="/docs/{{ .Site.Params.docs_version }}/examples#snippets" class="icon-link icon-link-hover fw-semibold">
+        <a href="docs/{{ .Site.Params.docs_version }}/examples#snippets" class="icon-link icon-link-hover fw-semibold">
           Explore customized components
           <svg class="bi"><use xlink:href="#arrow-right"></use></svg>
         </a>
@@ -78,7 +78,7 @@ <h3 class="fw-semibold">Create and extend utilities</h3>
 `) "scss" "" }}
 
       <p class="d-flex justify-content-start mb-md-0">
-        <a href="/docs/{{ .Site.Params.docs_version }}/utilities/api/" class="icon-link icon-link-hover fw-semibold mb-3">
+        <a href="docs/{{ .Site.Params.docs_version }}/utilities/api/" class="icon-link icon-link-hover fw-semibold mb-3">
           Explore the utility API
           <svg class="bi"><use xlink:href="#arrow-right"></use></svg>
         </a>
diff --git a/site/layouts/partials/home/css-variables.html b/site/layouts/partials/home/css-variables.html
index 96a48287b7d0..86e3872a4ed6 100644
--- a/site/layouts/partials/home/css-variables.html
+++ b/site/layouts/partials/home/css-variables.html
@@ -8,7 +8,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Build and extend in real-time with
       Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a <code>:root</code> level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified.
     </p>
     <p class="d-flex align-items-start flex-column lead fw-normal mb-0">
-      <a href="/docs/{{ .Site.Params.docs_version }}/customize/css-variables/" class="icon-link icon-link-hover fw-semibold mb-3">
+      <a href="docs/{{ .Site.Params.docs_version }}/customize/css-variables/" class="icon-link icon-link-hover fw-semibold mb-3">
         Learn more about CSS variables
         <svg class="bi"><use xlink:href="#arrow-right"></use></svg>
       </a>
@@ -17,7 +17,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Build and extend in real-time with
   <div class="row gx-md-5">
     <div class="col-lg-6 mb-3">
       <h3 class="fw-semibold">Using CSS variables</h3>
-      <p>Use any of our <a href="/docs/{{ .Site.Params.docs_version }}/customize/css-variables/#root-variables">global <code>:root</code> variables</a> to write new styles. CSS variables use the <code>var(--bs-variableName)</code> syntax and can be inherited by children elements.</p>
+      <p>Use any of our <a href="docs/{{ .Site.Params.docs_version }}/customize/css-variables/#root-variables">global <code>:root</code> variables</a> to write new styles. CSS variables use the <code>var(--bs-variableName)</code> syntax and can be inherited by children elements.</p>
       {{ highlight (printf `.component {
   color: var(--bs-gray-800);
   background-color: var(--bs-gray-100);
diff --git a/site/layouts/partials/home/customize.html b/site/layouts/partials/home/customize.html
index a6d04fed4f93..0740f6c02697 100644
--- a/site/layouts/partials/home/customize.html
+++ b/site/layouts/partials/home/customize.html
@@ -7,7 +7,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Customize everything with&nbsp;Sass
     Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.
   </p>
   <p class="d-flex justify-content-start lead fw-normal">
-    <a href="/docs/{{ .Site.Params.docs_version }}/customize/overview/" class="icon-link icon-link-hover fw-semibold">
+    <a href="docs/{{ .Site.Params.docs_version }}/customize/overview/" class="icon-link icon-link-hover fw-semibold">
       Learn more about customizing
       <svg class="bi"><use xlink:href="#arrow-right"></use></svg>
     </a>
@@ -26,7 +26,7 @@ <h3>Include all of Bootstrap’s Sass</h3>
 // Then import Bootstrap
 @import "../node_modules/bootstrap/scss/bootstrap";
 `) "scss" "" }}
-    <p>Learn more about our <a href="/docs/{{ .Site.Params.docs_version }}/customize/options/">global Sass options</a>.</p>
+    <p>Learn more about our <a href="docs/{{ .Site.Params.docs_version }}/customize/options/">global Sass options</a>.</p>
   </div>
   <div class="col-lg-6">
     <h3>Include what you need</h3>
@@ -54,6 +54,6 @@ <h3>Include what you need</h3>
 @import "../node_modules/bootstrap/scss/helpers";
 @import "../node_modules/bootstrap/scss/utilities/api";
 `) "scss" "" }}
-    <p>Learn more about <a href="/docs/{{ .Site.Params.docs_version }}/customize/sass/">using Bootstrap with Sass</a>.</p>
+    <p>Learn more about <a href="docs/{{ .Site.Params.docs_version }}/customize/sass/">using Bootstrap with Sass</a>.</p>
   </div>
 </section>
diff --git a/site/layouts/partials/home/get-started.html b/site/layouts/partials/home/get-started.html
index ad645111ee62..a09047e42f59 100644
--- a/site/layouts/partials/home/get-started.html
+++ b/site/layouts/partials/home/get-started.html
@@ -7,7 +7,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Get started any way you&nbsp;want</
     Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code.
   </p>
   <p class="d-flex justify-content-md-start justify-content-md-center lead fw-normal">
-    <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="icon-link icon-link-hover fw-semibold ps-md-4">
+    <a href="docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="icon-link icon-link-hover fw-semibold ps-md-4">
       Read installation docs
       <svg class="bi"><use xlink:href="#arrow-right"></use></svg>
     </a>
@@ -24,14 +24,14 @@ <h3 class="fw-semibold">Install via package manager</h3>
     {{ highlight (printf ("npm install bootstrap@%s") .Site.Params.current_version) "sh" "" }}
     {{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }}
     <p>
-      <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Read our installation docs</a> for more info and additional package managers.
+      <a href="docs/{{ .Site.Params.docs_version }}/getting-started/download/">Read our installation docs</a> for more info and additional package managers.
     </p>
   </div>
   <div class="col-lg-6 py-lg-4 ps-lg-5 border-lg-start">
     <svg class="bi mb-2 fs-2 text-body-secondary"><use xlink:href="#globe2"></use></svg>
     <h3 class="fw-semibold">Include via CDN</h3>
     <p class="pe-lg-5">
-      When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.jsdelivr.com/package/npm/bootstrap">jsDelivr</a>. See it in action with our simple <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#quick-start">quick start</a>, or <a href="/docs/{{ .Site.Params.docs_version }}/examples/">browse the examples</a> to jumpstart your next project. You can also choose to include Popper and our JS <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#separate">separately</a>.
+      When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.jsdelivr.com/package/npm/bootstrap">jsDelivr</a>. See it in action with our simple <a href="docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#quick-start">quick start</a>, or <a href="docs/{{ .Site.Params.docs_version }}/examples/">browse the examples</a> to jumpstart your next project. You can also choose to include Popper and our JS <a href="docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#separate">separately</a>.
     </p>
     {{ highlight (printf (`<link href="%s" rel="stylesheet" integrity=%q crossorigin="anonymous">`) .Site.Params.cdn.css (.Site.Params.cdn.css_hash | safeHTMLAttr)) "html" "" }}
     {{ highlight (printf (`<script src="%s" integrity=%q crossorigin="anonymous"></script>`) .Site.Params.cdn.js_bundle (.Site.Params.cdn.js_bundle_hash | safeHTMLAttr)) "html" "" }}
@@ -41,16 +41,16 @@ <h3 class="fw-semibold">Include via CDN</h3>
     <h4 class="fw-semibold">Read our getting started guides</h4>
     <p>Get a jump on including Bootstrap's source files in a new project with our official guides.</p>
     <div class="d-flex flex-wrap align-items-center justify-content-center gap-4 mt-4">
-      <a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/webpack/">
-        <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/webpack.svg" alt="" width="72" height="72" loading="lazy">
+      <a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="docs/{{ .Site.Params.docs_version }}/getting-started/webpack/">
+        <img class="d-block mb-2" src="docs/{{ .Site.Params.docs_version }}/assets/img/webpack.svg" alt="" width="72" height="72" loading="lazy">
         <span class="text-body-secondary">Webpack</span>
       </a>
-      <a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/parcel/">
-        <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/parcel.png" alt="" width="72" height="72" loading="lazy">
+      <a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="docs/{{ .Site.Params.docs_version }}/getting-started/parcel/">
+        <img class="d-block mb-2" src="docs/{{ .Site.Params.docs_version }}/assets/img/parcel.png" alt="" width="72" height="72" loading="lazy">
         <span class="text-body-secondary">Parcel</span>
       </a>
-      <a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/vite/">
-        <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/vite.svg" alt="" width="72" height="72" loading="lazy">
+      <a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="docs/{{ .Site.Params.docs_version }}/getting-started/vite/">
+        <img class="d-block mb-2" src="docs/{{ .Site.Params.docs_version }}/assets/img/vite.svg" alt="" width="72" height="72" loading="lazy">
         <span class="text-body-secondary">Vite</span>
       </a>
     </div>
diff --git a/site/layouts/partials/home/icons.html b/site/layouts/partials/home/icons.html
index 5cc7f141739b..eab4889008ae 100644
--- a/site/layouts/partials/home/icons.html
+++ b/site/layouts/partials/home/icons.html
@@ -15,9 +15,9 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Personalize it with Bootstrap&nbsp;
     </p>
   </div>
   <div class="col-lg-6">
-      <img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png,
+      <img class="img-fluid mt-3 mx-auto" srcset="docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png,
                                                   /docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons@2x.png 2x"
-                                          src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png"
+                                          src="docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png"
                                           alt="Bootstrap Icons" width="700" height="425" loading="lazy">
   </div>
 </section>
diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html
index 4916e6136b77..5be699ad023c 100644
--- a/site/layouts/partials/home/masthead.html
+++ b/site/layouts/partials/home/masthead.html
@@ -5,7 +5,7 @@
         <strong class="d-sm-inline-block p-2 me-2 mb-2 mb-lg-0 rounded-3 masthead-notice">New in v5.3</strong>
         <span class="text-body-secondary">Color mode support, expanded color palette, and more!</span>
       </a>
-      <img src="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png" width="200" height="165" alt="Bootstrap" class="d-none d-sm-block mx-auto mb-3">
+      <img src="docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png" width="200" height="165" alt="Bootstrap" class="d-none d-sm-block mx-auto mb-3">
       <h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with&nbsp;Bootstrap</h1>
       <p class="lead mb-4">
         Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
@@ -14,7 +14,7 @@ <h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with&nbsp;Bootstr
         <div class="d-inline-block v-align-middle fs-5">
           {{ highlight (printf ("npm i bootstrap@%s") .Site.Params.current_version) "sh" "" }}
         </div>
-        <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">
+        <a href="docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">
           <svg class="bi me-2" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
           Read the docs
         </a>
@@ -22,9 +22,9 @@ <h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with&nbsp;Bootstr
       <p class="text-body-secondary mb-0">
         Currently <strong>v{{ .Site.Params.current_version }}</strong>
         <span class="px-1">&middot;</span>
-        <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="link-secondary">Download</a>
+        <a href="docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="link-secondary">Download</a>
         <span class="px-1">&middot;</span>
-        <a href="/docs/versions/" class="link-secondary text-nowrap">All releases</a>
+        <a href="docs/versions/" class="link-secondary text-nowrap">All releases</a>
       </p>
       {{ partial "ads" . }}
     </div>
diff --git a/site/layouts/partials/home/plugins.html b/site/layouts/partials/home/plugins.html
index ab48d9bc6017..9d83ecc456dc 100644
--- a/site/layouts/partials/home/plugins.html
+++ b/site/layouts/partials/home/plugins.html
@@ -8,7 +8,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Powerful JavaScript plugins without
       Add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without jQuery. Bootstrap's JavaScript is HTML-first, meaning most plugins are added with <code>data</code> attributes in your HTML. Need more control? Include individual plugins programmatically.
     </p>
     <p class="d-flex justify-content-start lead fw-normal mb-md-0">
-      <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/" class="icon-link icon-link-hover fw-semibold">
+      <a href="docs/{{ .Site.Params.docs_version }}/getting-started/javascript/" class="icon-link icon-link-hover fw-semibold">
         Learn more about Bootstrap JavaScript
         <svg class="bi"><use xlink:href="#arrow-right"></use></svg>
       </a>
@@ -42,7 +42,7 @@ <h3 class="fw-semibold">Data attribute API</h3>
   </ul>
 </div>
 `) "html" "" }}
-      <p>Learn more about <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#using-bootstrap-as-a-module">our JavaScript as modules</a> and <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#programmatic-api">using the programmatic API</a>.</p>
+      <p>Learn more about <a href="docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#using-bootstrap-as-a-module">our JavaScript as modules</a> and <a href="docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#programmatic-api">using the programmatic API</a>.</p>
     </div>
     <div class="col-lg-6 mb-3">
       <h3 class="fw-semibold">Comprehensive set of plugins</h3>
@@ -50,7 +50,7 @@ <h3 class="fw-semibold">Comprehensive set of plugins</h3>
       <hr class="my-4">
       <div class="row g-3">
         {{- range $plugin := .Site.Data.plugins -}}
-          {{- $href := printf "/docs/%s/%s" $.Site.Params.docs_version $plugin.link }}
+          {{- $href := printf "docs/%s/%s" $.Site.Params.docs_version $plugin.link }}
           <div class="col-sm-6 mb-2">
             <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="{{ $href }}">
               <h4 class="mb-0 fs-5 fw-semibold">{{ $plugin.name }}</h4>
diff --git a/site/layouts/partials/home/themes.html b/site/layouts/partials/home/themes.html
index 3e286f267178..94e8c1a636b7 100644
--- a/site/layouts/partials/home/themes.html
+++ b/site/layouts/partials/home/themes.html
@@ -15,9 +15,9 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Make it yours with official Bootstr
     </p>
   </div>
   <div class="col-lg-6">
-      <img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png,
+      <img class="img-fluid mt-3 mx-auto" srcset="docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png,
                                                   /docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes@2x.png 2x"
-                                          src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png"
+                                          src="docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png"
                                           alt="Bootstrap Themes" width="700" height="500" loading="lazy">
   </div>
 </section>
diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html
index dc92d30e5ac9..beab6f689184 100644
--- a/site/layouts/partials/scripts.html
+++ b/site/layouts/partials/scripts.html
@@ -1,7 +1,7 @@
 {{ if eq hugo.Environment "production" -}}
-  <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }} crossorigin="anonymous"></script>
+  <script src="docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }} crossorigin="anonymous"></script>
 {{ else -}}
-  <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
+  <script src="docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
 {{- end }}
 
 <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
diff --git a/site/layouts/partials/social.html b/site/layouts/partials/social.html
index f4f556e5a82e..d2be51fde8bf 100644
--- a/site/layouts/partials/social.html
+++ b/site/layouts/partials/social.html
@@ -1,6 +1,6 @@
 {{- $pageTitle := .Title | markdownify -}}
 {{- $pageDescription := .Page.Params.description | default .Site.Params.description | markdownify -}}
-{{- $socialImagePath := printf "/docs/%s/assets" .Site.Params.docs_version -}}
+{{- $socialImagePath := printf "docs/%s/assets" .Site.Params.docs_version -}}
 
 {{- if .Page.Params.thumbnail -}}
   {{- $socialImagePath = path.Join $socialImagePath "img/" .Page.Params.thumbnail -}}
diff --git a/site/layouts/partials/stylesheet.html b/site/layouts/partials/stylesheet.html
index 7a5b077bcdc9..2573f72ffe6a 100644
--- a/site/layouts/partials/stylesheet.html
+++ b/site/layouts/partials/stylesheet.html
@@ -2,12 +2,12 @@
 
 {{ if eq hugo.Environment "production" -}}
 {{ if eq .Page.Params.direction "rtl" -}}
-<link href="/docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap.rtl.min.css" rel="stylesheet" {{ printf "integrity=%q" .Site.Params.cdn.css_rtl_hash | safeHTMLAttr }} crossorigin="anonymous">
+<link href="docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap.rtl.min.css" rel="stylesheet" {{ printf "integrity=%q" .Site.Params.cdn.css_rtl_hash | safeHTMLAttr }} crossorigin="anonymous">
 {{- else -}}
-<link href="/docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap.min.css" rel="stylesheet" {{ printf "integrity=%q" .Site.Params.cdn.css_hash | safeHTMLAttr }} crossorigin="anonymous">
+<link href="docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap.min.css" rel="stylesheet" {{ printf "integrity=%q" .Site.Params.cdn.css_hash | safeHTMLAttr }} crossorigin="anonymous">
 {{- end -}}
 {{- else -}}
-<link href="/docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap{{ if eq .Page.Params.direction "rtl" }}.rtl{{ end }}.css" rel="stylesheet">
+<link href="docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap{{ if eq .Page.Params.direction "rtl" }}.rtl{{ end }}.css" rel="stylesheet">
 {{- end }}
 
 {{- if (ne .Page.Layout "examples") }}
diff --git a/site/layouts/shortcodes/docsref.html b/site/layouts/shortcodes/docsref.html
index 2379de2b12e1..62ee3e11d864 100644
--- a/site/layouts/shortcodes/docsref.html
+++ b/site/layouts/shortcodes/docsref.html
@@ -1 +1 @@
-{{- relref . ((path.Join "docs" $.Site.Params.docs_version (.Get 0)) | relURL) -}}
+{{- relref . ((path.Join "../docs" $.Site.Params.docs_version (.Get 0)) | relURL) -}}