Update karma.conf.js

Co-authored-by: Akshat Rustagi <akshatr@lambdatest.com>

.github/workflows/browserstack.yml

@@ -18,7 +18,7 @@ jobs:
   browserstack:
     runs-on: ubuntu-latest
     if: github.repository == 'twbs/bootstrap'
-    timeout-minutes: 30
+    timeout-minutes: 15
 
     steps:
       - name: Clone repository

.github/workflows/cspell.yml

@@ -28,7 +28,7 @@ jobs:
           persist-credentials: false
 
       - name: Run cspell
-        uses: streetsidesoftware/cspell-action@v5
+        uses: streetsidesoftware/cspell-action@v6
         with:
           config: ".cspell.json"
           files: "**/*.md"

.github/workflows/lambdatest.yml

@@ -0,0 +1,47 @@
+name: LambdaTest
+
+on:
+  push:
+    branches:
+      - "**"
+      - "!dependabot/**"
+  workflow_dispatch:
+
+env:
+  FORCE_COLOR: 2
+  NODE: 20
+
+permissions:
+  contents: read
+
+jobs:
+  lambdatest:
+    runs-on: ubuntu-latest
+    if: github.repository == 'twbs/bootstrap'
+    timeout-minutes: 15
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v4
+        with:
+          persist-credentials: false
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "${{ env.NODE }}"
+          cache: npm
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Run dist
+        run: npm run dist
+
+      - name: Run LambdaTest tests
+        run: npm run js-test-lt-cloud
+        env:
+          LT_USERNAME: "${{ secrets.LT_USERNAME }}"
+          LT_ACCESS_KEY: "${{ secrets.LT_ACCESS_KEY }}"
+          LT_TUNNEL_NAME: "tunnel-${{ github.sha }}"
+          GITHUB_SHA: "${{ github.sha }}"

.gitignore

@@ -41,3 +41,4 @@ Thumbs.db
 /dist-sass/
 /js/coverage/
 /node_modules/
+/.lambdatest/

README.md

@@ -131,7 +131,7 @@ Within the download you'll find the following directories and files, logically g
   ```
 </details>
 
-We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/).
+We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://web.dev/articles/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/docs/v2/).
 
 
 ## Bugs and feature requests

js/src/dropdown.js

@@ -224,7 +224,7 @@ class Dropdown extends BaseComponent {
 
   _createPopper() {
     if (typeof Popper === 'undefined') {
-      throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)')
+      throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org/docs/v2/)')
     }
 
     let referenceElement = this._element

js/src/tooltip.js

@@ -105,7 +105,7 @@ const DefaultType = {
 class Tooltip extends BaseComponent {
   constructor(element, config) {
     if (typeof Popper === 'undefined') {
-      throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org)')
+      throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org/docs/v2/)')
     }
 
     super(element, config)

js/tests/browsers.js

@@ -3,75 +3,149 @@
 'use strict'
 
 const browsers = {
-  safariMac: {
-    base: 'BrowserStack',
-    os: 'OS X',
-    os_version: 'Catalina',
-    browser: 'Safari',
-    browser_version: 'latest'
+  browserStack: {
+    safariMac: {
+      base: 'BrowserStack',
+      os: 'OS X',
+      os_version: 'Catalina',
+      browser: 'Safari',
+      browser_version: 'latest'
+    },
+    chromeMac: {
+      base: 'BrowserStack',
+      os: 'OS X',
+      os_version: 'Catalina',
+      browser: 'Chrome',
+      browser_version: 'latest'
+    },
+    firefoxMac: {
+      base: 'BrowserStack',
+      os: 'OS X',
+      os_version: 'Catalina',
+      browser: 'Firefox',
+      browser_version: 'latest'
+    },
+    chromeWin10: {
+      base: 'BrowserStack',
+      os: 'Windows',
+      os_version: '10',
+      browser: 'Chrome',
+      browser_version: '60'
+    },
+    firefoxWin10: {
+      base: 'BrowserStack',
+      os: 'Windows',
+      os_version: '10',
+      browser: 'Firefox',
+      browser_version: '60'
+    },
+    chromeWin10Latest: {
+      base: 'BrowserStack',
+      os: 'Windows',
+      os_version: '10',
+      browser: 'Chrome',
+      browser_version: 'latest'
+    },
+    firefoxWin10Latest: {
+      base: 'BrowserStack',
+      os: 'Windows',
+      os_version: '10',
+      browser: 'Firefox',
+      browser_version: 'latest'
+    },
+    iphone7: {
+      base: 'BrowserStack',
+      os: 'ios',
+      os_version: '12.0',
+      device: 'iPhone 7',
+      real_mobile: true
+    },
+    iphone12: {
+      base: 'BrowserStack',
+      os: 'ios',
+      os_version: '14.0',
+      device: 'iPhone 12',
+      real_mobile: true
+    },
+    pixel3: {
+      base: 'BrowserStack',
+      os: 'android',
+      os_version: '9.0',
+      device: 'Google Pixel 3',
+      real_mobile: true
+    }
   },
-  chromeMac: {
-    base: 'BrowserStack',
-    os: 'OS X',
-    os_version: 'Catalina',
-    browser: 'Chrome',
-    browser_version: 'latest'
-  },
-  firefoxMac: {
-    base: 'BrowserStack',
-    os: 'OS X',
-    os_version: 'Catalina',
-    browser: 'Firefox',
-    browser_version: 'latest'
-  },
-  chromeWin10: {
-    base: 'BrowserStack',
-    os: 'Windows',
-    os_version: '10',
-    browser: 'Chrome',
-    browser_version: '60'
-  },
-  firefoxWin10: {
-    base: 'BrowserStack',
-    os: 'Windows',
-    os_version: '10',
-    browser: 'Firefox',
-    browser_version: '60'
-  },
-  chromeWin10Latest: {
-    base: 'BrowserStack',
-    os: 'Windows',
-    os_version: '10',
-    browser: 'Chrome',
-    browser_version: 'latest'
-  },
-  firefoxWin10Latest: {
-    base: 'BrowserStack',
-    os: 'Windows',
-    os_version: '10',
-    browser: 'Firefox',
-    browser_version: 'latest'
-  },
-  iphone7: {
-    base: 'BrowserStack',
-    os: 'ios',
-    os_version: '12.0',
-    device: 'iPhone 7',
-    real_mobile: true
-  },
-  iphone12: {
-    base: 'BrowserStack',
-    os: 'ios',
-    os_version: '14.0',
-    device: 'iPhone 12',
-    real_mobile: true
-  },
-  pixel2: {
-    base: 'BrowserStack',
-    os: 'android',
-    os_version: '8.0',
-    device: 'Google Pixel 2',
-    real_mobile: true
+  lambdaTest: {
+    safariMac: {
+      browserName: 'Safari',
+      browserVersion: 'latest',
+      'LT:Options': {
+        platformName: 'MacOS Monterey'
+      }
+    },
+    chromeMac: {
+      browserName: 'Chrome',
+      browserVersion: 'latest',
+      'LT:Options': {
+        platformName: 'MacOS Monterey'
+      }
+    },
+    firefoxMac: {
+      browserName: 'Firefox',
+      browserVersion: 'latest',
+      'LT:Options': {
+        platformName: 'MacOS Monterey'
+      }
+    },
+    chromeWin10: {
+      browserName: 'Chrome',
+      browserVersion: '60',
+      'LT:Options': {
+        platformName: 'Windows 10'
+      }
+    },
+    firefoxWin10: {
+      browserName: 'Firefox',
+      browserVersion: '60',
+      'LT:Options': {
+        platformName: 'Windows 10'
+      }
+    },
+    chromeWin10Latest: {
+      browserName: 'Chrome',
+      browserVersion: 'latest',
+      'LT:Options': {
+        platformName: 'Windows 10'
+      }
+    },
+    firefoxWin10Latest: {
+      browserName: 'Firefox',
+      browserVersion: 'latest',
+      'LT:Options': {
+        platformName: 'Windows 10'
+      }
+    },
+    ios15: {
+      platformName: 'ios',
+      platformVersion: '15',
+      browserName: 'Safari',
+      deviceName: 'iPhone.*',
+      isRealMobile: true
+    },
+    ios16: {
+      platformName: 'ios',
+      platformVersion: '16',
+      browserName: 'Safari',
+      deviceName: 'iPhone.*',
+      isRealMobile: true
+    },
+    android12: {
+      platformName: 'android',
+      platformVersion: '12',
+      browserName: 'Chrome',
+      deviceName: 'Pixel.*',
+      isRealMobile: true
+    }
   }
 }
 

js/tests/karma.conf.js

@@ -9,9 +9,21 @@ const replace = require('@rollup/plugin-replace')
 const { browsers } = require('./browsers.js')
 
 const ENV = process.env
-const BROWSERSTACK = Boolean(ENV.BROWSERSTACK)
 const DEBUG = Boolean(ENV.DEBUG)
 const JQUERY_TEST = Boolean(ENV.JQUERY)
+const BROWSERSTACK = Boolean(ENV.BROWSERSTACK)
+const LAMBDATEST = Boolean(ENV.LAMBDATEST)
+
+const webDriverConfig = {
+  desktop: {
+    hostname: 'hub.lambdatest.com',
+    port: 80
+  },
+  mobile: {
+    hostname: 'mobile-hub.lambdatest.com',
+    port: 80
+  }
+}
 
 const frameworks = [
   'jasmine'
@@ -54,15 +66,23 @@ const config = {
   colors: true,
   autoWatch: false,
   singleRun: true,
-  concurrency: Number.POSITIVE_INFINITY,
+  captureTimeout: 180_000,
+  browserDisconnectTolerance: 3,
+  browserDisconnectTimeout: 180_000,
+  browserNoActivityTimeout: 400_000,
+  retryLimit: 2,
+  concurrency: 5,
   client: {
-    clearContext: false
+    clearContext: false,
+    jasmine: {
+      timeoutInterval: 120_000
+    }
   },
   files: [
     'node_modules/hammer-simulator/index.js',
     {
       pattern: 'js/tests/unit/**/!(jquery).spec.js',
-      watched: !BROWSERSTACK
+      watched: !BROWSERSTACK && !LAMBDATEST
     }
   ],
   preprocessors: {
@@ -98,18 +118,51 @@ const config = {
   }
 }
 
-if (BROWSERSTACK) {
+if (LAMBDATEST) {
+  config.hostname = 'localhost.lambdatest.com'
+  config.captureTimeout = 600_000
+
+  for (const key of Object.keys(browsers.lambdaTest)) {
+    browsers.lambdaTest[key].base = 'WebDriver'
+    browsers.lambdaTest[key].build = `bootstrap-${ENV.GITHUB_SHA ? `${ENV.GITHUB_SHA.slice(0, 7)}-` : ''}${new Date().toISOString()}`
+    browsers.lambdaTest[key].project = 'Bootstrap'
+
+    if (browsers.lambdaTest[key].isRealMobile) {
+      browsers.lambdaTest[key].config = webDriverConfig.mobile
+      browsers.lambdaTest[key].user = ENV.LT_USERNAME
+      browsers.lambdaTest[key].accessKey = ENV.LT_ACCESS_KEY
+      browsers.lambdaTest[key].tunnel = true
+      browsers.lambdaTest[key].console = true
+      browsers.lambdaTest[key].network = true
+      browsers.lambdaTest[key].tunnelName = ENV.LT_TUNNEL_NAME || 'jasmine'
+      browsers.lambdaTest[key].pseudoActivityInterval = 5000 // 5000 ms heartbeat
+    } else {
+      browsers.lambdaTest[key].config = webDriverConfig.desktop
+      browsers.lambdaTest[key]['LT:Options'].username = ENV.LT_USERNAME
+      browsers.lambdaTest[key]['LT:Options'].accessKey = ENV.LT_ACCESS_KEY
+      browsers.lambdaTest[key]['LT:Options'].tunnel = true
+      browsers.lambdaTest[key]['LT:Options'].console = true
+      browsers.lambdaTest[key]['LT:Options'].network = true
+      browsers.lambdaTest[key]['LT:Options'].tunnelName = ENV.LT_TUNNEL_NAME || 'jasmine'
+      browsers.lambdaTest[key]['LT:Options'].pseudoActivityInterval = 5000 // 5000 ms heartbeat
+    }
+  }
+
+  plugins.push('karma-webdriver-launcher', 'karma-jasmine-html-reporter')
+  config.customLaunchers = browsers.lambdaTest
+  config.browsers = Object.keys(browsers.lambdaTest)
+  reporters.push('kjhtml')
+} else if (BROWSERSTACK) {
   config.hostname = ip.address()
   config.browserStack = {
     username: ENV.BROWSER_STACK_USERNAME,
     accessKey: ENV.BROWSER_STACK_ACCESS_KEY,
     build: `bootstrap-${ENV.GITHUB_SHA ? `${ENV.GITHUB_SHA.slice(0, 7)}-` : ''}${new Date().toISOString()}`,
-    project: 'Bootstrap',
-    retryLimit: 2
+    project: 'Bootstrap'
   }
   plugins.push('karma-browserstack-launcher', 'karma-jasmine-html-reporter')
-  config.customLaunchers = browsers
-  config.browsers = Object.keys(browsers)
+  config.customLaunchers = browsers.browserStack
+  config.browsers = Object.keys(browsers.browserStack)
   reporters.push('BrowserStack', 'kjhtml')
 } else if (JQUERY_TEST) {
   frameworks.push('detectBrowsers')

js/tests/lt-local.js

@@ -0,0 +1,28 @@
+/* eslint-env node */
+/* eslint-disable no-console */
+
+'use strict'
+
+const process = require('node:process')
+const lambdaTunnel = require('@lambdatest/node-tunnel')
+
+if (process.env.LAMBDATEST !== 'true') {
+  console.log('Skipping lt-local script!')
+  return
+}
+
+const tunnelInstance = new lambdaTunnel() // eslint-disable-line new-cap
+const tunnelArguments = {
+  user: process.env.LT_USERNAME,
+  key: process.env.LT_ACCESS_KEY,
+  tunnelName: process.env.LT_TUNNEL_NAME || 'jasmine',
+  logFile: 'local.log'
+};
+
+// eslint-disable-next-line unicorn/prefer-top-level-await
+(async () => {
+  await tunnelInstance.start(tunnelArguments)
+  await new Promise(res => {
+    setTimeout(res, 5000)
+  })
+})()

package.json

@@ -72,6 +72,9 @@
     "js-test-integration-bundle": "rollup --config js/tests/integration/rollup.bundle.js",
     "js-test-integration-modularity": "rollup --config js/tests/integration/rollup.bundle-modularity.js",
     "js-test-cloud": "cross-env BROWSERSTACK=true npm run js-test-karma",
+    "js-test-lt-cloud": "cross-env LAMBDATEST=true npm-run-all --parallel --race js-test-lt-local js-test-karma",
+    "js-test-lt-local": "npm-run-all js-test-lt-tunnel sleep",
+    "js-test-lt-tunnel": "node js/tests/lt-local",
     "js-test-jquery": "cross-env JQUERY=true npm run js-test-karma",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint lockfile-lint",
     "docs": "npm-run-all docs-build docs-lint",
@@ -79,10 +82,10 @@
     "docs-compile": "npm run docs-build",
     "docs-vnu": "node build/vnu-jar.mjs",
     "docs-lint": "npm run docs-vnu",
-    "docs-serve": "hugo server --port 9001 --disableFastRender --printUnusedTemplates",
+    "docs-serve": "hugo server --port 9001 --disableFastRender --noHTTPCache --renderToMemory --printPathWarnings --printUnusedTemplates",
     "docs-serve-only": "npx sirv-cli _site --port 9001",
     "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
-    "update-deps": "ncu -u -x globby,jasmine,karma-browserstack-launcher,karma-rollup-preprocessor && echo Manually update site/assets/js/vendor",
+    "update-deps": "ncu -u -x globby,jasmine,karma-rollup-preprocessor && echo Manually update site/assets/js/vendor",
     "release": "npm-run-all dist release-sri docs-build release-zip*",
     "release-sri": "node build/generate-sri.mjs",
     "release-version": "node build/change-version.mjs",
@@ -97,25 +100,27 @@
     "watch-css-docs": "nodemon --watch site/assets/scss/ --ext scss --exec \"npm run css-lint\"",
     "watch-css-test": "nodemon --watch scss/ --ext scss,js --exec \"npm run css-test\"",
     "watch-js-main": "nodemon --watch js/src/ --ext js --exec \"npm-run-all js-lint js-compile\"",
-    "watch-js-docs": "nodemon --watch site/assets/js/ --ext js --exec \"npm run js-lint\""
+    "watch-js-docs": "nodemon --watch site/assets/js/ --ext js --exec \"npm run js-lint\"",
+    "sleep": "sleep 5"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.9",
-    "@babel/core": "^7.23.9",
-    "@babel/preset-env": "^7.23.9",
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@lambdatest/node-tunnel": "^4.0.7",
     "@popperjs/core": "^2.11.8",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
-    "autoprefixer": "^10.4.17",
+    "autoprefixer": "^10.4.18",
     "bundlewatch": "^0.3.3",
     "clean-css-cli": "^5.6.3",
     "cross-env": "^7.0.3",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-xo": "^0.44.0",
     "eslint-plugin-html": "^8.0.0",
     "eslint-plugin-import": "^2.29.1",
@@ -124,29 +129,30 @@
     "find-unused-sass-variables": "^5.0.0",
     "globby": "^11.1.0",
     "hammer-simulator": "0.0.1",
-    "hugo-bin": "^0.119.0",
+    "hugo-bin": "^0.120.7",
     "ip": "^2.0.1",
     "jasmine": "^5.1.0",
     "jquery": "^3.7.1",
-    "karma": "^6.4.2",
-    "karma-browserstack-launcher": "1.4.0",
+    "karma": "^6.4.3",
+    "karma-browserstack-launcher": "^1.6.0",
     "karma-chrome-launcher": "^3.2.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-detect-browsers": "^2.3.3",
-    "karma-firefox-launcher": "^2.1.2",
+    "karma-firefox-launcher": "^2.1.3",
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "karma-rollup-preprocessor": "7.0.7",
-    "lockfile-lint": "^4.13.1",
-    "nodemon": "^3.0.3",
+    "karma-webdriver-launcher": "^1.0.8",
+    "lockfile-lint": "^4.13.2",
+    "nodemon": "^3.1.0",
     "npm-run-all2": "^6.1.2",
     "postcss": "^8.4.35",
     "postcss-cli": "^11.0.0",
     "rollup": "^4.12.0",
     "rollup-plugin-istanbul": "^5.0.0",
     "rtlcss": "^4.1.1",
-    "sass": "^1.71.0",
-    "sass-true": "^7.0.1",
+    "sass": "^1.71.1",
+    "sass-true": "^8.0.0",
     "shelljs": "^0.8.5",
     "stylelint": "^16.2.1",
     "stylelint-config-twbs-bootstrap": "^14.0.0",

scss/_accordion.scss

@@ -134,17 +134,12 @@
     &:last-child { border-bottom: 0; }
 
     // stylelint-disable selector-max-class
-    > .accordion-header .accordion-button {
-      &,
-      &.collapsed {
-        @include border-radius(0);
-      }
-    }
-    // stylelint-enable selector-max-class
-
-    > .accordion-collapse {
+    > .accordion-collapse,
+    > .accordion-header .accordion-button,
+    > .accordion-header .accordion-button.collapsed {
       @include border-radius(0);
     }
+    // stylelint-enable selector-max-class
   }
 }
 

site/content/docs/5.3/about/overview.md

@@ -16,9 +16,9 @@ Bootstrap is maintained by a [small team of developers](https://github.com/orgs/
 
 Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.
 
-Bootstrap was created at Twitter in mid-2010 by [@mdo](https://twitter.com/mdo) and [@fat](https://twitter.com/fat). Prior to being an open-sourced framework, Bootstrap was known as _Twitter Blueprint_. A few months into development, Twitter held its [first Hack Week](https://blog.twitter.com/engineering/en_us/a/2010/hack-week.html) and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.
+Bootstrap was created at Twitter in mid-2010 by [@mdo](https://twitter.com/mdo) and [@fat](https://twitter.com/fat). Prior to being an open-sourced framework, Bootstrap was known as _Twitter Blueprint_. A few months into development, Twitter held its [first Hack Week](https://blog.twitter.com/engineering/en_us/a/2010/hack-week) and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.
 
-Originally [released](https://blog.twitter.com/developer/en_us/a/2011/bootstrap-twitter.html) on <time datetime="2011-08-19 11:25">Friday, August 19, 2011</time>, we've since had over [twenty releases]({{< param repo >}}/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.
+Originally [released](https://blog.twitter.com/developer/en_us/a/2011/bootstrap-twitter) on <time datetime="2011-08-19 11:25">Friday, August 19, 2011</time>, we've since had over [twenty releases]({{< param repo >}}/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.
 
 With Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS's flexbox. Our intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers.
 

site/content/docs/5.3/components/breadcrumb.md

@@ -46,7 +46,7 @@ Dividers are automatically added in CSS through [`::before`](https://developer.m
 </nav>
 {{< /example >}}
 
-When modifying via Sass, the [quote](https://sass-lang.com/documentation/modules/string#quote) function is required to generate the quotes around a string. For example, using `>` as the divider, you can use this:
+When modifying via Sass, the [quote](https://sass-lang.com/documentation/modules/string/#quote) function is required to generate the quotes around a string. For example, using `>` as the divider, you can use this:
 
 ```scss
 $breadcrumb-divider: quote(">");

site/content/docs/5.3/components/dropdowns.md

@@ -10,7 +10,7 @@ toc: true
 
 Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/).
 
-Dropdowns are built on a third party library, [Popper](https://popper.js.org/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{< param "cdn.popper" >}}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper. Popper isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
+Dropdowns are built on a third party library, [Popper](https://popper.js.org/docs/v2/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{< param "cdn.popper" >}}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper. Popper isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
 
 ## Accessibility
 

site/content/docs/5.3/components/placeholders.md

@@ -4,7 +4,8 @@ title: Placeholders
 description: Use loading placeholders for your components or pages to indicate something may still be loading.
 group: components
 toc: true
-added: "5.1"
+added:
+  version: "5.1"
 ---
 
 ## About

site/content/docs/5.3/components/popovers.md

@@ -10,7 +10,7 @@ toc: true
 
 Things to know when using the popover plugin:
 
-- Popovers rely on the third party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper.
+- Popovers rely on the third party library [Popper](https://popper.js.org/docs/v2/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper.
 - Popovers require the [popover plugin]({{< docsref "/components/popovers" >}}) as a dependency.
 - Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
 - Zero-length `title` and `content` values will never show a popover.
@@ -186,7 +186,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
 | `allowList` | object | [Default value]({{< docsref "/getting-started/javascript#sanitizer" >}}) | Object which contains allowed attributes and tags. |
 | `animation` | boolean | `true` | Apply a CSS fade transition to the popover. |
 | `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the popover (applies only to Popper's preventOverflow modifier). By default, it's `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |
-| `container` | string, element, false | `false` | Appends the popover to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize. |
+| `container` | string, element, false | `false` | Appends the popover to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element -&nbsp;which will prevent the popover from floating away from the triggering element during a window resize. |
 | `content` | string, element, function | `''` | The popover's text content. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
 | `customClass` | string, function | `''` | Add classes to the popover when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. |
 | `delay` | number, object | `0` | Delay showing and hiding the popover (ms)—doesn't apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. |

site/content/docs/5.3/components/tooltips.md

@@ -10,7 +10,7 @@ toc: true
 
 Things to know when using the tooltip plugin:
 
-- Tooltips rely on the third party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper.
+- Tooltips rely on the third party library [Popper](https://popper.js.org/docs/v2/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper.
 - Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
 - Tooltips with zero-length titles are never displayed.
 - Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
@@ -200,7 +200,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
 | `allowList` | object | [Default value]({{< docsref "/getting-started/javascript#sanitizer" >}}) | Object which contains allowed attributes and tags. |
 | `animation` | boolean | `true` | Apply a CSS fade transition to the tooltip. |
 | `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the tooltip (applies only to Popper's preventOverflow modifier). By default, it's `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |
-| `container` | string, element, false | `false` | Appends the tooltip to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize. |
+| `container` | string, element, false | `false` | Appends the tooltip to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element -&nbsp;which will prevent the tooltip from floating away from the triggering element during a window resize. |
 | `customClass` | string, function | `''` | Add classes to the tooltip when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. |
 | `delay` | number, object | `0` | Delay showing and hiding the tooltip (ms)—doesn't apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. |
 | `fallbackPlacements` | array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). |

site/content/docs/5.3/customize/color-modes.md

@@ -4,7 +4,8 @@ title: Color modes
 description: Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
 group: customize
 toc: true
-added: "5.3"
+added:
+  version: "5.3"
 ---
 
 {{< callout >}}

site/content/docs/5.3/customize/optimize.md

@@ -74,7 +74,7 @@ Whenever possible, be sure to compress all the code you serve to your visitors.
 
 While minifying and using compression might seem like enough, making your files non-blocking ones is also a big step in making your site well-optimized and fast enough.
 
-If you are using a [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) plugin in Google Chrome, you may have stumbled over FCP. [The First Contentful Paint](https://web.dev/fcp/) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen.
+If you are using a [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) plugin in Google Chrome, you may have stumbled over FCP. [The First Contentful Paint](https://web.dev/articles/fcp) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen.
 
 You can improve FCP by deferring non-critical JavaScript or CSS. What does that mean? Simply, JavaScript or stylesheets that don't need to be present on the first paint of your page should be marked with `async` or `defer` attributes.
 
@@ -82,8 +82,8 @@ This ensures that the less important resources are loaded later and not blocking
 
 If you want to learn more about this, there are already a lot of great articles about it:
 
-- <https://web.dev/render-blocking-resources/>
-- <https://web.dev/defer-non-critical-css/>
+- <https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/>
+- <https://web.dev/articles/defer-non-critical-css>
 
 ## Always use HTTPS
 

site/content/docs/5.3/customize/sass.md

@@ -101,7 +101,7 @@ npm install -g sass
 sass --watch ./scss/custom.scss ./css/custom.css
 ```
 
-Learn more about your options at [sass-lang.com/install](https://sass-lang.com/install) and [compiling with VS Code](https://code.visualstudio.com/docs/languages/css#_transpiling-sass-and-less-into-css).
+Learn more about your options at [sass-lang.com/install](https://sass-lang.com/install/) and [compiling with VS Code](https://code.visualstudio.com/docs/languages/css#_transpiling-sass-and-less-into-css).
 
 {{< callout info >}}
 **Using Bootstrap with another build tool?** Consider reading our guides for compiling with [Webpack]({{< docsref "/getting-started/webpack" >}}), [Parcel]({{< docsref "/getting-started/parcel" >}}), or [Vite]({{< docsref "/getting-started/vite" >}}). We also have production-ready demos in [our examples repository on GitHub](https://github.com/twbs/examples).

site/content/docs/5.3/examples/dashboard-rtl/index.html

@@ -3,7 +3,6 @@ layout: examples
 title: قالب لوحة القيادة
 direction: rtl
 extra_css:
-  - "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css"
   - "../dashboard/dashboard.rtl.css"
 extra_js:
   - src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js"

site/content/docs/5.3/examples/dashboard/index.html

@@ -2,7 +2,6 @@
 layout: examples
 title: Dashboard Template
 extra_css:
-  - "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css"
   - "dashboard.css"
 extra_js:
   - src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js"

site/content/docs/5.3/getting-started/browsers-devices.md

@@ -56,7 +56,7 @@ Internet Explorer is not supported. **If you require Internet Explorer support,
 
 ### Overflow and scrolling
 
-Support for `overflow: hidden;` on the `<body>` element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the `<body>` content will begin to scroll. See [Chrome bug #175502](https://bugs.chromium.org/p/chromium/issues/detail?id=175502) (fixed in Chrome v40) and [WebKit bug #153852](https://bugs.webkit.org/show_bug.cgi?id=153852).
+Support for `overflow: hidden;` on the `<body>` element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the `<body>` content will begin to scroll. See [Chrome bug #175502](https://issues.chromium.org/issues/40301599) (fixed in Chrome v40) and [WebKit bug #153852](https://bugs.webkit.org/show_bug.cgi?id=153852).
 
 ### iOS text fields and scrolling
 

site/content/docs/5.3/getting-started/contents.md

@@ -62,7 +62,7 @@ bootstrap/
     └── bootstrap.min.js.map
 ```
 
-This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/).
+This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://web.dev/articles/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/docs/v2/).
 
 ### CSS files
 

site/content/docs/5.3/getting-started/contribute.md

@@ -5,6 +5,9 @@ description: Help develop Bootstrap with our documentation build scripts and tes
 group: getting-started
 toc: true
 aliases: "/docs/5.3/getting-started/build-tools/"
+added:
+  show_badge: false
+  version: "5.1"
 ---
 
 ## Tooling setup
@@ -38,7 +41,7 @@ Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/packag
 
 ## Sass
 
-Bootstrap uses [Dart Sass](https://sass-lang.com/dart-sass) for compiling our Sass source files into CSS files (included in our build process), and we recommend you do the same if you're compiling Sass using your own asset pipeline. We previously used Node Sass for Bootstrap v4, but LibSass and packages built on top of it, including Node Sass, are now [deprecated](https://sass-lang.com/blog/libsass-is-deprecated).
+Bootstrap uses [Dart Sass](https://sass-lang.com/dart-sass/) for compiling our Sass source files into CSS files (included in our build process), and we recommend you do the same if you're compiling Sass using your own asset pipeline. We previously used Node Sass for Bootstrap v4, but LibSass and packages built on top of it, including Node Sass, are now [deprecated](https://sass-lang.com/blog/libsass-is-deprecated/).
 
 Dart Sass uses a rounding precision of 10 and for efficiency reasons does not allow adjustment of this value. We don't lower this precision during further processing of our generated CSS, such as during minification, but if you chose to do so we recommend maintaining a precision of at least 6 to prevent issues with browser rounding.
 

site/content/docs/5.3/getting-started/download.md

@@ -15,7 +15,7 @@ Download ready-to-use compiled code for **Bootstrap v{{< param current_version >
 
 This doesn't include documentation, source files, or any optional JavaScript dependencies like Popper.
 
-<a href="{{< param "download.dist" >}}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a>
+<a href="{{< param "download.dist" >}}" class="btn btn-bd-primary">Download</a>
 
 ## Source files
 
@@ -26,13 +26,13 @@ Compile Bootstrap with your own asset pipeline by downloading our source Sass, J
 
 Should you require our full set of [build tools]({{< docsref "/getting-started/contribute#tooling-setup" >}}), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes.
 
-<a href="{{< param "download.source" >}}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
+<a href="{{< param "download.source" >}}" class="btn btn-bd-primary">Download source</a>
 
 ## Examples
 
 If you want to download and examine our [examples]({{< docsref "/examples" >}}), you can grab the already built examples:
 
-<a href="{{< param "download.dist_examples" >}}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Examples');">Download Examples</a>
+<a href="{{< param "download.dist_examples" >}}" class="btn btn-bd-primary">Download Examples</a>
 
 ## CDN via jsDelivr
 
@@ -102,7 +102,7 @@ yarn add bootstrap@{{< param "current_version" >}}
 
 ### RubyGems
 
-Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/gemfile.html):
+Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/guides/gemfile.html):
 
 ```ruby
 gem 'bootstrap', '~> {{< param current_ruby_version >}}'
@@ -126,7 +126,7 @@ composer require twbs/bootstrap:{{< param current_version >}}
 
 ### NuGet
 
-If you develop in .NET Framework, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org/). Newer projects should use [libman](https://docs.microsoft.com/en-us/aspnet/core/client-side/libman/) or another method as NuGet is designed for compiled code, not frontend assets.
+If you develop in .NET Framework, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org/). Newer projects should use [libman](https://learn.microsoft.com/en-us/aspnet/core/client-side/libman/) or another method as NuGet is designed for compiled code, not frontend assets.
 
 ```powershell
 Install-Package bootstrap

site/content/docs/5.3/getting-started/introduction.md

@@ -50,7 +50,7 @@ Get started by including Bootstrap's production-ready CSS and JavaScript via CDN
    </html>
    ```
 
-   You can also include [Popper](https://popper.js.org/) and our JS separately. If you don't plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Popper.
+   You can also include [Popper](https://popper.js.org/docs/v2/) and our JS separately. If you don't plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Popper.
 
    ```html
    <script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
@@ -87,14 +87,14 @@ Curious which components explicitly require our JavaScript and Popper? If you're
 - Buttons for toggling states and checkbox/radio functionality
 - Carousel for all slide behaviors, controls, and indicators
 - Collapse for toggling visibility of content
-- Dropdowns for displaying and positioning (also requires [Popper](https://popper.js.org/))
+- Dropdowns for displaying and positioning (also requires [Popper](https://popper.js.org/docs/v2/))
 - Modals for displaying, positioning, and scroll behavior
 - Navbar for extending our Collapse and Offcanvas plugins to implement responsive behaviors
 - Navs with the Tab plugin for toggling content panes
 - Offcanvases for displaying, positioning, and scroll behavior
 - Scrollspy for scroll behavior and navigation updates
 - Toasts for displaying and dismissing
-- Tooltips and popovers for displaying and positioning (also requires [Popper](https://popper.js.org/))
+- Tooltips and popovers for displaying and positioning (also requires [Popper](https://popper.js.org/docs/v2/))
 
 ## Important globals
 
@@ -147,7 +147,7 @@ Stay up-to-date on the development of Bootstrap and reach out to the community w
 
 - Read and subscribe to [The Official Bootstrap Blog]({{< param blog >}}).
 - Ask questions and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions).
-- Discuss, ask questions, and more on [the community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://reddit.com/r/bootstrap).
+- Discuss, ask questions, and more on [the community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://www.reddit.com/r/bootstrap/).
 - Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel.
 - Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)).
 - Developers should use the keyword `bootstrap` on packages that modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/search?q=keywords:bootstrap) or similar delivery mechanisms for maximum discoverability.

site/content/docs/5.3/getting-started/javascript.md

@@ -95,7 +95,7 @@ To fix this, you can use an `importmap` to resolve the arbitrary module names to
 
 Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs.
 
-Our dropdowns, popovers, and tooltips also depend on [Popper](https://popper.js.org/).
+Our dropdowns, popovers, and tooltips also depend on [Popper](https://popper.js.org/docs/v2/).
 
 ## Data attributes
 

site/content/docs/5.3/getting-started/rtl.md

@@ -170,7 +170,7 @@ After running Sass then RTLCSS, each selector in your CSS files will be prepende
 
 ## The breadcrumb case
 
-The [breadcrumb separator]({{< docsref "/components/breadcrumb" >}}/#changing-the-separator) is the only case requiring its own brand-new variable— namely `$breadcrumb-divider-flipped` —defaulting to `$breadcrumb-divider`.
+The [breadcrumb separator]({{< docsref "/components/breadcrumb#dividers" >}}) is the only case requiring its own brand-new variable— namely `$breadcrumb-divider-flipped` —defaulting to `$breadcrumb-divider`.
 
 ## Additional resources
 

site/content/docs/5.3/getting-started/vite.md

@@ -5,6 +5,9 @@ description: The official guide for how to include and bundle Bootstrap's CSS an
 group: getting-started
 toc: true
 thumbnail: guides/bootstrap-vite@2x.png
+added:
+  show_badge: false
+  version: "5.2"
 ---
 
 <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="">

site/content/docs/5.3/helpers/color-background.md

@@ -4,7 +4,8 @@ title: Color and background
 description: Set a background color with contrasting foreground color.
 group: helpers
 toc: true
-added: "5.2"
+added:
+  version: "5.2"
 ---
 
 ## Overview

site/content/docs/5.3/helpers/focus-ring.md

@@ -4,7 +4,8 @@ title: Focus ring
 description: Utility classes that allows you to add and modify custom focus ring styles to elements and components.
 group: helpers
 toc: true
-added: "5.3"
+added:
+  version: "5.3"
 ---
 
 The `.focus-ring` helper removes the default `outline` on `:focus`, replacing it with a `box-shadow` that can be more broadly customized. The new shadow is made up of a series of CSS variables, inherited from the `:root` level, that can be modified for any element or component.

site/content/docs/5.3/helpers/icon-link.md

@@ -4,7 +4,8 @@ title: Icon link
 description: Quickly create stylized hyperlinks with Bootstrap Icons or other icons.
 group: helpers
 toc: true
-added: 5.3
+added:
+  version: "5.3"
 ---
 
 The icon link helper component modifies our default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default `gap` value. We stylize the underline with a custom offset and color. Icons are automatically sized to `1em` to best match their associated text's `font-size`.

site/content/docs/5.3/helpers/stacks.md

@@ -4,7 +4,8 @@ title: Stacks
 description: Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.
 group: helpers
 toc: true
-added: "5.1"
+added:
+  version: "5.1"
 ---
 
 Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source [Pylon project](https://almonk.github.io/pylon/).

site/content/docs/5.3/helpers/vertical-rule.md

@@ -4,7 +4,8 @@ title: Vertical rule
 description: Use the custom vertical rule helper to create vertical dividers like the `<hr>` element.
 group: helpers
 toc: true
-added: "5.1"
+added:
+  version: "5.1"
 ---
 
 ## How it works

site/content/docs/5.3/layout/breakpoints.md

@@ -41,7 +41,7 @@ For more information and examples on how to modify our Sass maps and variables,
 
 ## Media queries
 
-Since Bootstrap is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
+Since Bootstrap is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
 
 ### Min-width
 

site/content/docs/5.3/layout/css-grid.md

@@ -4,7 +4,8 @@ title: CSS Grid
 description: Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets.
 group: layout
 toc: true
-added: "5.1"
+added:
+  version: "5.1"
 ---
 
 Bootstrap's default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we're seeing in browsers like the new CSS Grid.

site/content/docs/5.3/utilities/api.md

@@ -7,7 +7,7 @@ aliases: "/docs/5.3/utilities/"
 toc: true
 ---
 
-Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you're unfamiliar with Sass maps, read up on the [official Sass docs](https://sass-lang.com/documentation/values/maps) to get started.
+Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you're unfamiliar with Sass maps, read up on the [official Sass docs](https://sass-lang.com/documentation/values/maps/) to get started.
 
 The `$utilities` map contains all our utilities and is later merged with your custom `$utilities` map, if present. The utility map contains a keyed list of utility groups which accept the following options:
 
@@ -521,7 +521,7 @@ $utilities: map-merge(
 
 ### Remove utilities
 
-Remove any of the default utilities with the [`map-remove()` Sass function](https://sass-lang.com/documentation/modules/map#remove).
+Remove any of the default utilities with the [`map-remove()` Sass function](https://sass-lang.com/documentation/modules/map/#remove).
 
 ```scss
 @import "bootstrap/scss/functions";
@@ -537,7 +537,7 @@ $utilities: map-remove($utilities, "width", "float");
 @import "bootstrap/scss/utilities/api";
 ```
 
-You can also use the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map#merge) and set the group key to `null` to remove the utility.
+You can also use the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map/#merge) and set the group key to `null` to remove the utility.
 
 ```scss
 @import "bootstrap/scss/functions";
@@ -559,7 +559,7 @@ $utilities: map-merge(
 
 ### Add, remove, modify
 
-You can add, remove, and modify many utilities all at once with the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map#merge). Here's how you can combine the previous examples into one larger map.
+You can add, remove, and modify many utilities all at once with the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map/#merge). Here's how you can combine the previous examples into one larger map.
 
 ```scss
 @import "bootstrap/scss/functions";

site/content/docs/5.3/utilities/link.md

@@ -4,7 +4,8 @@ title: Link
 description: Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more.
 group: utilities
 toc: true
-added: 5.3
+added:
+  version: "5.3"
 ---
 
 ## Link opacity

site/content/docs/5.3/utilities/object-fit.md

@@ -4,6 +4,8 @@ title: Object fit
 description: Use the object fit utilities to modify how the content of a [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), such as an `<img>` or `<video>`, should be resized to fit its container.
 group: utilities
 toc: true
+added:
+  version: "5.3"
 ---
 
 ## How it works

site/content/docs/5.3/utilities/opacity.md

@@ -3,7 +3,8 @@ layout: docs
 title: Opacity
 description: Control the opacity of elements.
 group: utilities
-added: "5.1"
+added:
+  version: "5.1"
 ---
 
 The `opacity` property sets the opacity level for an element. The opacity level describes the transparency level, where `1` is not transparent at all, `.5` is 50% visible, and `0` is completely transparent.

site/content/docs/5.3/utilities/z-index.md

@@ -4,7 +4,8 @@ title: Z-index
 description: Use our low-level `z-index` utilities to quickly change the stack level of an element or component.
 group: utilities
 toc: true
-added: "5.3"
+added:
+  version: "5.3"
 ---
 
 ## Example

site/data/icons.yml

@@ -4,13 +4,13 @@ preferred:
   - name: Feather
     website: https://feathericons.com/
   - name: Octicons
-    website: https://primer.style/octicons/
+    website: https://primer.style/foundations/icons
 
 more:
   - name: Bytesize
     website: https://github.com/danklammer/bytesize-icons
   - name: CoreUI Icons
-    website: https://icons.coreui.io/
+    website: https://coreui.io/icons/
   - name: Google Material icons
     website: https://fonts.google.com/icons
   - name: Ionicons
@@ -24,4 +24,4 @@ more:
   - name: icofont
     website: https://icofont.com/
   - name: Tabler Icons
-    website: https://tabler-icons.io/
+    website: https://tabler.io/icons

site/data/translations.yml

@@ -41,4 +41,4 @@
 - name: Spanish
   code: es
   description: Bootstrap 5 Español
-  url: https://bootstrap.esdocu.com/
+  url: https://esdocu.net/bootstrap/comenzando/

site/layouts/_default/_markup/render-heading.html

@@ -1,5 +1,7 @@
-<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}
+{{- $id := .Anchor | safeURL -}}
+{{- $text := .Text | safeHTML -}}
+<h{{ .Level }} id="{{ $id }}">{{ $text }}
 {{- 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="#{{ $id }}" aria-label="Link to this section: {{ $text }}"></a>
 {{- end -}}
 </h{{ .Level }}>

site/layouts/_default/docs.html

@@ -18,8 +18,9 @@
       <div class="bd-intro pt-2 ps-lg-2">
         <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
           <div class="mb-3 mb-md-0 d-flex text-nowrap">
-            {{- if .Page.Params.added -}}
-              <small class="d-inline-flex px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 me-2">Added in v{{ .Page.Params.added }}</small>
+            {{- /* This is needed because we want to show the badge if show_badge isn't present or is set to false */ -}}
+            {{- if (or (and (.Page.Params.added) (not (isset .Page.Params.added "show_badge"))) (and (.Page.Params.added) (isset .Page.Params.added "show_badge") (not (eq .Page.Params.added.show_badge false)))) -}}
+              <small class="d-inline-flex px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 me-2">Added in v{{ .Page.Params.added.version }}</small>
             {{- end -}}
             <a class="btn btn-sm btn-bd-light rounded-2" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">
               View on GitHub

site/layouts/_default/examples.html

@@ -1,9 +1,6 @@
 <!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 -}}
-    <script src="{{ $colorModeJS | relURL }}"></script>
-
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
@@ -17,6 +14,9 @@
     <meta name="robots" content="{{ . }}">
     {{- end }}
 
+    {{- $colorModeJS := urls.JoinPath "/docs" $.Site.Params.docs_version "assets/js/color-modes.js" -}}
+    <script src="{{ $colorModeJS }}"></script>
+
     {{ partial "stylesheet" . }}
     {{ partial "favicons" . }}
 
@@ -159,7 +159,7 @@
     {{ .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 }}></script>
     {{- else -}}
       <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
     {{- end }}

site/layouts/_default/single.html

@@ -5,17 +5,17 @@
         <div class="col-xl-8">
           <h1 class="bd-title mt-0">{{ .Title | markdownify }}</h1>
           <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
-          {{ if eq .Title "Examples" }}
+          {{ if eq .Title "Examples" -}}
           <div class="d-flex flex-column flex-md-row gap-3">
-            <a href="{{ .Site.Params.download.dist_examples }}" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">
+            <a href="{{ .Site.Params.download.dist_examples }}" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold">
               <svg class="bi me-2" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
               Download examples
             </a>
-            <a href="{{ .Site.Params.download.source }}" class="btn btn-lg bd-btn-lg btn-outline-secondary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">
+            <a href="{{ .Site.Params.download.source }}" class="btn btn-lg bd-btn-lg btn-outline-secondary">
               Download source code
             </a>
           </div>
-          {{ end }}
+          {{- end }}
         </div>
         <div class="col-xl-4 d-lg-flex justify-content-xl-end">
           {{ partial "ads" . }}
@@ -41,10 +41,14 @@
             </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,
-                                                              /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"
-                                                        alt="Bootstrap Themes" width="1150" height="320" loading="lazy">
+          <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"
+               alt="Bootstrap Themes"
+               width="1150"
+               height="320"
+               loading="lazy">
         </div>
       {{ end }}
     </div>

site/layouts/partials/analytics.html

@@ -1,9 +1 @@
 <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
-
-<script>
-  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
-  ga('create', 'UA-146052-10', 'getbootstrap.com');
-  ga('set', 'anonymizeIp', true);
-  ga('send', 'pageview');
-</script>
-<script async src="https://www.google-analytics.com/analytics.js"></script>

site/layouts/partials/callouts/warning-color-assistive-technologies.md

@@ -1 +1 @@
-**Accessibility tip:** Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a [*sufficient* color contrast](/docs/{{ .Site.Params.docs_version }}/getting-started/accessibility#color-contrast)) or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.
+**Accessibility tip:** Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a [*sufficient* color contrast](/docs/{{ .Site.Params.docs_version }}/getting-started/accessibility/#color-contrast)) or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.

site/layouts/partials/docs-navbar.html

@@ -33,19 +33,19 @@
         <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/">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/">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>
+            <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.icons }}" target="_blank" rel="noopener">Icons</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.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
+            <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.themes }}" target="_blank" rel="noopener">Themes</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.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
+            <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.blog }}" target="_blank" rel="noopener">Blog</a>
           </li>
         </ul>
 

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 := urls.JoinPath "/docs" $.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>

site/layouts/partials/docs-versions.html

@@ -5,10 +5,14 @@
 
 {{- $versions_link := "" -}}
 {{- if and (eq .Layout "docs") (eq $page_version .Site.Params.docs_version) -}}
-  {{- $versions_link = printf "%s/%s/" $group_slug $page_slug -}}
-{{- else if (eq .Layout "single") }}
-  {{- $versions_link = printf "%s/" $page_slug -}}
-{{- end }}
+  {{- $versions_link = urls.JoinPath $group_slug $page_slug "/" -}}
+{{- else if (eq .Layout "single") -}}
+  {{- $versions_link = urls.JoinPath $page_slug "/" -}}
+{{- end -}}
+
+{{- $added_in_51 := eq (string .Page.Params.added.version) "5.1" -}}
+{{- $added_in_52 := eq (string .Page.Params.added.version) "5.2" -}}
+{{- $added_in_53 := eq (string .Page.Params.added.version) "5.3" -}}
 
 <li class="nav-item dropdown">
   <button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -23,21 +27,21 @@
       </a>
     </li>
     <li>
-      {{- if (eq .Page.Params.added "5.3") }}
+      {{- if ($added_in_53) }}
         <div class="dropdown-item disabled">v5.2.3</div>
       {{- else }}
         <a class="dropdown-item" href="https://getbootstrap.com/docs/5.2/{{ $versions_link }}">v5.2.3</a>
       {{- end }}
     </li>
     <li>
-      {{- if or (eq .Page.Params.added "5.2") (eq .Page.Params.added "5.3") }}
+      {{- if (or $added_in_52 $added_in_53) }}
         <div class="dropdown-item disabled">v5.1.3</div>
       {{- else }}
         <a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/{{ $versions_link }}">v5.1.3</a>
       {{- end }}
     </li>
     <li>
-      {{- if or (eq .Page.Params.added "5.1") (eq .Page.Params.added "5.2") (eq .Page.Params.added "5.3") }}
+      {{- if (or $added_in_51 $added_in_52 $added_in_53) }}
         <div class="dropdown-item disabled">v5.0.2</div>
       {{- else }}
         <a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/{{ $versions_link }}">v5.0.2</a>

site/layouts/partials/favicons.html

@@ -1,4 +1,3 @@
-{{ "<!-- 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">

site/layouts/partials/footer.html

@@ -41,7 +41,7 @@
           <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/tree/v4-dev" target="_blank" rel="noopener">Bootstrap 4</a></li>
           <li class="mb-2"><a href="{{ .Site.Params.github_org }}/icons" target="_blank" rel="noopener">Icons</a></li>
           <li class="mb-2"><a href="{{ .Site.Params.github_org }}/rfs" target="_blank" rel="noopener">RFS</a></li>
-          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/examples/" target="_blank" rel="noopener">Examples repo</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/examples" target="_blank" rel="noopener">Examples repo</a></li>
         </ul>
       </div>
       <div class="col-6 col-lg-2 mb-3">

site/layouts/partials/header.html

@@ -17,8 +17,8 @@
 <meta name="robots" content="{{ . }}">
 {{- end }}
 
-{{- $colorModeJS := printf "/docs/%s/assets/js/color-modes.js" $.Site.Params.docs_version -}}
-<script src="{{ $colorModeJS | relURL }}"></script>
+{{- $colorModeJS := urls.JoinPath "/docs" $.Site.Params.docs_version "assets/js/color-modes.js" -}}
+<script src="{{ $colorModeJS }}"></script>
 
 {{ partial "stylesheet" . }}
 {{ partial "favicons" . }}

site/layouts/partials/home/components-utilities.html

@@ -53,7 +53,7 @@
 </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>

site/layouts/partials/home/masthead.html

@@ -5,7 +5,13 @@
         <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 class="d-none d-sm-block mx-auto mb-3"
+           srcset="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png,
+                   /docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow@2x.png 2x"
+           src="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png"
+           alt="Bootstrap"
+           width="200"
+           height="165">
       <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 +20,7 @@
         <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">
           <svg class="bi me-2" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
           Read the docs
         </a>

site/layouts/partials/home/plugins.html

@@ -50,6 +50,7 @@
       <hr class="my-4">
       <div class="row g-3">
         {{- range $plugin := .Site.Data.plugins -}}
+          {{- /* TODO we should use urls.JoinPath here too, but the links include `#` which gets escaped */ -}}
           {{- $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 }}">

site/layouts/partials/scripts.html

@@ -1,5 +1,5 @@
 {{ 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 }}></script>
 {{ else -}}
   <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
 {{- end }}

site/layouts/partials/social.html

@@ -1,11 +1,11 @@
 {{- $pageTitle := .Title | markdownify -}}
 {{- $pageDescription := .Page.Params.description | default .Site.Params.description | markdownify -}}
-{{- $socialImagePath := printf "/docs/%s/assets" .Site.Params.docs_version -}}
+{{- $socialImagePath := urls.JoinPath "/docs" .Site.Params.docs_version "assets" -}}
 
 {{- if .Page.Params.thumbnail -}}
-  {{- $socialImagePath = path.Join $socialImagePath "img/" .Page.Params.thumbnail -}}
+  {{- $socialImagePath = urls.JoinPath $socialImagePath "img" .Page.Params.thumbnail -}}
 {{- else -}}
-  {{- $socialImagePath = path.Join $socialImagePath "brand/bootstrap-social.png" -}}
+  {{- $socialImagePath = urls.JoinPath $socialImagePath "brand/bootstrap-social.png" -}}
 {{- end -}}
 
 <meta name="twitter:card" content="summary_large_image">

site/layouts/partials/stylesheet.html

@@ -2,9 +2,9 @@
 
 {{ 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 }}>
 {{- 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 }}>
 {{- end -}}
 {{- else -}}
 <link href="/docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap{{ if eq .Page.Params.direction "rtl" }}.rtl{{ end }}.css" rel="stylesheet">

site/layouts/shortcodes/docsref.html

@@ -1 +1,2 @@
-{{- relref . ((path.Join "docs" $.Site.Params.docs_version (.Get 0)) | relURL) -}}
+{{- $pageToReference := path.Join "docs" $.Site.Params.docs_version (.Get 0) -}}
+{{- relref . $pageToReference | relURL -}}