Merge branch 'twbs:main' into mainHEADmain

240 files changed, 12479 insertions, 9887 deletions

diff --git a/site/content/404.md b/site/content/404.md
index de003f149..08359be3e 100644
--- a/site/content/404.md
+++ b/site/content/404.md
@@ -4,7 +4,8 @@ layout: 404
 description: ""
 url: /404.html
 robots: noindex,follow
-sitemap_exclude: true
+sitemap:
+  disable: true
 ---
 
 <div class="text-center py-5">
diff --git a/site/content/docs/5.1/_index.html b/site/content/docs/5.1/_index.html
deleted file mode 100644
index 198e6af8c..000000000
--- a/site/content/docs/5.1/_index.html
+++ /dev/null
@@ -1,5 +0,0 @@
----
-layout: redirect
-sitemap_exclude: true
-redirect: "/docs/5.1/getting-started/introduction/"
----
diff --git a/site/content/docs/5.1/components/close-button.md b/site/content/docs/5.1/components/close-button.md
deleted file mode 100644
index f4a3ed071..000000000
--- a/site/content/docs/5.1/components/close-button.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-layout: docs
-title: Close button
-description: A generic close button for dismissing content like modals and alerts.
-group: components
-toc: true
----
-
-## Example
-
-Provide an option to dismiss or close a component with `.btn-close`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default `background-image`. **Be sure to include text for screen readers**, as we've done with `aria-label`.
-
-{{< example >}}
-<button type="button" class="btn-close" aria-label="Close"></button>
-{{< /example >}}
-
-## Disabled state
-
-Disabled close buttons change their `opacity`. We've also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering.
-
-{{< example >}}
-<button type="button" class="btn-close" disabled aria-label="Close"></button>
-{{< /example >}}
-
-## White variant
-
-Change the default `.btn-close` to be white with the `.btn-close-white` class. This class uses the `filter` property to invert the `background-image`.
-
-{{< example class="bg-dark" >}}
-<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
-<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>
-{{< /example >}}
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="close-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.1/components/popovers.md b/site/content/docs/5.1/components/popovers.md
deleted file mode 100644
index 0acc76a0a..000000000
--- a/site/content/docs/5.1/components/popovers.md
+++ /dev/null
@@ -1,458 +0,0 @@
----
-layout: docs
-title: Popovers
-description: Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
-group: components
-toc: true
----
-
-## Overview
-
-Things to know when using the popover plugin:
-
-- Popovers rely on the 3rd party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper in order for popovers to work!
-- Popovers require the [tooltip plugin]({{< docsref "/components/tooltips" >}}) 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.
-- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
-- Triggering popovers on hidden elements will not work.
-- Popovers for `.disabled` or `disabled` elements must be triggered on a wrapper element.
-- When triggered from anchors that wrap across multiple lines, popovers will be centered between the anchors' overall width. Use `.text-nowrap` on your `<a>`s to avoid this behavior.
-- Popovers must be hidden before their corresponding elements have been removed from the DOM.
-- Popovers can be triggered thanks to an element inside a shadow DOM.
-
-{{< callout info >}}
-{{< partial "callout-info-sanitizer.md" >}}
-{{< /callout >}}
-
-{{< callout info >}}
-{{< partial "callout-info-prefersreducedmotion.md" >}}
-{{< /callout >}}
-
-Keep reading to see how popovers work with some examples.
-
-## Example: Enable popovers everywhere
-
-One way to initialize all popovers on a page would be to select them by their `data-bs-toggle` attribute:
-
-```js
-var popoverTriggerList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
-var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
-  return new bootstrap.Popover(popoverTriggerEl)
-})
-```
-
-## Example: Using the `container` option
-
-When you have some styles on a parent element that interfere with a popover, you'll want to specify a custom `container` so that the popover's HTML appears within that element instead.
-
-```js
-var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
-  container: 'body'
-})
-```
-
-## Example
-
-{{< example >}}
-<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
-{{< /example >}}
-
-### Four directions
-
-Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL.
-
-{{< example >}}
-<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
-  Popover on top
-</button>
-<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
-  Popover on right
-</button>
-<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
-  Popover on bottom
-</button>
-<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
-  Popover on left
-</button>
-{{< /example >}}
-
-### Dismiss on next click
-
-Use the `focus` trigger to dismiss popovers on the user's next click of a different element than the toggle element.
-
-{{< callout danger >}}
-#### Specific markup required for dismiss-on-next-click
-
-For proper cross-browser and cross-platform behavior, you must use the `<a>` tag, _not_ the `<button>` tag, and you also must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute.
-{{< /callout >}}
-
-{{< example >}}
-<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
-{{< /example >}}
-
-```js
-var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
-  trigger: 'focus'
-})
-```
-
-### Disabled elements
-
-Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`.
-
-For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element.
-
-{{< example >}}
-<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
-  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
-</span>
-{{< /example >}}
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="popover-variables" file="scss/_variables.scss" >}}
-
-## Usage
-
-Enable popovers via JavaScript:
-
-```js
-var exampleEl = document.getElementById('example')
-var popover = new bootstrap.Popover(exampleEl, options)
-```
-
-{{< callout warning >}}
-### Making popovers work for keyboard and assistive technology users
-
-To allow keyboard users to activate your popovers, you should only add them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the popover's content in this situation. Additionally, do not rely solely on `hover` as the trigger for your popovers, as this will make them impossible to trigger for keyboard users.
-
-While you can insert rich, structured HTML in popovers with the `html` option, we strongly recommend that you avoid adding an excessive amount of content. The way popovers currently work is that, once displayed, their content is tied to the trigger element with the `aria-describedby` attribute. As a result, the entirety of the popover's content will be announced to assistive technology users as one long, uninterrupted stream.
-
-Additionally, while it is possible to also include interactive controls (such as form elements or links) in your popover (by adding these elements to the `allowList` of allowed attributes and tags), be aware that currently the popover does not manage keyboard focus order. When a keyboard user opens a popover, focus remains on the triggering element, and as the popover usually does not immediately follow the trigger in the document's structure, there is no guarantee that moving forward/pressing <kbd>TAB</kbd> will move a keyboard user into the popover itself. In short, simply adding interactive controls to a popover is likely to make these controls unreachable/unusable for keyboard users and users of assistive technologies, or at the very least make for an illogical overall focus order. In these cases, consider using a modal dialog instead.
-{{< /callout >}}
-
-### Options
-
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-bs-customClass="beautifier"`, use `data-bs-custom-class="beautifier"`.
-
-{{< callout warning >}}
-Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
-{{< /callout >}}
-
-<table class="table">
-  <thead>
-    <tr>
-      <th style="width: 100px;">Name</th>
-      <th style="width: 100px;">Type</th>
-      <th style="width: 50px;">Default</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>animation</code></td>
-      <td>boolean</td>
-      <td><code>true</code></td>
-      <td>Apply a CSS fade transition to the popover</td>
-    </tr>
-    <tr>
-      <td><code>container</code></td>
-      <td>string | element | false</td>
-      <td><code>false</code></td>
-      <td>
-        <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. 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.</p>
-      </td>
-    </tr>
-    <tr>
-      <td><code>content</code></td>
-      <td>string | element | function</td>
-      <td><code>''</code></td>
-      <td>
-        <p>Default content value if <code>data-bs-content</code> attribute isn't present.</p>
-        <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p>
-      </td>
-    </tr>
-    <tr>
-      <td><code>delay</code></td>
-      <td>number | object</td>
-      <td><code>0</code></td>
-      <td>
-        <p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
-        <p>If a number is supplied, delay is applied to both hide/show</p>
-        <p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
-      </td>
-    </tr>
-    <tr>
-      <td><code>html</code></td>
-      <td>boolean</td>
-      <td><code>false</code></td>
-      <td>Insert HTML into the popover. If false, <code>innerText</code> property will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
-    </tr>
-    <tr>
-      <td><code>placement</code></td>
-      <td>string | function</td>
-      <td><code>'right'</code></td>
-      <td>
-        <p>How to position the popover - auto | top | bottom | left | right.<br>When <code>auto</code> is specified, it will dynamically reorient the popover.</p>
-        <p>When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the popover instance.</p>
-      </td>
-    </tr>
-    <tr>
-      <td><code>selector</code></td>
-      <td>string | false</td>
-      <td><code>false</code></td>
-      <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="{{< param repo >}}/issues/4215">this</a> and <a href="https://codepen.io/team/bootstrap/pen/zYBXGwX?editors=1010">an informative example</a>.</td>
-    </tr>
-    <tr>
-      <td><code>template</code></td>
-      <td>string</td>
-      <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="popover-arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-header"&gt;&lt;/h3&gt;&lt;div class="popover-body"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
-      <td>
-        <p>Base HTML to use when creating the popover.</p>
-        <p>The popover's <code>title</code> will be injected into the <code>.popover-header</code>.</p>
-        <p>The popover's <code>content</code> will be injected into the <code>.popover-body</code>.</p>
-        <p><code>.popover-arrow</code> will become the popover's arrow.</p>
-        <p>The outermost wrapper element should have the <code>.popover</code> class.</p>
-      </td>
-    </tr>
-    <tr>
-      <td><code>title</code></td>
-      <td>string | element | function</td>
-      <td><code>''</code></td>
-      <td>
-        <p>Default title value if <code>title</code> attribute isn't present.</p>
-        <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p>
-      </td>
-    </tr>
-    <tr>
-      <td><code>trigger</code></td>
-      <td>string</td>
-      <td><code>'click'</code></td>
-      <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. <code>manual</code> cannot be combined with any other trigger.</td>
-    </tr>
-    <tr>
-      <td><code>fallbackPlacements</code></td>
-      <td>array</td>
-      <td><code>['top', 'right', 'bottom', 'left']</code></td>
-      <td>Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to
-      Popper's <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements">behavior docs</a></td>
-    </tr>
-    <tr>
-      <td><code>boundary</code></td>
-      <td>string | element</td>
-      <td><code>'clippingParents'</code></td>
-      <td>Overflow constraint boundary of the popover (applies only to Popper's preventOverflow modifier). By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">detectOverflow docs</a>.</td>
-    </tr>
-    <tr>
-      <td><code>customClass</code></td>
-      <td>string | function</td>
-      <td><code>''</code></td>
-      <td>
-        <p>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: <code>'class-1 class-2'</code>.</p>
-        <p>You can also pass a function that should return a single string containing additional class names.</p>
-      </td>
-    </tr>
-    <tr>
-      <td><code>sanitize</code></td>
-      <td>boolean</td>
-      <td><code>true</code></td>
-      <td>Enable or disable the sanitization. If activated <code>'template'</code>, <code>'content'</code> and <code>'title'</code> options will be sanitized. See the <a href="{{< docsref "/getting-started/javascript#sanitizer" >}}">sanitizer section in our JavaScript documentation</a>.</td>
-    </tr>
-    <tr>
-      <td><code>allowList</code></td>
-      <td>object</td>
-      <td><a href="{{< docsref "/getting-started/javascript#sanitizer" >}}">Default value</a></td>
-      <td>Object which contains allowed attributes and tags</td>
-    </tr>
-    <tr>
-      <td><code>sanitizeFn</code></td>
-      <td>null | function</td>
-      <td><code>null</code></td>
-      <td>Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.</td>
-    </tr>
-    <tr>
-      <td><code>offset</code></td>
-      <td>array | string | function</td>
-      <td><code>[0, 8]</code></td>
-      <td>
-        <p>Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: <code>data-bs-offset="10,20"</code></p>
-        <p>When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: <code>[<a href="https://popper.js.org/docs/v2/modifiers/offset/#skidding-1">skidding</a>, <a href="https://popper.js.org/docs/v2/modifiers/offset/#distance-1">distance</a>]</code>.</p>
-        <p>For more information refer to Popper's <a href="https://popper.js.org/docs/v2/modifiers/offset/#options">offset docs</a>.</p>
-      </td>
-    </tr>
-    <tr>
-      <td><code>popperConfig</code></td>
-      <td>null | object | function</td>
-      <td><code>null</code></td>
-      <td>
-        <p>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v2/constructors/#options">Popper's configuration</a>.</p>
-        <p>When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.</p>
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-{{< callout info >}}
-#### Data attributes for individual popovers
-
-Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.
-{{< /callout >}}
-
-#### Using function with `popperConfig`
-
-```js
-var popover = new bootstrap.Popover(element, {
-  popperConfig: function (defaultBsPopperConfig) {
-    // var newPopperConfig = {...}
-    // use defaultBsPopperConfig if needed...
-    // return newPopperConfig
-  }
-})
-```
-
-### Methods
-
-{{< callout danger >}}
-{{< partial "callout-danger-async-methods.md" >}}
-{{< /callout >}}
-
-
-#### show
-
-Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose title and content are both zero-length are never displayed.
-
-```js
-myPopover.show()
-```
-
-#### hide
-
-Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
-
-```js
-myPopover.hide()
-```
-
-#### toggle
-
-Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
-
-```js
-myPopover.toggle()
-```
-
-#### dispose
-
-Hides and destroys an element's popover (Removes stored data on the DOM element). Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.
-
-```js
-myPopover.dispose()
-```
-
-#### enable
-
-Gives an element's popover the ability to be shown. **Popovers are enabled by default.**
-
-```js
-myPopover.enable()
-```
-
-#### disable
-
-Removes the ability for an element's popover to be shown. The popover will only be able to be shown if it is re-enabled.
-
-```js
-myPopover.disable()
-```
-
-#### setContent
-
-Gives a way to change the popover's content after its initialization.
-
-```js
-myPopover.setContent({
-  '.popover-header': 'another title',
-  '.popover-body': 'another content'
-})
-```
-
-{{< callout info >}}
-The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the popover template, and each related property-value can be `string` | `element` | `function` | `null`
-{{< /callout >}}
-
-#### toggleEnabled
-
-Toggles the ability for an element's popover to be shown or hidden.
-
-```js
-myPopover.toggleEnabled()
-```
-
-#### update
-
-Updates the position of an element's popover.
-
-```js
-myPopover.update()
-```
-
-#### getInstance
-
-*Static* method which allows you to get the popover instance associated with a DOM element
-
-```js
-var exampleTriggerEl = document.getElementById('example')
-var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
-```
-
-#### getOrCreateInstance
-
-*Static* method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn't initialized
-
-```js
-var exampleTriggerEl = document.getElementById('example')
-var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
-```
-
-### Events
-
-<table class="table">
-  <thead>
-    <tr>
-      <th style="width: 150px;">Event type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>show.bs.popover</td>
-      <td>This event fires immediately when the <code>show</code> instance method is called.</td>
-    </tr>
-    <tr>
-      <td>shown.bs.popover</td>
-      <td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td>
-    </tr>
-    <tr>
-      <td>hide.bs.popover</td>
-      <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
-    </tr>
-    <tr>
-      <td>hidden.bs.popover</td>
-      <td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
-    </tr>
-    <tr>
-      <td>inserted.bs.popover</td>
-      <td>This event is fired after the <code>show.bs.popover</code> event when the popover template has been added to the DOM.</td>
-    </tr>
-  </tbody>
-</table>
-
-```js
-var myPopoverTrigger = document.getElementById('myPopover')
-myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
-  // do something...
-})
-```
diff --git a/site/content/docs/5.1/components/progress.md b/site/content/docs/5.1/components/progress.md
deleted file mode 100644
index fccd546c6..000000000
--- a/site/content/docs/5.1/components/progress.md
+++ /dev/null
@@ -1,142 +0,0 @@
----
-layout: docs
-title: Progress
-description: Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
-group: components
-toc: true
----
-
-## How it works
-
-Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them.
-
-- We use the `.progress` as a wrapper to indicate the max value of the progress bar.
-- We use the inner `.progress-bar` to indicate the progress so far.
-- The `.progress-bar` requires an inline style, utility class, or custom CSS to set their width.
-- The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible.
-
-Put that all together, and you have the following examples.
-
-{{< example >}}
-<div class="progress">
-  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress">
-  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress">
-  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress">
-  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress">
-  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-{{< /example >}}
-
-Bootstrap provides a handful of [utilities for setting width]({{< docsref "/utilities/sizing" >}}). Depending on your needs, these may help with quickly configuring progress.
-
-{{< example >}}
-<div class="progress">
-  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-{{< /example >}}
-
-## Labels
-
-Add labels to your progress bars by placing text within the `.progress-bar`.
-
-{{< example >}}
-<div class="progress">
-  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
-</div>
-{{< /example >}}
-
-## Height
-
-We only set a `height` value on the `.progress`, so if you change that value the inner `.progress-bar` will automatically resize accordingly.
-
-{{< example >}}
-<div class="progress" style="height: 1px;">
-  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress" style="height: 20px;">
-  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-{{< /example >}}
-
-## Backgrounds
-
-Use background utility classes to change the appearance of individual progress bars.
-
-{{< example >}}
-<div class="progress">
-  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress">
-  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress">
-  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress">
-  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-{{< /example >}}
-
-## Multiple bars
-
-Include multiple progress bars in a progress component if you need.
-
-{{< example >}}
-<div class="progress">
-  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
-  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
-  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-{{< /example >}}
-
-## Striped
-
-Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color.
-
-{{< example >}}
-<div class="progress">
-  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress">
-  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress">
-  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress">
-  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="progress">
-  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-{{< /example >}}
-
-## Animated stripes
-
-The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations.
-
-{{< example >}}
-<div class="progress">
-  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
-</div>
-{{< /example >}}
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="progress-variables" file="scss/_variables.scss" >}}
-
-### Keyframes
-
-Used for creating the CSS animations for `.progress-bar-animated`. Included in `scss/_progress-bar.scss`.
-
-{{< scss-docs name="progress-keyframes" file="scss/_progress.scss" >}}
diff --git a/site/content/docs/5.1/components/scrollspy.md b/site/content/docs/5.1/components/scrollspy.md
deleted file mode 100644
index aeabb8185..000000000
--- a/site/content/docs/5.1/components/scrollspy.md
+++ /dev/null
@@ -1,367 +0,0 @@
----
-layout: docs
-title: Scrollspy
-description: Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
-group: components
-toc: true
----
-
-## How it works
-
-Scrollspy has a few requirements to function properly:
-
-- It must be used on a Bootstrap [nav component]({{< docsref "/components/navs-tabs" >}}) or [list group]({{< docsref "/components/list-group" >}}).
-- Scrollspy requires `position: relative;` on the element you're spying on, usually the `<body>`.
-- Anchors (`<a>`) are required and must point to an element with that `id`.
-
-When successfully implemented, your nav or list group will update accordingly, moving the `.active` class from one item to the next based on their associated targets.
-
-{{< callout >}}
-### Scrollable containers and keyboard access
-
-If you're making a scrollable container (other than the `<body>`), be sure to have a `height` set and `overflow-y: scroll;` applied to it—alongside a `tabindex="0"` to ensure keyboard access.
-{{< /callout >}}
-
-## Example in navbar
-
-Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.
-
-<div class="bd-example">
-  <nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
-    <a class="navbar-brand" href="#">Navbar</a>
-    <ul class="nav nav-pills">
-      <li class="nav-item">
-        <a class="nav-link" href="#scrollspyHeading1">First</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="#scrollspyHeading2">Second</a>
-      </li>
-      <li class="nav-item dropdown">
-        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
-        <ul class="dropdown-menu">
-          <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
-          <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
-          <li><hr class="dropdown-divider"></li>
-          <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
-        </ul>
-      </li>
-    </ul>
-  </nav>
-  <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
-    <h4 id="scrollspyHeading1">First heading</h4>
-    <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
-    <h4 id="scrollspyHeading2">Second heading</h4>
-    <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
-    <h4 id="scrollspyHeading3">Third heading</h4>
-    <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
-    <h4 id="scrollspyHeading4">Fourth heading</h4>
-    <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
-    <h4 id="scrollspyHeading5">Fifth heading</h4>
-    <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
-  </div>
-</div>
-
-```html
-<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
-  <a class="navbar-brand" href="#">Navbar</a>
-  <ul class="nav nav-pills">
-    <li class="nav-item">
-      <a class="nav-link" href="#scrollspyHeading1">First</a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" href="#scrollspyHeading2">Second</a>
-    </li>
-    <li class="nav-item dropdown">
-      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
-      <ul class="dropdown-menu">
-        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
-        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
-        <li><hr class="dropdown-divider"></li>
-        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
-      </ul>
-    </li>
-  </ul>
-</nav>
-<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
-  <h4 id="scrollspyHeading1">First heading</h4>
-  <p>...</p>
-  <h4 id="scrollspyHeading2">Second heading</h4>
-  <p>...</p>
-  <h4 id="scrollspyHeading3">Third heading</h4>
-  <p>...</p>
-  <h4 id="scrollspyHeading4">Fourth heading</h4>
-  <p>...</p>
-  <h4 id="scrollspyHeading5">Fifth heading</h4>
-  <p>...</p>
-</div>
-```
-
-## Example with nested nav
-
-Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its parents will also be `.active`. Scroll the area next to the navbar and watch the active class change.
-
-<div class="bd-example">
-  <div class="row">
-    <div class="col-4">
-      <nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
-        <a class="navbar-brand" href="#">Navbar</a>
-        <nav class="nav nav-pills flex-column">
-          <a class="nav-link" href="#item-1">Item 1</a>
-          <nav class="nav nav-pills flex-column">
-            <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
-            <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
-          </nav>
-          <a class="nav-link" href="#item-2">Item 2</a>
-          <a class="nav-link" href="#item-3">Item 3</a>
-          <nav class="nav nav-pills flex-column">
-            <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
-            <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
-          </nav>
-        </nav>
-      </nav>
-    </div>
-    <div class="col-8">
-      <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" class="scrollspy-example-2" tabindex="0">
-        <h4 id="item-1">Item 1</h4>
-        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
-        <h5 id="item-1-1">Item 1-1</h5>
-        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
-        <h5 id="item-1-2">Item 1-2</h5>
-        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
-        <h4 id="item-2">Item 2</h4>
-        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
-        <h4 id="item-3">Item 3</h4>
-        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
-        <h5 id="item-3-1">Item 3-1</h5>
-        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
-        <h5 id="item-3-2">Item 3-2</h5>
-        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
-      </div>
-    </div>
-  </div>
-</div>
-
-```html
-<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
-  <a class="navbar-brand" href="#">Navbar</a>
-  <nav class="nav nav-pills flex-column">
-    <a class="nav-link" href="#item-1">Item 1</a>
-    <nav class="nav nav-pills flex-column">
-      <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
-      <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
-    </nav>
-    <a class="nav-link" href="#item-2">Item 2</a>
-    <a class="nav-link" href="#item-3">Item 3</a>
-    <nav class="nav nav-pills flex-column">
-      <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
-      <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
-    </nav>
-  </nav>
-</nav>
-
-<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
-  <h4 id="item-1">Item 1</h4>
-  <p>...</p>
-  <h5 id="item-1-1">Item 1-1</h5>
-  <p>...</p>
-  <h5 id="item-1-2">Item 1-2</h5>
-  <p>...</p>
-  <h4 id="item-2">Item 2</h4>
-  <p>...</p>
-  <h4 id="item-3">Item 3</h4>
-  <p>...</p>
-  <h5 id="item-3-1">Item 3-1</h5>
-  <p>...</p>
-  <h5 id="item-3-2">Item 3-2</h5>
-  <p>...</p>
-</div>
-```
-
-## Example with list-group
-
-Scrollspy also works with `.list-group`s. Scroll the area next to the list group and watch the active class change.
-
-<div class="bd-example">
-  <div class="row">
-    <div class="col-4">
-      <div id="list-example" class="list-group">
-        <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
-        <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
-        <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
-        <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
-      </div>
-    </div>
-    <div class="col-8">
-      <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
-        <h4 id="list-item-1">Item 1</h4>
-        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
-        <h4 id="list-item-2">Item 2</h4>
-        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
-        <h4 id="list-item-3">Item 3</h4>
-        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
-        <h4 id="list-item-4">Item 4</h4>
-        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
-      </div>
-    </div>
-  </div>
-</div>
-
-```html
-<div id="list-example" class="list-group">
-  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
-  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
-  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
-  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
-</div>
-<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
-  <h4 id="list-item-1">Item 1</h4>
-  <p>...</p>
-  <h4 id="list-item-2">Item 2</h4>
-  <p>...</p>
-  <h4 id="list-item-3">Item 3</h4>
-  <p>...</p>
-  <h4 id="list-item-4">Item 4</h4>
-  <p>...</p>
-</div>
-```
-
-## Usage
-
-### Via data attributes
-
-To easily add scrollspy behavior to your topbar navigation, add `data-bs-spy="scroll"` to the element you want to spy on (most typically this would be the `<body>`). Then add the `data-bs-target` attribute with the ID or class of the parent element of any Bootstrap `.nav` component.
-
-```css
-body {
-  position: relative;
-}
-```
-
-```html
-<body data-bs-spy="scroll" data-bs-target="#navbar-example">
-  ...
-  <div id="navbar-example">
-    <ul class="nav nav-tabs" role="tablist">
-      ...
-    </ul>
-  </div>
-  ...
-</body>
-```
-
-### Via JavaScript
-
-After adding `position: relative;` in your CSS, call the scrollspy via JavaScript:
-
-```js
-var scrollSpy = new bootstrap.ScrollSpy(document.body, {
-  target: '#navbar-example'
-})
-```
-
-{{< callout danger >}}
-#### Resolvable ID targets required
-
-Navbar links must have resolvable id targets. For example, a `<a href="#home">home</a>` must correspond to something in the DOM like `<div id="home"></div>`.
-{{< /callout >}}
-
-{{< callout info >}}
-#### Non-visible target elements ignored
-
-Target elements that are not visible will be ignored and their corresponding nav items will never be highlighted.
-{{< /callout >}}
-
-### Methods
-
-#### refresh
-
-When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:
-
-```js
-var dataSpyList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
-dataSpyList.forEach(function (dataSpyEl) {
-  bootstrap.ScrollSpy.getInstance(dataSpyEl)
-    .refresh()
-})
-```
-
-#### dispose
-
-Destroys an element's scrollspy. (Removes stored data on the DOM element)
-
-#### getInstance
-
-*Static* method which allows you to get the scrollspy instance associated with a DOM element
-
-```js
-var scrollSpyContentEl = document.getElementById('content')
-var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
-```
-
-#### getOrCreateInstance
-
-*Static* method which allows you to get the scrollspy instance associated with a DOM element, or create a new one in case it wasn't initialized
-
-```js
-var scrollSpyContentEl = document.getElementById('content')
-var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
-```
-
-### Options
-
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`.
-
-<table class="table">
-  <thead>
-    <tr>
-      <th style="width: 100px;">Name</th>
-      <th style="width: 100px;">Type</th>
-      <th style="width: 50px;">Default</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>offset</code></td>
-      <td>number</td>
-      <td><code>10</code></td>
-      <td>Pixels to offset from top when calculating position of scroll.</td>
-    </tr>
-    <tr>
-      <td><code>method</code></td>
-      <td>string</td>
-      <td><code>auto</code></td>
-      <td>Finds which section the spied element is in. <code>auto</code> will choose the best method to get scroll coordinates. <code>offset</code> will use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect"><code>Element.getBoundingClientRect()</code></a> method to get scroll coordinates. <code>position</code> will use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop"><code>HTMLElement.offsetTop</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft"><code>HTMLElement.offsetLeft</code></a> properties to get scroll coordinates.</td>
-    </tr>
-    <tr>
-      <td><code>target</code></td>
-      <td>string | jQuery object | DOM element</td>
-      <td></td>
-      <td>Specifies element to apply Scrollspy plugin.</td>
-    </tr>
-  </tbody>
-</table>
-
-### Events
-
-<table class="table">
-  <thead>
-    <tr>
-      <th style="width: 150px;">Event type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>activate.bs.scrollspy</code></td>
-      <td>This event fires on the scroll element whenever a new item becomes activated by the scrollspy.</td>
-    </tr>
-  </tbody>
-</table>
-
-```js
-var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
-firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
-  // do something...
-})
-```
diff --git a/site/content/docs/5.1/components/tooltips.md b/site/content/docs/5.1/components/tooltips.md
deleted file mode 100644
index 16501a3c9..000000000
--- a/site/content/docs/5.1/components/tooltips.md
+++ /dev/null
@@ -1,482 +0,0 @@
----
-layout: docs
-title: Tooltips
-description: Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.
-group: components
-toc: true
----
-
-## Overview
-
-Things to know when using the tooltip plugin:
-
-- Tooltips rely on the 3rd party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper in order for tooltips to work!
-- 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).
-- Triggering tooltips on hidden elements will not work.
-- Tooltips for `.disabled` or `disabled` elements must be triggered on a wrapper element.
-- When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use `white-space: nowrap;` on your `<a>`s to avoid this behavior.
-- Tooltips must be hidden before their corresponding elements have been removed from the DOM.
-- Tooltips can be triggered thanks to an element inside a shadow DOM.
-
-{{< callout info >}}
-{{< partial "callout-info-sanitizer.md" >}}
-{{< /callout >}}
-
-{{< callout info >}}
-{{< partial "callout-info-prefersreducedmotion.md" >}}
-{{< /callout >}}
-
-Got all that? Great, let's see how they work with some examples.
-
-## Example: Enable tooltips everywhere
-
-One way to initialize all tooltips on a page would be to select them by their `data-bs-toggle` attribute:
-
-```js
-var tooltipTriggerList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
-var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
-  return new bootstrap.Tooltip(tooltipTriggerEl)
-})
-```
-
-## Examples
-
-Hover over the links below to see tooltips:
-
-<div class="bd-example tooltip-demo">
-  <p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" title="The last tip!">your own</a> site or project.
-  </p>
-</div>
-
-Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL.
-
-<div class="bd-example tooltip-demo">
-  <div class="bd-example-tooltips">
-    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button>
-    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Tooltip on right</button>
-    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
-    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Tooltip on left</button>
-    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
-  </div>
-</div>
-
-```html
-<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
-  Tooltip on top
-</button>
-<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
-  Tooltip on right
-</button>
-<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
-  Tooltip on bottom
-</button>
-<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
-  Tooltip on left
-</button>
-```
-
-And with custom HTML added:
-
-```html
-<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
-  Tooltip with HTML
-</button>
-```
-
-With an SVG:
-
-<div class="bd-example tooltip-demo">
-  <a href="#" class="d-inline-block" data-bs-toggle="tooltip" title="Default tooltip">
-    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">
-      <rect width="100%" height="100%" fill="#563d7c"/>
-      <circle cx="50" cy="50" r="30" fill="#007bff"/>
-    </svg>
-  </a>
-</div>
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="tooltip-variables" file="scss/_variables.scss" >}}
-
-## Usage
-
-The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
-
-Trigger the tooltip via JavaScript:
-
-```js
-var exampleEl = document.getElementById('example')
-var tooltip = new bootstrap.Tooltip(exampleEl, options)
-```
-
-{{< callout warning >}}
-##### Overflow `auto` and `scroll`
-
-Tooltip position attempts to automatically change when a **parent container** has `overflow: auto` or `overflow: scroll` like our `.table-responsive`, but still keeps the original placement's positioning. To resolve this, set the [`boundary` option](https://popper.js.org/docs/v2/modifiers/flip/#boundary) (for the flip modifier using the `popperConfig` option) to any HTMLElement to override the default value, `'clippingParents'`, such as `document.body`:
-
-```js
-var exampleEl = document.getElementById('example')
-var tooltip = new bootstrap.Tooltip(exampleEl, {
-  boundary: document.body // or document.querySelector('#boundary')
-})
-```
-{{< /callout >}}
-
-### Markup
-
-The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
-
-{{< callout warning >}}
-##### Making tooltips work for keyboard and assistive technology users
-
-You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the tooltip in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltip, as this will make your tooltips impossible to trigger for keyboard users.
-{{< /callout >}}
-
-```html
-<!-- HTML to write -->
-<a href="#" data-bs-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
-
-<!-- Generated markup by the plugin -->
-<div class="tooltip bs-tooltip-top" role="tooltip">
-  <div class="tooltip-arrow"></div>
-  <div class="tooltip-inner">
-    Some tooltip text!
-  </div>
-</div>
-```
-
-### Disabled elements
-
-Elements with the `disabled` attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`.
-
-<div class="tooltip-demo">
-{{< example >}}
-<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
-  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
-</span>
-{{< /example >}}
-</div>
-
-### Options
-
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-bs-customClass="beautifier"`, use `data-bs-custom-class="beautifier"`.
-
-{{< callout warning >}}
-Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
-{{< /callout >}}
-
-<table class="table">
-  <thead>
-    <tr>
-      <th style="width: 100px;">Name</th>
-      <th style="width: 100px;">Type</th>
-      <th style="width: 50px;">Default</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>animation</code></td>
-      <td>boolean</td>
-      <td><code>true</code></td>
-      <td>Apply a CSS fade transition to the tooltip</td>
-    </tr>
-    <tr>
-      <td><code>container</code></td>
-      <td>string | element | false</td>
-      <td><code>false</code></td>
-      <td>
-        <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. 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.</p>
-      </td>
-    </tr>
-    <tr>
-      <td><code>delay</code></td>
-      <td>number | object</td>
-      <td><code>0</code></td>
-      <td>
-        <p>Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
-        <p>If a number is supplied, delay is applied to both hide/show</p>
-        <p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
-      </td>
-    </tr>
-    <tr>
-      <td><code>html</code></td>
-      <td>boolean</td>
-      <td><code>false</code></td>
-      <td>
-        <p>Allow HTML in the tooltip.</p>
-        <p>If true, HTML tags in the tooltip's <code>title</code> will be rendered in the tooltip. If false, <code>innerText</code> property will be used to insert content into the DOM.</p>
-        <p>Use text if you're worried about XSS attacks.</p>
-      </td>
-    </tr>
-    <tr>
-      <td><code>placement</code></td>
-      <td>string | function</td>
-      <td><code>'top'</code></td>
-      <td>
-        <p>How to position the tooltip - auto | top | bottom | left | right.<br>When <code>auto</code> is specified, it will dynamically reorient the tooltip.</p>
-        <p>When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the tooltip instance.</p>
-      </td>
-    </tr>
-    <tr>
-      <td><code>selector</code></td>
-      <td>string | false</td>
-      <td><code>false</code></td>
-      <td>If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (<code>jQuery.on</code> support). See <a href="{{< param repo >}}/issues/4215">this</a> and <a href="https://codepen.io/team/bootstrap/pen/zYBXGwX?editors=1010">an informative example</a>.</td>
-    </tr>
-    <tr>
-      <td><code>template</code></td>
-      <td>string</td>
-      <td><code>'&lt;div class="tooltip" role="tooltip"&gt;&lt;div class="tooltip-arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
-      <td>
-        <p>Base HTML to use when creating the tooltip.</p>
-        <p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p>
-        <p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p>
-        <p>The outermost wrapper element should have the <code>.tooltip</code> class and <code>role="tooltip"</code>.</p>
-      </td>
-    </tr>
-    <tr>
-      <td><code>title</code></td>
-      <td>string | element | function</td>
-      <td><code>''</code></td>
-      <td>
-        <p>Default title value if <code>title</code> attribute isn't present.</p>
-        <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the tooltip is attached to.</p>
-      </td>
-    </tr>
-    <tr>
-      <td><code>trigger</code></td>
-      <td>string</td>
-      <td><code>'hover focus'</code></td>
-      <td>
-        <p>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</p>
-        <p><code>'manual'</code> indicates that the tooltip will be triggered programmatically via the <code>.show()</code>, <code>.hide()</code> and <code>.toggle()</code> methods; this value cannot be combined with any other trigger.</p>
-        <p><code>'hover'</code> on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present.</p>
-      </td>
-    </tr>
-    <tr>
-      <td><code>fallbackPlacements</code></td>
-      <td>array</td>
-      <td><code>['top', 'right', 'bottom', 'left']</code></td>
-      <td>Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to
-      Popper's <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements">behavior docs</a></td>
-    </tr>
-    <tr>
-      <td><code>boundary</code></td>
-      <td>string | element</td>
-      <td><code>'clippingParents'</code></td>
-      <td>Overflow constraint boundary of the tooltip (applies only to Popper's preventOverflow modifier). By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">detectOverflow docs</a>.</td>
-    </tr>
-    <tr>
-      <td><code>customClass</code></td>
-      <td>string | function</td>
-      <td><code>''</code></td>
-      <td>
-        <p>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: <code>'class-1 class-2'</code>.</p>
-        <p>You can also pass a function that should return a single string containing additional class names.</p>
-      </td>
-    </tr>
-    <tr>
-      <td><code>sanitize</code></td>
-      <td>boolean</td>
-      <td><code>true</code></td>
-      <td>Enable or disable the sanitization. If activated <code>'template'</code> and <code>'title'</code> options will be sanitized. See the <a href="{{< docsref "/getting-started/javascript#sanitizer" >}}">sanitizer section in our JavaScript documentation</a>.</td>
-    </tr>
-    <tr>
-      <td><code>allowList</code></td>
-      <td>object</td>
-      <td><a href="{{< docsref "/getting-started/javascript#sanitizer" >}}">Default value</a></td>
-      <td>Object which contains allowed attributes and tags</td>
-    </tr>
-    <tr>
-      <td><code>sanitizeFn</code></td>
-      <td>null | function</td>
-      <td><code>null</code></td>
-      <td>Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.</td>
-    </tr>
-    <tr>
-      <td><code>offset</code></td>
-      <td>array | string | function</td>
-      <td><code>[0, 0]</code></td>
-      <td>
-        <p>Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: <code>data-bs-offset="10,20"</code></p>
-        <p>When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: <code>[<a href="https://popper.js.org/docs/v2/modifiers/offset/#skidding-1">skidding</a>, <a href="https://popper.js.org/docs/v2/modifiers/offset/#distance-1">distance</a>]</code>.</p>
-        <p>For more information refer to Popper's <a href="https://popper.js.org/docs/v2/modifiers/offset/#options">offset docs</a>.</p>
-      </td>
-    </tr>
-    <tr>
-      <td><code>popperConfig</code></td>
-      <td>null | object | function</td>
-      <td><code>null</code></td>
-      <td>
-        <p>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v2/constructors/#options">Popper's configuration</a>.</p>
-        <p>When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.</p>
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-{{< callout info >}}
-#### Data attributes for individual tooltips
-
-Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.
-{{< /callout >}}
-
-#### Using function with `popperConfig`
-
-```js
-var tooltip = new bootstrap.Tooltip(element, {
-  popperConfig: function (defaultBsPopperConfig) {
-    // var newPopperConfig = {...}
-    // use defaultBsPopperConfig if needed...
-    // return newPopperConfig
-  }
-})
-```
-
-### Methods
-
-{{< callout danger >}}
-{{< partial "callout-danger-async-methods.md" >}}
-{{< /callout >}}
-
-#### show
-
-Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.
-
-```js
-tooltip.show()
-```
-
-#### hide
-
-Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
-
-```js
-tooltip.hide()
-```
-
-#### toggle
-
-Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
-
-```js
-tooltip.toggle()
-```
-
-#### dispose
-
-Hides and destroys an element's tooltip (Removes stored data on the DOM element). Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.
-
-```js
-tooltip.dispose()
-```
-
-#### enable
-
-Gives an element's tooltip the ability to be shown. **Tooltips are enabled by default.**
-
-```js
-tooltip.enable()
-```
-
-#### disable
-
-Removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.
-
-```js
-tooltip.disable()
-```
-
-#### setContent
-
-Gives a way to change the tooltip's content after its initialization.
-
-```js
-tooltip.setContent({ '.tooltip-inner': 'another title' })
-```
-{{< callout info >}}
-The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the popover template, and each related property-value can be `string` | `element` | `function` | `null`
-{{< /callout >}}
-
-#### toggleEnabled
-
-Toggles the ability for an element's tooltip to be shown or hidden.
-
-```js
-tooltip.toggleEnabled()
-```
-
-#### update
-
-Updates the position of an element's tooltip.
-
-```js
-tooltip.update()
-```
-
-#### getInstance
-
-*Static* method which allows you to get the tooltip instance associated with a DOM element
-
-```js
-var exampleTriggerEl = document.getElementById('example')
-var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
-```
-
-#### getOrCreateInstance
-
-*Static* method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn't initialized
-
-```js
-var exampleTriggerEl = document.getElementById('example')
-var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
-```
-
-### Events
-
-<table class="table">
-  <thead>
-    <tr>
-      <th style="width: 150px;">Event type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>show.bs.tooltip</code></td>
-      <td>This event fires immediately when the <code>show</code> instance method is called.</td>
-    </tr>
-    <tr>
-      <td><code>shown.bs.tooltip</code></td>
-      <td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
-    </tr>
-    <tr>
-      <td><code>hide.bs.tooltip</code></td>
-      <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
-    </tr>
-    <tr>
-      <td><code>hidden.bs.tooltip</code></td>
-      <td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
-    </tr>
-    <tr>
-      <td><code>inserted.bs.tooltip</code></td>
-      <td>This event is fired after the <code>show.bs.tooltip</code> event when the tooltip template has been added to the DOM.</td>
-    </tr>
-  </tbody>
-</table>
-
-```js
-var myTooltipEl = document.getElementById('myTooltip')
-var tooltip = new bootstrap.Tooltip(myTooltipEl)
-
-myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
-  // do something...
-})
-
-tooltip.hide()
-```
diff --git a/site/content/docs/5.1/customize/color.md b/site/content/docs/5.1/customize/color.md
deleted file mode 100644
index 785179bb8..000000000
--- a/site/content/docs/5.1/customize/color.md
+++ /dev/null
@@ -1,151 +0,0 @@
----
-layout: docs
-title: Color
-description: Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
-group: customize
-toc: true
----
-
-## Theme colors
-
-We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap's `scss/_variables.scss` file.
-
-<div class="row">
-  {{< theme-colors.inline >}}
-  {{- range (index $.Site.Data "theme-colors") }}
-    <div class="col-md-4">
-      <div class="p-3 mb-3 bg-{{ .name }} {{ if .contrast_color }}text-{{ .contrast_color }}{{ else }}text-white{{ end }}">{{ .name | title }}</div>
-    </div>
-  {{ end -}}
-  {{< /theme-colors.inline >}}
-</div>
-
-All these colors are available as a Sass map, `$theme-colors`.
-
-{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}}
-
-Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors.
-
-## All colors
-
-All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don't create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).
-
-Be sure to monitor contrast ratios as you customize colors. As shown below, we've added three contrast ratios to each of the main colors—one for the swatch's current colors, one for against white, and one for against black.
-
-<div class="row font-monospace">
-  {{< theme-colors.inline >}}
-  {{- range $color := $.Site.Data.colors }}
-    {{- if (and (not (eq $color.name "white")) (not (eq $color.name "gray")) (not (eq $color.name "gray-dark"))) }}
-    <div class="col-md-4 mb-3">
-      <div class="p-3 mb-2 position-relative swatch-{{ $color.name }}">
-        <strong class="d-block">${{ $color.name }}</strong>
-        {{ $color.hex }}
-      </div>
-      {{ range (seq 100 100 900) }}
-      <div class="p-3 bd-{{ $color.name }}-{{ . }}">${{ $color.name }}-{{ . }}</div>
-      {{ end }}
-    </div>
-    {{ end -}}
-  {{ end -}}
-
-  <div class="col-md-4 mb-3">
-    <div class="p-3 mb-2 position-relative swatch-gray-500">
-      <strong class="d-block">$gray-500</strong>
-      #adb5bd
-    </div>
-  {{- range $.Site.Data.grays }}
-    <div class="p-3 bd-gray-{{ .name }}">$gray-{{ .name }}</div>
-  {{ end -}}
-  </div>
-  {{< /theme-colors.inline >}}
-
-  <div class="col-md-4 mb-3">
-    <div class="p-3 mb-2 bd-black text-white">
-      <strong class="d-block">$black</strong>
-      #000
-    </div>
-    <div class="p-3 mb-2 bd-white border">
-      <strong class="d-block">$white</strong>
-      #fff
-    </div>
-  </div>
-</div>
-
-### Notes on Sass
-
-Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., `$blue-500`) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass's `mix()` color function.
-
-Using `mix()` is not the same as `lighten()` and `darken()`—the former blends the specified color with white or black, while the latter only adjusts the lightness value of each color. The result is a much more complete suite of colors, as [shown in this CodePen demo](https://codepen.io/emdeoh/pen/zYOQOPB).
-
-Our `tint-color()` and `shade-color()` functions use `mix()` alongside our `$theme-color-interval` variable, which specifies a stepped percentage value for each mixed color we produce. See the `scss/_functions.scss` and `scss/_variables.scss` files for the full source code.
-
-## Color Sass maps
-
-Bootstrap's source Sass files include three maps to help you quickly and easily loop over a list of colors and their hex values.
-
-- `$colors` lists all our available base (`500`) colors
-- `$theme-colors` lists all semantically named theme colors (shown below)
-- `$grays` lists all tints and shades of gray
-
-Within `scss/_variables.scss`, you'll find Bootstrap's color variables and Sass map. Here's an example of the `$colors` Sass map:
-
-{{< scss-docs name="colors-map" file="scss/_variables.scss" >}}
-
-Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map.
-
-### Example
-
-Here's how you can use these in your Sass:
-
-```scss
-.alpha { color: $purple; }
-.beta {
-  color: $yellow-300;
-  background-color: $indigo-900;
-}
-```
-
-[Color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utility classes are also available for setting `color` and `background-color` using the `500` color values.
-
-## Generating utilities
-
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.1.0</small>
-
-Bootstrap doesn't include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]({{< docsref "/utilities/api" >}}) and our extended Sass maps added in v5.1.0.
-
-1. To start, make sure you've imported our functions, variables, mixins, and utilities.
-2. Use our `map-merge-multiple()` function to quickly merge multiple Sass maps together in a new map.
-3. Merge this new combined map to extend any utility with a `{color}-{level}` class name.
-
-Here's an example that generates text color utilities (e.g., `.text-purple-500`) using the above steps.
-
-```scss
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
-
-$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
-
-$utilities: map-merge(
-  $utilities,
-  (
-    "color": map-merge(
-      map-get($utilities, "color"),
-      (
-        values: map-merge(
-          map-get(map-get($utilities, "color"), "values"),
-          (
-            $all-colors
-          ),
-        ),
-      ),
-    ),
-  )
-);
-
-@import "bootstrap/scss/utilities/api";
-```
-
-This will generate new `.text-{color}-{level}` utilities for every color and level. You can do the same for any other utility and property as well.
diff --git a/site/content/docs/5.1/customize/css-variables.md b/site/content/docs/5.1/customize/css-variables.md
deleted file mode 100644
index 079f9ad23..000000000
--- a/site/content/docs/5.1/customize/css-variables.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-layout: docs
-title: CSS variables
-description: Use Bootstrap's CSS custom properties for fast and forward-looking design and development.
-group: customize
-toc: true
----
-
-Bootstrap includes many [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in its compiled CSS for real-time customization without the need to recompile Sass. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser's inspector, a code sandbox, or general prototyping.
-
-**All our custom properties are prefixed with `bs-`** to avoid conflicts with third party CSS.
-
-## Root variables
-
-Here are the variables we include (note that the `:root` is required) that can be accessed anywhere Bootstrap's CSS is loaded. They're located in our `_root.scss` file and included in our compiled dist files.
-
-```css
-{{< root.inline >}}
-{{- $css := readFile "dist/css/bootstrap.css" -}}
-{{- $match := findRE ":root {([^}]*)}" $css 1 -}}
-
-{{- if (eq (len $match) 0) -}}
-{{- errorf "Got no matches for :root in %q!" $.Page.Path -}}
-{{- end -}}
-
-{{- index $match 0 -}}
-
-{{< /root.inline >}}
-```
-
-## Component variables
-
-We're also beginning to make use of custom properties as local variables for various components. This way we can reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation.
-
-Have a look at our table documentation for some [insight into how we're using CSS variables]({{< docsref "/content/tables#how-do-the-variants-and-accented-tables-work" >}}).
-
-We're also using CSS variables across our grids—primarily for gutters—with more component usage coming in the future.
-
-## Examples
-
-CSS variables offer similar flexibility to Sass's variables, but without the need for compilation before being served to the browser. For example, here we're resetting our page's font and link styles with CSS variables.
-
-```css
-body {
-  font: 1rem/1.5 var(--bs-font-sans-serif);
-}
-a {
-  color: var(--bs-blue);
-}
-```
-
-## Grid breakpoints
-
-While we include our grid breakpoints as CSS variables (except for `xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the mean time, you can use these variables in other CSS situations, as well as in your JavaScript.
diff --git a/site/content/docs/5.1/examples/.stylelintrc b/site/content/docs/5.1/examples/.stylelintrc
deleted file mode 100644
index dc76dedbd..000000000
--- a/site/content/docs/5.1/examples/.stylelintrc
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "extends": [
-    "stylelint-config-twbs-bootstrap/css"
-  ],
-  "rules": {
-    "at-rule-no-vendor-prefix": null,
-    "comment-empty-line-before": null,
-    "media-feature-name-no-vendor-prefix": null,
-    "property-blacklist": null,
-    "property-no-vendor-prefix": null,
-    "selector-no-qualifying-type": null,
-    "selector-no-vendor-prefix": null,
-    "value-no-vendor-prefix": null
-  }
-}
diff --git a/site/content/docs/5.1/examples/_index.md b/site/content/docs/5.1/examples/_index.md
deleted file mode 100644
index 3d5bfab2f..000000000
--- a/site/content/docs/5.1/examples/_index.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-layout: single
-title: Examples
-description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
-aliases: "/examples/"
----
-
-{{< list-examples.inline >}}
-{{ range $entry := $.Site.Data.examples -}}
-  <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
-  <p>{{ $entry.description }}</p>
-  {{ if eq $entry.category "RTL" -}}
-    <div class="bd-callout bd-callout-warning">
-      <p>The RTL feature is still <strong>experimental</strong> and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? <a href="{{ $.Site.Params.repo }}/issues/new">Open an issue</a>, we'd love to get your insights.</p>
-    </div>
-  {{ end -}}
-
-  {{ range $i, $example := $entry.examples -}}
-    {{- $len := len $entry.examples -}}
-    {{ if (eq $i 0) }}<div class="row">{{ end }}
-      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
-        <a class="d-block" href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}>
-          <img class="img-thumbnail mb-3" srcset="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png,
-                                                  /docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}@2x.png 2x"
-                                          src="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png"
-                                          alt=""
-                                          width="480" height="300"
-                                          loading="lazy">
-          <h3 class="h5 mb-1">{{ $example.name }}</h3>
-        </a>
-        <p class="text-muted">{{ $example.description }}</p>
-      </div>
-    {{ if (eq (add $i 1) $len) }}</div>{{ end }}
-  {{ end -}}
-{{ end -}}
-{{< /list-examples.inline >}}
diff --git a/site/content/docs/5.1/examples/blog/blog.css b/site/content/docs/5.1/examples/blog/blog.css
deleted file mode 100644
index 437a540f6..000000000
--- a/site/content/docs/5.1/examples/blog/blog.css
+++ /dev/null
@@ -1,103 +0,0 @@
-/* stylelint-disable selector-list-comma-newline-after */
-
-.blog-header {
-  line-height: 1;
-  border-bottom: 1px solid #e5e5e5;
-}
-
-.blog-header-logo {
-  font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
-  font-size: 2.25rem;
-}
-
-.blog-header-logo:hover {
-  text-decoration: none;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
-}
-
-.display-4 {
-  font-size: 2.5rem;
-}
-@media (min-width: 768px) {
-  .display-4 {
-    font-size: 3rem;
-  }
-}
-
-.nav-scroller {
-  position: relative;
-  z-index: 2;
-  height: 2.75rem;
-  overflow-y: hidden;
-}
-
-.nav-scroller .nav {
-  display: flex;
-  flex-wrap: nowrap;
-  padding-bottom: 1rem;
-  margin-top: -1px;
-  overflow-x: auto;
-  text-align: center;
-  white-space: nowrap;
-  -webkit-overflow-scrolling: touch;
-}
-
-.nav-scroller .nav-link {
-  padding-top: .75rem;
-  padding-bottom: .75rem;
-  font-size: .875rem;
-}
-
-.card-img-right {
-  height: 100%;
-  border-radius: 0 3px 3px 0;
-}
-
-.flex-auto {
-  flex: 0 0 auto;
-}
-
-.h-250 { height: 250px; }
-@media (min-width: 768px) {
-  .h-md-250 { height: 250px; }
-}
-
-/* Pagination */
-.blog-pagination {
-  margin-bottom: 4rem;
-}
-.blog-pagination > .btn {
-  border-radius: 2rem;
-}
-
-/*
- * Blog posts
- */
-.blog-post {
-  margin-bottom: 4rem;
-}
-.blog-post-title {
-  margin-bottom: .25rem;
-  font-size: 2.5rem;
-}
-.blog-post-meta {
-  margin-bottom: 1.25rem;
-  color: #727272;
-}
-
-/*
- * Footer
- */
-.blog-footer {
-  padding: 2.5rem 0;
-  color: #727272;
-  text-align: center;
-  background-color: #f9f9f9;
-  border-top: .05rem solid #e5e5e5;
-}
-.blog-footer p:last-child {
-  margin-bottom: 0;
-}
diff --git a/site/content/docs/5.1/examples/blog/blog.rtl.css b/site/content/docs/5.1/examples/blog/blog.rtl.css
deleted file mode 100644
index 35eac731f..000000000
--- a/site/content/docs/5.1/examples/blog/blog.rtl.css
+++ /dev/null
@@ -1,103 +0,0 @@
-/* stylelint-disable selector-list-comma-newline-after */
-
-.blog-header {
-  line-height: 1;
-  border-bottom: 1px solid #e5e5e5;
-}
-
-.blog-header-logo {
-  font-family: Amiri, Georgia, "Times New Roman", serif;
-  font-size: 2.25rem;
-}
-
-.blog-header-logo:hover {
-  text-decoration: none;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: Amiri, Georgia, "Times New Roman", serif;
-}
-
-.display-4 {
-  font-size: 2.5rem;
-}
-@media (min-width: 768px) {
-  .display-4 {
-    font-size: 3rem;
-  }
-}
-
-.nav-scroller {
-  position: relative;
-  z-index: 2;
-  height: 2.75rem;
-  overflow-y: hidden;
-}
-
-.nav-scroller .nav {
-  display: flex;
-  flex-wrap: nowrap;
-  padding-bottom: 1rem;
-  margin-top: -1px;
-  overflow-x: auto;
-  text-align: center;
-  white-space: nowrap;
-  -webkit-overflow-scrolling: touch;
-}
-
-.nav-scroller .nav-link {
-  padding-top: .75rem;
-  padding-bottom: .75rem;
-  font-size: .875rem;
-}
-
-.card-img-right {
-  height: 100%;
-  border-radius: 3px 0 0 3px;
-}
-
-.flex-auto {
-  flex: 0 0 auto;
-}
-
-.h-250 { height: 250px; }
-@media (min-width: 768px) {
-  .h-md-250 { height: 250px; }
-}
-
-/* Pagination */
-.blog-pagination {
-  margin-bottom: 4rem;
-}
-.blog-pagination > .btn {
-  border-radius: 2rem;
-}
-
-/*
- * Blog posts
- */
-.blog-post {
-  margin-bottom: 4rem;
-}
-.blog-post-title {
-  margin-bottom: .25rem;
-  font-size: 2.5rem;
-}
-.blog-post-meta {
-  margin-bottom: 1.25rem;
-  color: #727272;
-}
-
-/*
- * Footer
- */
-.blog-footer {
-  padding: 2.5rem 0;
-  color: #727272;
-  text-align: center;
-  background-color: #f9f9f9;
-  border-top: .05rem solid #e5e5e5;
-}
-.blog-footer p:last-child {
-  margin-bottom: 0;
-}
diff --git a/site/content/docs/5.1/examples/checkout/form-validation.js b/site/content/docs/5.1/examples/checkout/form-validation.js
deleted file mode 100644
index f8fd583de..000000000
--- a/site/content/docs/5.1/examples/checkout/form-validation.js
+++ /dev/null
@@ -1,20 +0,0 @@
-// Example starter JavaScript for disabling form submissions if there are invalid fields
-(function () {
-  'use strict'
-
-  // Fetch all the forms we want to apply custom Bootstrap validation styles to
-  var forms = document.querySelectorAll('.needs-validation')
-
-  // Loop over them and prevent submission
-  Array.prototype.slice.call(forms)
-    .forEach(function (form) {
-      form.addEventListener('submit', function (event) {
-        if (!form.checkValidity()) {
-          event.preventDefault()
-          event.stopPropagation()
-        }
-
-        form.classList.add('was-validated')
-      }, false)
-    })
-})()
diff --git a/site/content/docs/5.1/examples/dashboard-rtl/index.html b/site/content/docs/5.1/examples/dashboard-rtl/index.html
deleted file mode 100644
index 19db4f3b4..000000000
--- a/site/content/docs/5.1/examples/dashboard-rtl/index.html
+++ /dev/null
@@ -1,253 +0,0 @@
----
-layout: examples
-title: قالب لوحة القيادة
-direction: rtl
-extra_css:
-  - "../dashboard/dashboard.rtl.css"
-extra_js:
-  - src: "https://cdn.jsdelivr.net/npm/[email protected]/dist/feather.min.js"
-    integrity: "sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE"
-  - src: "https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"
-    integrity: "sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha"
-  - src: "dashboard.js"
----
-
-<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
-  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">اسم الشركة</a>
-  <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="عرض/إخفاء لوحة التنقل">
-    <span class="navbar-toggler-icon"></span>
-  </button>
-  <input class="form-control form-control-dark w-100" type="text" placeholder="بحث" aria-label="بحث">
-  <div class="navbar-nav">
-    <div class="nav-item text-nowrap">
-      <a class="nav-link px-3" href="#">تسجيل الخروج</a>
-    </div>
-  </div>
-</header>
-
-<div class="container-fluid">
-  <div class="row">
-    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
-      <div class="position-sticky pt-3">
-        <ul class="nav flex-column">
-          <li class="nav-item">
-            <a class="nav-link active" aria-current="page" href="#">
-              <span data-feather="home"></span>
-              لوحة القيادة
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="file"></span>
-              الطلبات
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="shopping-cart"></span>
-              المنتجات
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="users"></span>
-              الزبائن
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="bar-chart-2"></span>
-              التقارير
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="layers"></span>
-              التكاملات
-            </a>
-          </li>
-        </ul>
-
-        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
-          <span>التقارير المحفوظة</span>
-          <a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
-            <span data-feather="plus-circle"></span>
-          </a>
-        </h6>
-        <ul class="nav flex-column mb-2">
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="file-text"></span>
-              الشهر الحالي
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="file-text"></span>
-              الربع الأخير
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="file-text"></span>
-              التفاعل الإجتماعي
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="file-text"></span>
-              مبيعات نهاية العام
-            </a>
-          </li>
-        </ul>
-      </div>
-    </nav>
-
-    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
-      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
-        <h1 class="h2">لوحة القيادة</h1>
-        <div class="btn-toolbar mb-2 mb-md-0">
-          <div class="btn-group me-2">
-            <button type="button" class="btn btn-sm btn-outline-secondary">مشاركة</button>
-            <button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button>
-          </div>
-          <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
-            <span data-feather="calendar"></span>
-            هذا الأسبوع
-          </button>
-        </div>
-      </div>
-
-      <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
-
-      <h2>عنوان القسم</h2>
-      <div class="table-responsive">
-        <table class="table table-striped table-sm">
-          <thead>
-            <tr>
-              <th scope="col">#</th>
-              <th scope="col">عنوان</th>
-              <th scope="col">عنوان</th>
-              <th scope="col">عنوان</th>
-              <th scope="col">عنوان</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>1,001</td>
-              <td>بيانات</td>
-              <td>عشوائية</td>
-              <td>تثري</td>
-              <td>الجدول</td>
-            </tr>
-            <tr>
-              <td>1,002</td>
-              <td>تثري</td>
-              <td>مبهة</td>
-              <td>تصميم</td>
-              <td>تنسيق</td>
-            </tr>
-            <tr>
-              <td>1,003</td>
-              <td>عشوائية</td>
-              <td>غنية</td>
-              <td>قيمة</td>
-              <td>مفيدة</td>
-            </tr>
-            <tr>
-              <td>1,003</td>
-              <td>معلومات</td>
-              <td>تثري</td>
-              <td>توضيحية</td>
-              <td>عشوائية</td>
-            </tr>
-            <tr>
-              <td>1,004</td>
-              <td>الجدول</td>
-              <td>بيانات</td>
-              <td>تنسيق</td>
-              <td>قيمة</td>
-            </tr>
-            <tr>
-              <td>1,005</td>
-              <td>قيمة</td>
-              <td>مبهة</td>
-              <td>الجدول</td>
-              <td>تثري</td>
-            </tr>
-            <tr>
-              <td>1,006</td>
-              <td>قيمة</td>
-              <td>توضيحية</td>
-              <td>غنية</td>
-              <td>عشوائية</td>
-            </tr>
-            <tr>
-              <td>1,007</td>
-              <td>تثري</td>
-              <td>مفيدة</td>
-              <td>معلومات</td>
-              <td>مبهة</td>
-            </tr>
-            <tr>
-              <td>1,008</td>
-              <td>بيانات</td>
-              <td>عشوائية</td>
-              <td>تثري</td>
-              <td>الجدول</td>
-            </tr>
-            <tr>
-              <td>1,009</td>
-              <td>تثري</td>
-              <td>مبهة</td>
-              <td>تصميم</td>
-              <td>تنسيق</td>
-            </tr>
-            <tr>
-              <td>1,010</td>
-              <td>عشوائية</td>
-              <td>غنية</td>
-              <td>قيمة</td>
-              <td>مفيدة</td>
-            </tr>
-            <tr>
-              <td>1,011</td>
-              <td>معلومات</td>
-              <td>تثري</td>
-              <td>توضيحية</td>
-              <td>عشوائية</td>
-            </tr>
-            <tr>
-              <td>1,012</td>
-              <td>الجدول</td>
-              <td>تثري</td>
-              <td>تنسيق</td>
-              <td>قيمة</td>
-            </tr>
-            <tr>
-              <td>1,013</td>
-              <td>قيمة</td>
-              <td>مبهة</td>
-              <td>الجدول</td>
-              <td>تصميم</td>
-            </tr>
-            <tr>
-              <td>1,014</td>
-              <td>قيمة</td>
-              <td>توضيحية</td>
-              <td>غنية</td>
-              <td>عشوائية</td>
-            </tr>
-            <tr>
-              <td>1,015</td>
-              <td>بيانات</td>
-              <td>مفيدة</td>
-              <td>معلومات</td>
-              <td>الجدول</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </main>
-  </div>
-</div>
diff --git a/site/content/docs/5.1/examples/dashboard/dashboard.css b/site/content/docs/5.1/examples/dashboard/dashboard.css
deleted file mode 100644
index e1099fbb3..000000000
--- a/site/content/docs/5.1/examples/dashboard/dashboard.css
+++ /dev/null
@@ -1,100 +0,0 @@
-body {
-  font-size: .875rem;
-}
-
-.feather {
-  width: 16px;
-  height: 16px;
-  vertical-align: text-bottom;
-}
-
-/*
- * Sidebar
- */
-
-.sidebar {
-  position: fixed;
-  top: 0;
-  /* rtl:raw:
-  right: 0;
-  */
-  bottom: 0;
-  /* rtl:remove */
-  left: 0;
-  z-index: 100; /* Behind the navbar */
-  padding: 48px 0 0; /* Height of navbar */
-  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
-}
-
-@media (max-width: 767.98px) {
-  .sidebar {
-    top: 5rem;
-  }
-}
-
-.sidebar-sticky {
-  position: relative;
-  top: 0;
-  height: calc(100vh - 48px);
-  padding-top: .5rem;
-  overflow-x: hidden;
-  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
-}
-
-.sidebar .nav-link {
-  font-weight: 500;
-  color: #333;
-}
-
-.sidebar .nav-link .feather {
-  margin-right: 4px;
-  color: #727272;
-}
-
-.sidebar .nav-link.active {
-  color: #2470dc;
-}
-
-.sidebar .nav-link:hover .feather,
-.sidebar .nav-link.active .feather {
-  color: inherit;
-}
-
-.sidebar-heading {
-  font-size: .75rem;
-  text-transform: uppercase;
-}
-
-/*
- * Navbar
- */
-
-.navbar-brand {
-  padding-top: .75rem;
-  padding-bottom: .75rem;
-  font-size: 1rem;
-  background-color: rgba(0, 0, 0, .25);
-  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
-}
-
-.navbar .navbar-toggler {
-  top: .25rem;
-  right: 1rem;
-}
-
-.navbar .form-control {
-  padding: .75rem 1rem;
-  border-width: 0;
-  border-radius: 0;
-}
-
-.form-control-dark {
-  color: #fff;
-  background-color: rgba(255, 255, 255, .1);
-  border-color: rgba(255, 255, 255, .1);
-}
-
-.form-control-dark:focus {
-  border-color: transparent;
-  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
-}
diff --git a/site/content/docs/5.1/examples/dashboard/dashboard.rtl.css b/site/content/docs/5.1/examples/dashboard/dashboard.rtl.css
deleted file mode 100644
index a88226ecf..000000000
--- a/site/content/docs/5.1/examples/dashboard/dashboard.rtl.css
+++ /dev/null
@@ -1,96 +0,0 @@
-body {
-  font-size: .875rem;
-}
-
-.feather {
-  width: 16px;
-  height: 16px;
-  vertical-align: text-bottom;
-}
-
-/*
- * Sidebar
- */
-
-.sidebar {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 100; /* Behind the navbar */
-  padding: 48px 0 0; /* Height of navbar */
-  box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1);
-}
-
-@media (max-width: 767.98px) {
-  .sidebar {
-    top: 5rem;
-  }
-}
-
-.sidebar-sticky {
-  position: relative;
-  top: 0;
-  height: calc(100vh - 48px);
-  padding-top: .5rem;
-  overflow-x: hidden;
-  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
-}
-
-.sidebar .nav-link {
-  font-weight: 500;
-  color: #333;
-}
-
-.sidebar .nav-link .feather {
-  margin-left: 4px;
-  color: #727272;
-}
-
-.sidebar .nav-link.active {
-  color: #2470dc;
-}
-
-.sidebar .nav-link:hover .feather,
-.sidebar .nav-link.active .feather {
-  color: inherit;
-}
-
-.sidebar-heading {
-  font-size: .75rem;
-  text-transform: uppercase;
-}
-
-/*
- * Navbar
- */
-
-.navbar-brand {
-  padding-top: .75rem;
-  padding-bottom: .75rem;
-  font-size: 1rem;
-  background-color: rgba(0, 0, 0, .25);
-  box-shadow: inset 1px 0 0 rgba(0, 0, 0, .25);
-}
-
-.navbar .navbar-toggler {
-  top: .25rem;
-  left: 1rem;
-}
-
-.navbar .form-control {
-  padding: .75rem 1rem;
-  border-width: 0;
-  border-radius: 0;
-}
-
-.form-control-dark {
-  color: #fff;
-  background-color: rgba(255, 255, 255, .1);
-  border-color: rgba(255, 255, 255, .1);
-}
-
-.form-control-dark:focus {
-  border-color: transparent;
-  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
-}
diff --git a/site/content/docs/5.1/examples/dashboard/index.html b/site/content/docs/5.1/examples/dashboard/index.html
deleted file mode 100644
index 04c187dbc..000000000
--- a/site/content/docs/5.1/examples/dashboard/index.html
+++ /dev/null
@@ -1,252 +0,0 @@
----
-layout: examples
-title: Dashboard Template
-extra_css:
-  - "dashboard.css"
-extra_js:
-  - src: "https://cdn.jsdelivr.net/npm/[email protected]/dist/feather.min.js"
-    integrity: "sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE"
-  - src: "https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"
-    integrity: "sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha"
-  - src: "dashboard.js"
----
-
-<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
-  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>
-  <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-  </button>
-  <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
-  <div class="navbar-nav">
-    <div class="nav-item text-nowrap">
-      <a class="nav-link px-3" href="#">Sign out</a>
-    </div>
-  </div>
-</header>
-
-<div class="container-fluid">
-  <div class="row">
-    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
-      <div class="position-sticky pt-3">
-        <ul class="nav flex-column">
-          <li class="nav-item">
-            <a class="nav-link active" aria-current="page" href="#">
-              <span data-feather="home"></span>
-              Dashboard
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="file"></span>
-              Orders
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="shopping-cart"></span>
-              Products
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="users"></span>
-              Customers
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="bar-chart-2"></span>
-              Reports
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="layers"></span>
-              Integrations
-            </a>
-          </li>
-        </ul>
-
-        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
-          <span>Saved reports</span>
-          <a class="link-secondary" href="#" aria-label="Add a new report">
-            <span data-feather="plus-circle"></span>
-          </a>
-        </h6>
-        <ul class="nav flex-column mb-2">
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="file-text"></span>
-              Current month
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="file-text"></span>
-              Last quarter
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="file-text"></span>
-              Social engagement
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              <span data-feather="file-text"></span>
-              Year-end sale
-            </a>
-          </li>
-        </ul>
-      </div>
-    </nav>
-
-    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
-      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
-        <h1 class="h2">Dashboard</h1>
-        <div class="btn-toolbar mb-2 mb-md-0">
-          <div class="btn-group me-2">
-            <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
-            <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
-          </div>
-          <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
-            <span data-feather="calendar"></span>
-            This week
-          </button>
-        </div>
-      </div>
-
-      <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
-
-      <h2>Section title</h2>
-      <div class="table-responsive">
-        <table class="table table-striped table-sm">
-          <thead>
-            <tr>
-              <th scope="col">#</th>
-              <th scope="col">Header</th>
-              <th scope="col">Header</th>
-              <th scope="col">Header</th>
-              <th scope="col">Header</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>1,001</td>
-              <td>random</td>
-              <td>data</td>
-              <td>placeholder</td>
-              <td>text</td>
-            </tr>
-            <tr>
-              <td>1,002</td>
-              <td>placeholder</td>
-              <td>irrelevant</td>
-              <td>visual</td>
-              <td>layout</td>
-            </tr>
-            <tr>
-              <td>1,003</td>
-              <td>data</td>
-              <td>rich</td>
-              <td>dashboard</td>
-              <td>tabular</td>
-            </tr>
-            <tr>
-              <td>1,003</td>
-              <td>information</td>
-              <td>placeholder</td>
-              <td>illustrative</td>
-              <td>data</td>
-            </tr>
-            <tr>
-              <td>1,004</td>
-              <td>text</td>
-              <td>random</td>
-              <td>layout</td>
-              <td>dashboard</td>
-            </tr>
-            <tr>
-              <td>1,005</td>
-              <td>dashboard</td>
-              <td>irrelevant</td>
-              <td>text</td>
-              <td>placeholder</td>
-            </tr>
-            <tr>
-              <td>1,006</td>
-              <td>dashboard</td>
-              <td>illustrative</td>
-              <td>rich</td>
-              <td>data</td>
-            </tr>
-            <tr>
-              <td>1,007</td>
-              <td>placeholder</td>
-              <td>tabular</td>
-              <td>information</td>
-              <td>irrelevant</td>
-            </tr>
-            <tr>
-              <td>1,008</td>
-              <td>random</td>
-              <td>data</td>
-              <td>placeholder</td>
-              <td>text</td>
-            </tr>
-            <tr>
-              <td>1,009</td>
-              <td>placeholder</td>
-              <td>irrelevant</td>
-              <td>visual</td>
-              <td>layout</td>
-            </tr>
-            <tr>
-              <td>1,010</td>
-              <td>data</td>
-              <td>rich</td>
-              <td>dashboard</td>
-              <td>tabular</td>
-            </tr>
-            <tr>
-              <td>1,011</td>
-              <td>information</td>
-              <td>placeholder</td>
-              <td>illustrative</td>
-              <td>data</td>
-            </tr>
-            <tr>
-              <td>1,012</td>
-              <td>text</td>
-              <td>placeholder</td>
-              <td>layout</td>
-              <td>dashboard</td>
-            </tr>
-            <tr>
-              <td>1,013</td>
-              <td>dashboard</td>
-              <td>irrelevant</td>
-              <td>text</td>
-              <td>visual</td>
-            </tr>
-            <tr>
-              <td>1,014</td>
-              <td>dashboard</td>
-              <td>illustrative</td>
-              <td>rich</td>
-              <td>data</td>
-            </tr>
-            <tr>
-              <td>1,015</td>
-              <td>random</td>
-              <td>tabular</td>
-              <td>information</td>
-              <td>text</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </main>
-  </div>
-</div>
diff --git a/site/content/docs/5.1/examples/dropdowns/dropdowns.css b/site/content/docs/5.1/examples/dropdowns/dropdowns.css
deleted file mode 100644
index 4341c59ea..000000000
--- a/site/content/docs/5.1/examples/dropdowns/dropdowns.css
+++ /dev/null
@@ -1,89 +0,0 @@
-.b-example-divider {
-  height: 3rem;
-  background-color: rgba(0, 0, 0, .1);
-  border: solid rgba(0, 0, 0, .15);
-  border-width: 1px 0;
-  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
-}
-
-.bi {
-  vertical-align: -.125em;
-  fill: currentColor;
-}
-
-.dropdown-menu {
-  position: static;
-  display: block;
-  width: auto;
-  margin: 4rem auto;
-}
-
-.dropdown-menu-macos {
-  display: grid;
-  gap: .25rem;
-  padding: .5rem;
-  border-radius: .5rem;
-}
-.dropdown-menu-macos .dropdown-item {
-  border-radius: .25rem;
-}
-
-.dropdown-item-danger {
-  color: var(--bs-red);
-}
-.dropdown-item-danger:hover,
-.dropdown-item-danger:focus {
-  color: #fff;
-  background-color: var(--bs-red);
-}
-.dropdown-item-danger.active {
-  background-color: var(--bs-red);
-}
-
-.btn-hover-light {
-  text-align: left;
-  background-color: var(--bs-white);
-  border-radius: .25rem;
-}
-.btn-hover-light:hover,
-.btn-hover-light:focus {
-  color: var(--bs-blue);
-  background-color: var(--bs-light);
-}
-
-.cal-month,
-.cal-days,
-.cal-weekdays {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  align-items: center;
-}
-.cal-month-name {
-  grid-column-start: 2;
-  grid-column-end: 7;
-  text-align: center;
-}
-.cal-weekday,
-.cal-btn {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  height: 3rem;
-  padding: 0;
-}
-.cal-btn:not([disabled]) {
-  font-weight: 500;
-}
-.cal-btn:hover,
-.cal-btn:focus {
-  background-color: rgba(0, 0, 0, .05);
-}
-.cal-btn[disabled] {
-  opacity: .5;
-}
-
-.form-control-dark {
-  background-color: rgba(255, 255, 255, .05);
-  border-color: rgba(255, 255, 255, .15);
-}
diff --git a/site/content/docs/5.1/examples/dropdowns/index.html b/site/content/docs/5.1/examples/dropdowns/index.html
deleted file mode 100644
index 5296d1507..000000000
--- a/site/content/docs/5.1/examples/dropdowns/index.html
+++ /dev/null
@@ -1,339 +0,0 @@
----
-layout: examples
-title: Dropdowns
-extra_css:
-  - "dropdowns.css"
-body_class: ""
----
-
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-  <symbol id="bootstrap" viewBox="0 0 118 94">
-    <title>Bootstrap</title>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
-  </symbol>
-
-  <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
-    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
-  </symbol>
-
-  <symbol id="check2" viewBox="0 0 16 16">
-    <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
-  </symbol>
-
-  <symbol id="check2-circle" viewBox="0 0 16 16">
-    <path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"/>
-    <path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"/>
-  </symbol>
-
-  <symbol id="bookmark-star" viewBox="0 0 16 16">
-    <path d="M7.84 4.1a.178.178 0 0 1 .32 0l.634 1.285a.178.178 0 0 0 .134.098l1.42.206c.145.021.204.2.098.303L9.42 6.993a.178.178 0 0 0-.051.158l.242 1.414a.178.178 0 0 1-.258.187l-1.27-.668a.178.178 0 0 0-.165 0l-1.27.668a.178.178 0 0 1-.257-.187l.242-1.414a.178.178 0 0 0-.05-.158l-1.03-1.001a.178.178 0 0 1 .098-.303l1.42-.206a.178.178 0 0 0 .134-.098L7.84 4.1z"/>
-    <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/>
-  </symbol>
-
-  <symbol id="grid-fill" viewBox="0 0 16 16">
-    <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
-  </symbol>
-
-  <symbol id="stars" viewBox="0 0 16 16">
-    <path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/>
-  </symbol>
-
-  <symbol id="film" viewBox="0 0 16 16">
-    <path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
-  </symbol>
-
-  <symbol id="joystick" viewBox="0 0 16 16">
-    <path d="M10 2a2 2 0 0 1-1.5 1.937v5.087c.863.083 1.5.377 1.5.726 0 .414-.895.75-2 .75s-2-.336-2-.75c0-.35.637-.643 1.5-.726V3.937A2 2 0 1 1 10 2z"/>
-    <path d="M0 9.665v1.717a1 1 0 0 0 .553.894l6.553 3.277a2 2 0 0 0 1.788 0l6.553-3.277a1 1 0 0 0 .553-.894V9.665c0-.1-.06-.19-.152-.23L9.5 6.715v.993l5.227 2.178a.125.125 0 0 1 .001.23l-5.94 2.546a2 2 0 0 1-1.576 0l-5.94-2.546a.125.125 0 0 1 .001-.23L6.5 7.708l-.013-.988L.152 9.435a.25.25 0 0 0-.152.23z"/>
-  </symbol>
-
-  <symbol id="music-note-beamed" viewBox="0 0 16 16">
-    <path d="M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2zm9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2z"/>
-    <path fill-rule="evenodd" d="M14 11V2h1v9h-1zM6 3v10H5V3h1z"/>
-    <path d="M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4V2.905z"/>
-  </symbol>
-
-  <symbol id="files" viewBox="0 0 16 16">
-    <path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"/>
-  </symbol>
-
-  <symbol id="image-fill" viewBox="0 0 16 16">
-    <path d="M.002 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2V3zm1 9v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12zm5-6.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z"/>
-  </symbol>
-
-  <symbol id="trash" viewBox="0 0 16 16">
-    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
-    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
-  </symbol>
-
-  <symbol id="question-circle" viewBox="0 0 16 16">
-    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-    <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
-  </symbol>
-
-  <symbol id="arrow-left-short" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"/>
-  </symbol>
-
-  <symbol id="arrow-right-short" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
-  </symbol>
-</svg>
-
-<div class="d-flex gap-5 justify-content-center" id="dropdownMacos">
-  <ul class="dropdown-menu dropdown-menu-macos mx-0 shadow" style="width: 220px;">
-    <li><a class="dropdown-item active" href="#">Action</a></li>
-    <li><a class="dropdown-item" href="#">Another action</a></li>
-    <li><a class="dropdown-item" href="#">Something else here</a></li>
-    <li><hr class="dropdown-divider"></li>
-    <li><a class="dropdown-item" href="#">Separated link</a></li>
-  </ul>
-  <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-macos mx-0 border-0 shadow" style="width: 220px;">
-    <li><a class="dropdown-item active" href="#">Action</a></li>
-    <li><a class="dropdown-item" href="#">Another action</a></li>
-    <li><a class="dropdown-item" href="#">Something else here</a></li>
-    <li><hr class="dropdown-divider"></li>
-    <li><a class="dropdown-item" href="#">Separated link</a></li>
-  </ul>
-</div>
-
-<div class="b-example-divider"></div>
-
-
-<div class="d-flex gap-5 justify-content-center" id="dropdownFilter">
-  <div class="dropdown-menu pt-0 mx-0 rounded-3 shadow overflow-hidden" style="width: 280px;">
-    <form class="p-2 mb-2 bg-light border-bottom">
-      <input type="search" class="form-control" autocomplete="false" placeholder="Type to filter...">
-    </form>
-    <ul class="list-unstyled mb-0">
-      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-success rounded-circle" style="width: .5em; height: .5em;"></span>
-        Action
-      </a></li>
-      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-primary rounded-circle" style="width: .5em; height: .5em;"></span>
-        Another action
-      </a></li>
-      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-danger rounded-circle" style="width: .5em; height: .5em;"></span>
-        Something else here
-      </a></li>
-      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-info rounded-circle" style="width: .5em; height: .5em;"></span>
-        Separated link
-      </a></li>
-    </ul>
-  </div>
-
-  <div class="dropdown-menu dropdown-menu-dark border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden" style="width: 280px;">
-    <form class="p-2 mb-2 bg-dark border-bottom border-dark">
-      <input type="search" class="form-control form-control-dark" autocomplete="false" placeholder="Type to filter...">
-    </form>
-    <ul class="list-unstyled mb-0">
-      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-success rounded-circle" style="width: .5em; height: .5em;"></span>
-        Action
-      </a></li>
-      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-primary rounded-circle" style="width: .5em; height: .5em;"></span>
-        Another action
-      </a></li>
-      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-danger rounded-circle" style="width: .5em; height: .5em;"></span>
-        Something else here
-      </a></li>
-      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
-        <span class="d-inline-block bg-info rounded-circle" style="width: .5em; height: .5em;"></span>
-        Separated link
-      </a></li>
-    </ul>
-  </div>
-</div>
-
-<div class="b-example-divider"></div>
-
-<div class="d-flex gap-5 justify-content-center" id="dropdownIcons">
-  <ul class="dropdown-menu mx-0 shadow" style="width: 220px;">
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
-        Documents
-      </a>
-    </li>
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg>
-        Photos
-      </a>
-    </li>
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg>
-        Movies
-      </a>
-    </li>
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg>
-        Music
-      </a>
-    </li>
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg>
-        Games
-      </a>
-    </li>
-    <li><hr class="dropdown-divider"></li>
-    <li>
-      <a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg>
-        Trash
-      </a>
-    </li>
-  </ul>
-  <ul class="dropdown-menu dropdown-menu-dark mx-0 border-0 shadow" style="width: 220px;">
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
-        Documents
-      </a>
-    </li>
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg>
-        Photos
-      </a>
-    </li>
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg>
-        Movies
-      </a>
-    </li>
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg>
-        Music
-      </a>
-    </li>
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg>
-        Games
-      </a>
-    </li>
-    <li><hr class="dropdown-divider"></li>
-    <li>
-      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg>
-        Trash
-      </a>
-    </li>
-  </ul>
-</div>
-
-<div class="b-example-divider"></div>
-
-<div class="dropdown-menu p-2 shadow rounded-3" style="width: 340px" id="dropdownCalendar">
-  <div class="d-grid gap-1">
-    <div class="cal">
-      <div class="cal-month">
-        <button class="btn cal-btn" type="button">
-          <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
-        </button>
-        <strong class="cal-month-name">June</strong>
-        <select class="form-select cal-month-name d-none">
-          <option value="January">January</option>
-          <option value="February">February</option>
-          <option value="March">March</option>
-          <option value="April">April</option>
-          <option value="May">May</option>
-          <option selected value="June">June</option>
-          <option value="July">July</option>
-          <option value="August">August</option>
-          <option value="September">September</option>
-          <option value="October">October</option>
-          <option value="November">November</option>
-          <option value="December">December</option>
-        </select>
-        <button class="btn cal-btn" type="button">
-          <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
-        </button>
-      </div>
-      <div class="cal-weekdays text-muted">
-        <div class="cal-weekday">Sun</div>
-        <div class="cal-weekday">Mon</div>
-        <div class="cal-weekday">Tue</div>
-        <div class="cal-weekday">Wed</div>
-        <div class="cal-weekday">Thu</div>
-        <div class="cal-weekday">Fri</div>
-        <div class="cal-weekday">Sat</div>
-      </div>
-      <div class="cal-days">
-        <button class="btn cal-btn" disabled type="button">30</button>
-        <button class="btn cal-btn" disabled type="button">31</button>
-
-        <button class="btn cal-btn" type="button">1</button>
-        <button class="btn cal-btn" type="button">2</button>
-        <button class="btn cal-btn" type="button">3</button>
-        <button class="btn cal-btn" type="button">4</button>
-        <button class="btn cal-btn" type="button">5</button>
-        <button class="btn cal-btn" type="button">6</button>
-        <button class="btn cal-btn" type="button">7</button>
-
-        <button class="btn cal-btn" type="button">8</button>
-        <button class="btn cal-btn" type="button">9</button>
-        <button class="btn cal-btn" type="button">10</button>
-        <button class="btn cal-btn" type="button">11</button>
-        <button class="btn cal-btn" type="button">12</button>
-        <button class="btn cal-btn" type="button">13</button>
-        <button class="btn cal-btn" type="button">14</button>
-
-        <button class="btn cal-btn" type="button">15</button>
-        <button class="btn cal-btn" type="button">16</button>
-        <button class="btn cal-btn" type="button">17</button>
-        <button class="btn cal-btn" type="button">18</button>
-        <button class="btn cal-btn" type="button">19</button>
-        <button class="btn cal-btn" type="button">20</button>
-        <button class="btn cal-btn" type="button">21</button>
-
-        <button class="btn cal-btn" type="button">22</button>
-        <button class="btn cal-btn" type="button">23</button>
-        <button class="btn cal-btn" type="button">24</button>
-        <button class="btn cal-btn" type="button">25</button>
-        <button class="btn cal-btn" type="button">26</button>
-        <button class="btn cal-btn" type="button">27</button>
-        <button class="btn cal-btn" type="button">28</button>
-
-        <button class="btn cal-btn" type="button">29</button>
-        <button class="btn cal-btn" type="button">30</button>
-        <button class="btn cal-btn" type="button">31</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="b-example-divider"></div>
-
-<div class="dropdown-menu d-flex align-items-stretch p-3 rounded-3 shadow-lg" style="width: 600px" id="dropdownMega">
-  <nav class="d-grid gap-2 col-8">
-    <a href="#" class="btn btn-hover-light d-flex align-items-center gap-3 py-2 px-3 lh-sm">
-      <svg class="bi" width="32" height="32"><use xlink:href="#image-fill"/></svg>
-      <div>
-        <strong class="d-block">Features</strong>
-        <small>Take a tour through the product</small>
-      </div>
-    </a>
-    <a href="#" class="btn btn-hover-light d-flex align-items-center gap-3 py-2 px-3 lh-sm">
-      <svg class="bi" width="32" height="32"><use xlink:href="#question-circle"/></svg>
-      <div>
-        <strong class="d-block">Support</strong>
-        <small>Get help from our support crew</small>
-      </div>
-    </a>
-  </nav>
-  <div class="col-4">
-    ...
-  </div>
-</div>
\ No newline at end of file
diff --git a/site/content/docs/5.1/examples/features/features.css b/site/content/docs/5.1/examples/features/features.css
deleted file mode 100644
index 33942f7f1..000000000
--- a/site/content/docs/5.1/examples/features/features.css
+++ /dev/null
@@ -1,61 +0,0 @@
-.b-example-divider {
-  height: 3rem;
-  background-color: rgba(0, 0, 0, .1);
-  border: solid rgba(0, 0, 0, .15);
-  border-width: 1px 0;
-  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
-}
-
-.bi {
-  vertical-align: -.125em;
-  fill: currentColor;
-}
-
-.feature-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 4rem;
-  height: 4rem;
-  margin-bottom: 1rem;
-  font-size: 2rem;
-  color: #fff;
-  border-radius: .75rem;
-}
-
-.icon-link {
-  display: inline-flex;
-  align-items: center;
-}
-.icon-link > .bi {
-  margin-top: .125rem;
-  margin-left: .125rem;
-  transition: transform .25s ease-in-out;
-  fill: currentColor;
-}
-.icon-link:hover > .bi {
-  transform: translate(.25rem);
-}
-
-.icon-square {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 3rem;
-  height: 3rem;
-  font-size: 1.5rem;
-  border-radius: .75rem;
-}
-
-.rounded-4 { border-radius: .5rem; }
-.rounded-5 { border-radius: 1rem; }
-
-.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); }
-.text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); }
-.text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }
-
-.card-cover {
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-}
diff --git a/site/content/docs/5.1/examples/footers/footers.css b/site/content/docs/5.1/examples/footers/footers.css
deleted file mode 100644
index 4e826827e..000000000
--- a/site/content/docs/5.1/examples/footers/footers.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.b-example-divider {
-  height: 3rem;
-  background-color: rgba(0, 0, 0, .1);
-  border: solid rgba(0, 0, 0, .15);
-  border-width: 1px 0;
-  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
-}
-
-.bi {
-  vertical-align: -.125em;
-  fill: currentColor;
-}
diff --git a/site/content/docs/5.1/examples/grid/grid.css b/site/content/docs/5.1/examples/grid/grid.css
deleted file mode 100644
index 18e3568b1..000000000
--- a/site/content/docs/5.1/examples/grid/grid.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.themed-grid-col {
-  padding-top: .75rem;
-  padding-bottom: .75rem;
-  background-color: rgba(86, 61, 124, .15);
-  border: 1px solid rgba(86, 61, 124, .2);
-}
-
-.themed-container {
-  padding: .75rem;
-  margin-bottom: 1.5rem;
-  background-color: rgba(0, 123, 255, .15);
-  border: 1px solid rgba(0, 123, 255, .2);
-}
diff --git a/site/content/docs/5.1/examples/headers/headers.css b/site/content/docs/5.1/examples/headers/headers.css
deleted file mode 100644
index 661a74d55..000000000
--- a/site/content/docs/5.1/examples/headers/headers.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.b-example-divider {
-  height: 3rem;
-  background-color: rgba(0, 0, 0, .1);
-  border: solid rgba(0, 0, 0, .15);
-  border-width: 1px 0;
-  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
-}
-
-.form-control-dark {
-  color: #fff;
-  background-color: var(--bs-dark);
-  border-color: var(--bs-gray);
-}
-.form-control-dark:focus {
-  color: #fff;
-  background-color: var(--bs-dark);
-  border-color: #fff;
-  box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
-}
-
-.bi {
-  vertical-align: -.125em;
-  fill: currentColor;
-}
-
-.text-small {
-  font-size: 85%;
-}
-
-.dropdown-toggle {
-  outline: 0;
-}
diff --git a/site/content/docs/5.1/examples/heroes/bootstrap-docs.png b/site/content/docs/5.1/examples/heroes/bootstrap-docs.png
deleted file mode 100644
index 471a9eddf..000000000
--- a/site/content/docs/5.1/examples/heroes/bootstrap-docs.png
+++ /dev/null
diff --git a/site/content/docs/5.1/examples/heroes/heroes.css b/site/content/docs/5.1/examples/heroes/heroes.css
deleted file mode 100644
index 380b70a4a..000000000
--- a/site/content/docs/5.1/examples/heroes/heroes.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.b-example-divider {
-  height: 3rem;
-  background-color: rgba(0, 0, 0, .1);
-  border: solid rgba(0, 0, 0, .15);
-  border-width: 1px 0;
-  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
-}
-
-@media (min-width: 992px) {
-  .rounded-lg-3 { border-radius: .3rem; }
-}
diff --git a/site/content/docs/5.1/examples/list-groups/index.html b/site/content/docs/5.1/examples/list-groups/index.html
deleted file mode 100644
index c16bad944..000000000
--- a/site/content/docs/5.1/examples/list-groups/index.html
+++ /dev/null
@@ -1,186 +0,0 @@
----
-layout: examples
-title: List groups
-extra_css:
-  - "list-groups.css"
-body_class: ""
----
-
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-  <symbol id="bootstrap" viewBox="0 0 118 94">
-    <title>Bootstrap</title>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
-  </symbol>
-
-  <symbol id="calendar-event" viewBox="0 0 16 16">
-    <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
-    <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
-  </symbol>
-
-  <symbol id="alarm" viewBox="0 0 16 16">
-    <path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
-    <path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>
-  </symbol>
-
-  <symbol id="list-check" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
-  </symbol>
-</svg>
-
-<div class="list-group">
-  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
-    <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
-    <div class="d-flex gap-2 w-100 justify-content-between">
-      <div>
-        <h6 class="mb-0">List group item heading</h6>
-        <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
-      </div>
-      <small class="opacity-50 text-nowrap">now</small>
-    </div>
-  </a>
-  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
-    <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
-    <div class="d-flex gap-2 w-100 justify-content-between">
-      <div>
-        <h6 class="mb-0">Another title here</h6>
-        <p class="mb-0 opacity-75">Some placeholder content in a paragraph that goes a little longer so it wraps to a new line.</p>
-      </div>
-      <small class="opacity-50 text-nowrap">3d</small>
-    </div>
-  </a>
-  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
-    <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
-    <div class="d-flex gap-2 w-100 justify-content-between">
-      <div>
-        <h6 class="mb-0">Third heading</h6>
-        <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
-      </div>
-      <small class="opacity-50 text-nowrap">1w</small>
-    </div>
-  </a>
-</div>
-
-<div class="b-example-divider"></div>
-
-<div class="d-flex gap-5 justify-content-center">
-  <div class="list-group mx-0">
-    <label class="list-group-item d-flex gap-2">
-      <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked>
-      <span>
-        First checkbox
-        <small class="d-block text-muted">With support text underneath to add more detail</small>
-      </span>
-    </label>
-    <label class="list-group-item d-flex gap-2">
-      <input class="form-check-input flex-shrink-0" type="checkbox" value="">
-      <span>
-        Second checkbox
-        <small class="d-block text-muted">Some other text goes here</small>
-      </span>
-    </label>
-    <label class="list-group-item d-flex gap-2">
-      <input class="form-check-input flex-shrink-0" type="checkbox" value="">
-      <span>
-        Third checkbox
-        <small class="d-block text-muted">And we end with another snippet of text</small>
-      </span>
-    </label>
-  </div>
-
-  <div class="list-group mx-0">
-    <label class="list-group-item d-flex gap-2">
-      <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios1" value="" checked>
-      <span>
-        First radio
-        <small class="d-block text-muted">With support text underneath to add more detail</small>
-      </span>
-    </label>
-    <label class="list-group-item d-flex gap-2">
-      <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios2" value="">
-      <span>
-        Second radio
-        <small class="d-block text-muted">Some other text goes here</small>
-      </span>
-    </label>
-    <label class="list-group-item d-flex gap-2">
-      <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios3" value="">
-      <span>
-        Third radio
-        <small class="d-block text-muted">And we end with another snippet of text</small>
-      </span>
-    </label>
-  </div>
-</div>
-
-<div class="b-example-divider"></div>
-
-<div class="list-group">
-  <label class="list-group-item d-flex gap-3">
-    <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked style="font-size: 1.375em;">
-    <span class="pt-1 form-checked-content">
-      <strong>Finish sales report</strong>
-      <small class="d-block text-muted">
-        <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
-        1:00–2:00pm
-      </small>
-    </span>
-  </label>
-  <label class="list-group-item d-flex gap-3">
-    <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
-    <span class="pt-1 form-checked-content">
-      <strong>Weekly All Hands</strong>
-      <small class="d-block text-muted">
-        <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
-        2:00–2:30pm
-      </small>
-    </span>
-  </label>
-  <label class="list-group-item d-flex gap-3">
-    <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
-    <span class="pt-1 form-checked-content">
-      <strong>Out of office</strong>
-      <small class="d-block text-muted">
-        <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg>
-        Tomorrow
-      </small>
-    </span>
-  </label>
-  <label class="list-group-item d-flex gap-3 bg-light">
-    <input class="form-check-input form-check-input-placeholder bg-light flex-shrink-0" disabled type="checkbox" value="" style="font-size: 1.375em;">
-    <span class="pt-1 form-checked-content">
-      <span contenteditable="true" class="w-100">Add new task...</span>
-      <small class="d-block text-muted">
-        <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#list-check"/></svg>
-        Choose list...
-      </small>
-    </span>
-  </label>
-</div>
-
-<div class="b-example-divider"></div>
-
-<div class="list-group list-group-checkable">
-  <input class="list-group-item-check" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios1" value="" checked>
-  <label class="list-group-item py-3" for="listGroupCheckableRadios1">
-    First radio
-    <span class="d-block small opacity-50">With support text underneath to add more detail</span>
-  </label>
-
-  <input class="list-group-item-check" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios2" value="">
-  <label class="list-group-item py-3" for="listGroupCheckableRadios2">
-    Second radio
-    <span class="d-block small opacity-50">Some other text goes here</span>
-  </label>
-
-  <input class="list-group-item-check" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios3" value="">
-  <label class="list-group-item py-3" for="listGroupCheckableRadios3">
-    Third radio
-    <span class="d-block small opacity-50">And we end with another snippet of text</span>
-  </label>
-
-  <input class="list-group-item-check" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios4" value="" disabled>
-  <label class="list-group-item py-3" for="listGroupCheckableRadios4">
-    Fourth disabled radio
-    <span class="d-block small opacity-50">This option is disabled</span>
-  </label>
-</div>
\ No newline at end of file
diff --git a/site/content/docs/5.1/examples/list-groups/list-groups.css b/site/content/docs/5.1/examples/list-groups/list-groups.css
deleted file mode 100644
index 11351f87e..000000000
--- a/site/content/docs/5.1/examples/list-groups/list-groups.css
+++ /dev/null
@@ -1,61 +0,0 @@
-.b-example-divider {
-  height: 3rem;
-  background-color: rgba(0, 0, 0, .1);
-  border: solid rgba(0, 0, 0, .15);
-  border-width: 1px 0;
-  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
-}
-
-.bi {
-  vertical-align: -.125em;
-  fill: currentColor;
-}
-
-.opacity-50 { opacity: .5; }
-.opacity-75 { opacity: .75; }
-
-.list-group {
-  width: auto;
-  max-width: 460px;
-  margin: 4rem auto;
-}
-
-.form-check-input:checked + .form-checked-content {
-  opacity: .5;
-}
-
-.form-check-input-placeholder {
-  pointer-events: none;
-  border-style: dashed;
-}
-[contenteditable]:focus {
-  outline: 0;
-}
-
-.list-group-checkable {
-  display: grid;
-  gap: .5rem;
-  border: 0;
-}
-.list-group-checkable .list-group-item {
-  cursor: pointer;
-  border-radius: .5rem;
-}
-.list-group-item-check {
-  position: absolute;
-  clip: rect(0, 0, 0, 0);
-  pointer-events: none;
-}
-.list-group-item-check:hover + .list-group-item {
-  background-color: var(--bs-light);
-}
-.list-group-item-check:checked + .list-group-item {
-  color: #fff;
-  background-color: var(--bs-blue);
-}
-.list-group-item-check[disabled] + .list-group-item,
-.list-group-item-check:disabled + .list-group-item {
-  pointer-events: none;
-  filter: none;
-  opacity: .5;
-}
diff --git a/site/content/docs/5.1/examples/modals/modals.css b/site/content/docs/5.1/examples/modals/modals.css
deleted file mode 100644
index 8fda8212a..000000000
--- a/site/content/docs/5.1/examples/modals/modals.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.b-example-divider {
-  height: 3rem;
-  background-color: rgba(0, 0, 0, .1);
-  border: solid rgba(0, 0, 0, .15);
-  border-width: 1px 0;
-  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
-}
-
-.bi {
-  vertical-align: -.125em;
-  fill: currentColor;
-}
-
-.rounded-4 { border-radius: .5rem; }
-.rounded-5 { border-radius: .75rem; }
-.rounded-6 { border-radius: 1rem; }
-
-.modal-sheet .modal-dialog {
-  width: 380px;
-  transition: bottom .75s ease-in-out;
-}
-.modal-sheet .modal-footer {
-  padding-bottom: 2rem;
-}
-
-.modal-alert .modal-dialog {
-  width: 380px;
-}
-
-.border-right { border-right: 1px solid #eee; }
-
-.modal-tour .modal-dialog {
-  width: 380px;
-}
diff --git a/site/content/docs/5.1/examples/pricing/pricing.css b/site/content/docs/5.1/examples/pricing/pricing.css
deleted file mode 100644
index c7304d10b..000000000
--- a/site/content/docs/5.1/examples/pricing/pricing.css
+++ /dev/null
@@ -1,11 +0,0 @@
-body {
-  background-image: linear-gradient(180deg, #eee, #fff 100px, #fff);
-}
-
-.container {
-  max-width: 960px;
-}
-
-.pricing-header {
-  max-width: 700px;
-}
diff --git a/site/content/docs/5.1/examples/product/index.html b/site/content/docs/5.1/examples/product/index.html
deleted file mode 100644
index 291901efa..000000000
--- a/site/content/docs/5.1/examples/product/index.html
+++ /dev/null
@@ -1,148 +0,0 @@
----
-layout: examples
-title: Product example
-extra_css:
-  - "product.css"
----
-
-<header class="site-header sticky-top py-1">
-  <nav class="container d-flex flex-column flex-md-row justify-content-between">
-    <a class="py-2" href="#" aria-label="Product">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mx-auto" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>
-    </a>
-    <a class="py-2 d-none d-md-inline-block" href="#">Tour</a>
-    <a class="py-2 d-none d-md-inline-block" href="#">Product</a>
-    <a class="py-2 d-none d-md-inline-block" href="#">Features</a>
-    <a class="py-2 d-none d-md-inline-block" href="#">Enterprise</a>
-    <a class="py-2 d-none d-md-inline-block" href="#">Support</a>
-    <a class="py-2 d-none d-md-inline-block" href="#">Pricing</a>
-    <a class="py-2 d-none d-md-inline-block" href="#">Cart</a>
-  </nav>
-</header>
-
-<main>
-  <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
-    <div class="col-md-5 p-lg-5 mx-auto my-5">
-      <h1 class="display-4 fw-normal">Punny headline</h1>
-      <p class="lead fw-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.</p>
-      <a class="btn btn-outline-secondary" href="#">Coming soon</a>
-    </div>
-    <div class="product-device shadow-sm d-none d-md-block"></div>
-    <div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
-  </div>
-
-  <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
-    <div class="bg-dark me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
-      <div class="my-3 py-3">
-        <h2 class="display-5">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
-      </div>
-      <div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
-    </div>
-    <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
-      <div class="my-3 p-3">
-        <h2 class="display-5">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
-      </div>
-      <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
-    </div>
-  </div>
-
-  <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
-    <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
-      <div class="my-3 p-3">
-        <h2 class="display-5">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
-      </div>
-      <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
-    </div>
-    <div class="bg-primary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
-      <div class="my-3 py-3">
-        <h2 class="display-5">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
-      </div>
-      <div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
-    </div>
-  </div>
-
-  <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
-    <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
-      <div class="my-3 p-3">
-        <h2 class="display-5">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
-      </div>
-      <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
-    </div>
-    <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
-      <div class="my-3 py-3">
-        <h2 class="display-5">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
-      </div>
-      <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
-    </div>
-  </div>
-
-  <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
-    <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
-      <div class="my-3 p-3">
-        <h2 class="display-5">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
-      </div>
-      <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
-    </div>
-    <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
-      <div class="my-3 py-3">
-        <h2 class="display-5">Another headline</h2>
-        <p class="lead">And an even wittier subheading.</p>
-      </div>
-      <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
-    </div>
-  </div>
-</main>
-
-<footer class="container py-5">
-  <div class="row">
-    <div class="col-12 col-md">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mb-2" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>
-      <small class="d-block mb-3 text-muted">&copy; 2017–{{< year >}}</small>
-    </div>
-    <div class="col-6 col-md">
-      <h5>Features</h5>
-      <ul class="list-unstyled text-small">
-        <li><a class="link-secondary" href="#">Cool stuff</a></li>
-        <li><a class="link-secondary" href="#">Random feature</a></li>
-        <li><a class="link-secondary" href="#">Team feature</a></li>
-        <li><a class="link-secondary" href="#">Stuff for developers</a></li>
-        <li><a class="link-secondary" href="#">Another one</a></li>
-        <li><a class="link-secondary" href="#">Last time</a></li>
-      </ul>
-    </div>
-    <div class="col-6 col-md">
-      <h5>Resources</h5>
-      <ul class="list-unstyled text-small">
-        <li><a class="link-secondary" href="#">Resource name</a></li>
-        <li><a class="link-secondary" href="#">Resource</a></li>
-        <li><a class="link-secondary" href="#">Another resource</a></li>
-        <li><a class="link-secondary" href="#">Final resource</a></li>
-      </ul>
-    </div>
-    <div class="col-6 col-md">
-      <h5>Resources</h5>
-      <ul class="list-unstyled text-small">
-        <li><a class="link-secondary" href="#">Business</a></li>
-        <li><a class="link-secondary" href="#">Education</a></li>
-        <li><a class="link-secondary" href="#">Government</a></li>
-        <li><a class="link-secondary" href="#">Gaming</a></li>
-      </ul>
-    </div>
-    <div class="col-6 col-md">
-      <h5>About</h5>
-      <ul class="list-unstyled text-small">
-        <li><a class="link-secondary" href="#">Team</a></li>
-        <li><a class="link-secondary" href="#">Locations</a></li>
-        <li><a class="link-secondary" href="#">Privacy</a></li>
-        <li><a class="link-secondary" href="#">Terms</a></li>
-      </ul>
-    </div>
-  </div>
-</footer>
diff --git a/site/content/docs/5.1/examples/sidebars/index.html b/site/content/docs/5.1/examples/sidebars/index.html
deleted file mode 100644
index 4d628f1c0..000000000
--- a/site/content/docs/5.1/examples/sidebars/index.html
+++ /dev/null
@@ -1,391 +0,0 @@
----
-layout: examples
-title: Sidebars
-extra_css:
-  - "sidebars.css"
-extra_js:
-  - src: "sidebars.js"
-body_class: ""
----
-
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-  <symbol id="bootstrap" viewBox="0 0 118 94">
-    <title>Bootstrap</title>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
-  </symbol>
-  <symbol id="home" viewBox="0 0 16 16">
-    <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/>
-  </symbol>
-  <symbol id="speedometer2" viewBox="0 0 16 16">
-    <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
-    <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/>
-  </symbol>
-  <symbol id="table" viewBox="0 0 16 16">
-    <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/>
-  </symbol>
-  <symbol id="people-circle" viewBox="0 0 16 16">
-    <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
-    <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
-  </symbol>
-  <symbol id="grid" viewBox="0 0 16 16">
-    <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
-  </symbol>
-  <symbol id="collection" viewBox="0 0 16 16">
-    <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/>
-  </symbol>
-  <symbol id="calendar3" viewBox="0 0 16 16">
-    <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
-    <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
-  </symbol>
-  <symbol id="chat-quote-fill" viewBox="0 0 16 16">
-    <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/>
-  </symbol>
-  <symbol id="cpu-fill" viewBox="0 0 16 16">
-    <path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
-    <path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/>
-  </symbol>
-  <symbol id="gear-fill" viewBox="0 0 16 16">
-    <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
-  </symbol>
-  <symbol id="speedometer" viewBox="0 0 16 16">
-    <path d="M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
-    <path fill-rule="evenodd" d="M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.945 11.945 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0z"/>
-  </symbol>
-  <symbol id="toggles2" viewBox="0 0 16 16">
-    <path d="M9.465 10H12a2 2 0 1 1 0 4H9.465c.34-.588.535-1.271.535-2 0-.729-.195-1.412-.535-2z"/>
-    <path d="M6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm.535-10a3.975 3.975 0 0 1-.409-1H4a1 1 0 0 1 0-2h2.126c.091-.355.23-.69.41-1H4a2 2 0 1 0 0 4h2.535z"/>
-    <path d="M14 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/>
-  </symbol>
-  <symbol id="tools" viewBox="0 0 16 16">
-    <path d="M1 0L0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
-  </symbol>
-  <symbol id="chevron-right" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
-  </symbol>
-  <symbol id="geo-fill" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/>
-  </symbol>
-</svg>
-
-<main>
-  <h1 class="visually-hidden">Sidebars examples</h1>
-
-  <div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 280px;">
-    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
-      <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
-      <span class="fs-4">Sidebar</span>
-    </a>
-    <hr>
-    <ul class="nav nav-pills flex-column mb-auto">
-      <li class="nav-item">
-        <a href="#" class="nav-link active" aria-current="page">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>
-          Home
-        </a>
-      </li>
-      <li>
-        <a href="#" class="nav-link text-white">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
-          Dashboard
-        </a>
-      </li>
-      <li>
-        <a href="#" class="nav-link text-white">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg>
-          Orders
-        </a>
-      </li>
-      <li>
-        <a href="#" class="nav-link text-white">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
-          Products
-        </a>
-      </li>
-      <li>
-        <a href="#" class="nav-link text-white">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
-          Customers
-        </a>
-      </li>
-    </ul>
-    <hr>
-    <div class="dropdown">
-      <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
-        <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
-        <strong>mdo</strong>
-      </a>
-      <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
-        <li><a class="dropdown-item" href="#">New project...</a></li>
-        <li><a class="dropdown-item" href="#">Settings</a></li>
-        <li><a class="dropdown-item" href="#">Profile</a></li>
-        <li><hr class="dropdown-divider"></li>
-        <li><a class="dropdown-item" href="#">Sign out</a></li>
-      </ul>
-    </div>
-  </div>
-
-  <div class="b-example-divider"></div>
-
-  <div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 280px;">
-    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
-      <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
-      <span class="fs-4">Sidebar</span>
-    </a>
-    <hr>
-    <ul class="nav nav-pills flex-column mb-auto">
-      <li class="nav-item">
-        <a href="#" class="nav-link active" aria-current="page">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>
-          Home
-        </a>
-      </li>
-      <li>
-        <a href="#" class="nav-link link-dark">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
-          Dashboard
-        </a>
-      </li>
-      <li>
-        <a href="#" class="nav-link link-dark">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg>
-          Orders
-        </a>
-      </li>
-      <li>
-        <a href="#" class="nav-link link-dark">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
-          Products
-        </a>
-      </li>
-      <li>
-        <a href="#" class="nav-link link-dark">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
-          Customers
-        </a>
-      </li>
-    </ul>
-    <hr>
-    <div class="dropdown">
-      <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
-        <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
-        <strong>mdo</strong>
-      </a>
-      <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
-        <li><a class="dropdown-item" href="#">New project...</a></li>
-        <li><a class="dropdown-item" href="#">Settings</a></li>
-        <li><a class="dropdown-item" href="#">Profile</a></li>
-        <li><hr class="dropdown-divider"></li>
-        <li><a class="dropdown-item" href="#">Sign out</a></li>
-      </ul>
-    </div>
-  </div>
-
-  <div class="b-example-divider"></div>
-
-  <div class="d-flex flex-column flex-shrink-0 bg-light" style="width: 4.5rem;">
-    <a href="/" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
-      <svg class="bi" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
-      <span class="visually-hidden">Icon-only</span>
-    </a>
-    <ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
-      <li class="nav-item">
-        <a href="#" class="nav-link active py-3 border-bottom" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
-          <svg class="bi" width="24" height="24" role="img" aria-label="Home"><use xlink:href="#home"/></svg>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="nav-link py-3 border-bottom" title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right">
-          <svg class="bi" width="24" height="24" role="img" aria-label="Dashboard"><use xlink:href="#speedometer2"/></svg>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="nav-link py-3 border-bottom" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right">
-          <svg class="bi" width="24" height="24" role="img" aria-label="Orders"><use xlink:href="#table"/></svg>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="nav-link py-3 border-bottom" title="Products" data-bs-toggle="tooltip" data-bs-placement="right">
-          <svg class="bi" width="24" height="24" role="img" aria-label="Products"><use xlink:href="#grid"/></svg>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="nav-link py-3 border-bottom" title="Customers" data-bs-toggle="tooltip" data-bs-placement="right">
-          <svg class="bi" width="24" height="24" role="img" aria-label="Customers"><use xlink:href="#people-circle"/></svg>
-        </a>
-      </li>
-    </ul>
-    <div class="dropdown border-top">
-      <a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" id="dropdownUser3" data-bs-toggle="dropdown" aria-expanded="false">
-        <img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle">
-      </a>
-      <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser3">
-        <li><a class="dropdown-item" href="#">New project...</a></li>
-        <li><a class="dropdown-item" href="#">Settings</a></li>
-        <li><a class="dropdown-item" href="#">Profile</a></li>
-        <li><hr class="dropdown-divider"></li>
-        <li><a class="dropdown-item" href="#">Sign out</a></li>
-      </ul>
-    </div>
-  </div>
-
-  <div class="b-example-divider"></div>
-
-  <div class="flex-shrink-0 p-3 bg-white" style="width: 280px;">
-    <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
-      <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
-      <span class="fs-5 fw-semibold">Collapsible</span>
-    </a>
-    <ul class="list-unstyled ps-0">
-      <li class="mb-1">
-        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true">
-          Home
-        </button>
-        <div class="collapse show" id="home-collapse">
-          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-            <li><a href="#" class="link-dark rounded">Overview</a></li>
-            <li><a href="#" class="link-dark rounded">Updates</a></li>
-            <li><a href="#" class="link-dark rounded">Reports</a></li>
-          </ul>
-        </div>
-      </li>
-      <li class="mb-1">
-        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
-          Dashboard
-        </button>
-        <div class="collapse" id="dashboard-collapse">
-          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-            <li><a href="#" class="link-dark rounded">Overview</a></li>
-            <li><a href="#" class="link-dark rounded">Weekly</a></li>
-            <li><a href="#" class="link-dark rounded">Monthly</a></li>
-            <li><a href="#" class="link-dark rounded">Annually</a></li>
-          </ul>
-        </div>
-      </li>
-      <li class="mb-1">
-        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">
-          Orders
-        </button>
-        <div class="collapse" id="orders-collapse">
-          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-            <li><a href="#" class="link-dark rounded">New</a></li>
-            <li><a href="#" class="link-dark rounded">Processed</a></li>
-            <li><a href="#" class="link-dark rounded">Shipped</a></li>
-            <li><a href="#" class="link-dark rounded">Returned</a></li>
-          </ul>
-        </div>
-      </li>
-      <li class="border-top my-3"></li>
-      <li class="mb-1">
-        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
-          Account
-        </button>
-        <div class="collapse" id="account-collapse">
-          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-            <li><a href="#" class="link-dark rounded">New...</a></li>
-            <li><a href="#" class="link-dark rounded">Profile</a></li>
-            <li><a href="#" class="link-dark rounded">Settings</a></li>
-            <li><a href="#" class="link-dark rounded">Sign out</a></li>
-          </ul>
-        </div>
-      </li>
-    </ul>
-  </div>
-
-  <div class="b-example-divider"></div>
-
-  <div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-white" style="width: 380px;">
-    <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
-      <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
-      <span class="fs-5 fw-semibold">List group</span>
-    </a>
-    <div class="list-group list-group-flush border-bottom scrollarea">
-      <a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true">
-        <div class="d-flex w-100 align-items-center justify-content-between">
-          <strong class="mb-1">List group item heading</strong>
-          <small>Wed</small>
-        </div>
-        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
-      </a>
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
-        <div class="d-flex w-100 align-items-center justify-content-between">
-          <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Tues</small>
-        </div>
-        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
-      </a>
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
-        <div class="d-flex w-100 align-items-center justify-content-between">
-          <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Mon</small>
-        </div>
-        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
-      </a>
-
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true">
-        <div class="d-flex w-100 align-items-center justify-content-between">
-          <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Wed</small>
-        </div>
-        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
-      </a>
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
-        <div class="d-flex w-100 align-items-center justify-content-between">
-          <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Tues</small>
-        </div>
-        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
-      </a>
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
-        <div class="d-flex w-100 align-items-center justify-content-between">
-          <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Mon</small>
-        </div>
-        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
-      </a>
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true">
-        <div class="d-flex w-100 align-items-center justify-content-between">
-          <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Wed</small>
-        </div>
-        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
-      </a>
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
-        <div class="d-flex w-100 align-items-center justify-content-between">
-          <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Tues</small>
-        </div>
-        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
-      </a>
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
-        <div class="d-flex w-100 align-items-center justify-content-between">
-          <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Mon</small>
-        </div>
-        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
-      </a>
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true">
-        <div class="d-flex w-100 align-items-center justify-content-between">
-          <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Wed</small>
-        </div>
-        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
-      </a>
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
-        <div class="d-flex w-100 align-items-center justify-content-between">
-          <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Tues</small>
-        </div>
-        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
-      </a>
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
-        <div class="d-flex w-100 align-items-center justify-content-between">
-          <strong class="mb-1">List group item heading</strong>
-          <small class="text-muted">Mon</small>
-        </div>
-        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
-      </a>
-    </div>
-  </div>
-
-  <div class="b-example-divider"></div>
-</main>
diff --git a/site/content/docs/5.1/examples/sidebars/sidebars.js b/site/content/docs/5.1/examples/sidebars/sidebars.js
deleted file mode 100644
index d00bc0db1..000000000
--- a/site/content/docs/5.1/examples/sidebars/sidebars.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/* global bootstrap: false */
-(function () {
-  'use strict'
-  var tooltipTriggerList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
-  tooltipTriggerList.forEach(function (tooltipTriggerEl) {
-    new bootstrap.Tooltip(tooltipTriggerEl)
-  })
-})()
diff --git a/site/content/docs/5.1/examples/starter-template/index.html b/site/content/docs/5.1/examples/starter-template/index.html
deleted file mode 100644
index 3623ff180..000000000
--- a/site/content/docs/5.1/examples/starter-template/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
----
-layout: examples
-title: Starter Template
-extra_css:
-  - "starter-template.css"
----
-
-<div class="col-lg-8 mx-auto p-3 py-md-5">
-  <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
-    <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
-      <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
-      <span class="fs-4">Starter template</span>
-    </a>
-  </header>
-
-  <main>
-    <h1>Get started with Bootstrap</h1>
-    <p class="fs-5 col-md-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p>
-
-    <div class="mb-5">
-      <a href="{{< docsref "/examples" >}}" class="btn btn-primary btn-lg px-4">Download examples</a>
-    </div>
-
-    <hr class="col-3 col-md-2 mb-5">
-
-    <div class="row g-5">
-      <div class="col-md-6">
-        <h2>Starter projects</h2>
-        <p>Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p>
-        <ul class="icon-list">
-          <li><a href="https://github.com/twbs/bootstrap-npm-starter" rel="noopener" target="_blank">Bootstrap npm starter</a></li>
-          <li class="text-muted">Bootstrap Parcel starter (coming soon!)</li>
-        </ul>
-      </div>
-
-      <div class="col-md-6">
-        <h2>Guides</h2>
-        <p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p>
-        <ul class="icon-list">
-          <li><a href="{{< docsref "/getting-started/introduction" >}}">Bootstrap quick start guide</a></li>
-          <li><a href="{{< docsref "/getting-started/webpack" >}}">Bootstrap Webpack guide</a></li>
-          <li><a href="{{< docsref "/getting-started/parcel" >}}">Bootstrap Parcel guide</a></li>
-          <li><a href="{{< docsref "/getting-started/contribute" >}}">Contributing to Bootstrap</a></li>
-        </ul>
-      </div>
-    </div>
-  </main>
-  <footer class="pt-5 my-5 text-muted border-top">
-    Created by the Bootstrap team &middot; &copy; {{< year >}}
-  </footer>
-</div>
diff --git a/site/content/docs/5.1/examples/starter-template/starter-template.css b/site/content/docs/5.1/examples/starter-template/starter-template.css
deleted file mode 100644
index d03436db0..000000000
--- a/site/content/docs/5.1/examples/starter-template/starter-template.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.icon-list {
-  padding-left: 0;
-  list-style: none;
-}
-.icon-list li {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: .25rem;
-}
-.icon-list li::before {
-  display: block;
-  flex-shrink: 0;
-  width: 1.5em;
-  height: 1.5em;
-  margin-right: .5rem;
-  content: "";
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto;
-}
diff --git a/site/content/docs/5.1/getting-started/contents.md b/site/content/docs/5.1/getting-started/contents.md
deleted file mode 100644
index 4e86d5592..000000000
--- a/site/content/docs/5.1/getting-started/contents.md
+++ /dev/null
@@ -1,180 +0,0 @@
----
-layout: docs
-title: Contents
-description: Discover what's included in Bootstrap, including our precompiled and source code flavors.
-group: getting-started
-toc: true
----
-
-## Precompiled Bootstrap
-
-Once downloaded, unzip the compressed folder and you'll see something like this:
-
-<!-- NOTE: This info is intentionally duplicated in the README. Copy any changes made here over to the README too, but be sure to keep in mind to add the `dist` folder. -->
-
-```text
-bootstrap/
-├── css/
-│   ├── bootstrap-grid.css
-│   ├── bootstrap-grid.css.map
-│   ├── bootstrap-grid.min.css
-│   ├── bootstrap-grid.min.css.map
-│   ├── bootstrap-grid.rtl.css
-│   ├── bootstrap-grid.rtl.css.map
-│   ├── bootstrap-grid.rtl.min.css
-│   ├── bootstrap-grid.rtl.min.css.map
-│   ├── bootstrap-reboot.css
-│   ├── bootstrap-reboot.css.map
-│   ├── bootstrap-reboot.min.css
-│   ├── bootstrap-reboot.min.css.map
-│   ├── bootstrap-reboot.rtl.css
-│   ├── bootstrap-reboot.rtl.css.map
-│   ├── bootstrap-reboot.rtl.min.css
-│   ├── bootstrap-reboot.rtl.min.css.map
-│   ├── bootstrap-utilities.css
-│   ├── bootstrap-utilities.css.map
-│   ├── bootstrap-utilities.min.css
-│   ├── bootstrap-utilities.min.css.map
-│   ├── bootstrap-utilities.rtl.css
-│   ├── bootstrap-utilities.rtl.css.map
-│   ├── bootstrap-utilities.rtl.min.css
-│   ├── bootstrap-utilities.rtl.min.css.map
-│   ├── bootstrap.css
-│   ├── bootstrap.css.map
-│   ├── bootstrap.min.css
-│   ├── bootstrap.min.css.map
-│   ├── bootstrap.rtl.css
-│   ├── bootstrap.rtl.css.map
-│   ├── bootstrap.rtl.min.css
-│   └── bootstrap.rtl.min.css.map
-└── js/
-    ├── bootstrap.bundle.js
-    ├── bootstrap.bundle.js.map
-    ├── bootstrap.bundle.min.js
-    ├── bootstrap.bundle.min.js.map
-    ├── bootstrap.esm.js
-    ├── bootstrap.esm.js.map
-    ├── bootstrap.esm.min.js
-    ├── bootstrap.esm.min.js.map
-    ├── bootstrap.js
-    ├── bootstrap.js.map
-    ├── bootstrap.min.js
-    └── bootstrap.min.js.map
-```
-
-This is the most basic form of Bootstrap: precompiled 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/).
-
-## CSS files
-
-Bootstrap includes a handful of options for including some or all of our compiled CSS.
-
-<table class="table">
-  <thead>
-    <tr>
-      <th scope="col">CSS files</th>
-      <th scope="col">Layout</th>
-      <th scope="col">Content</th>
-      <th scope="col">Components</th>
-      <th scope="col">Utilities</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">
-        <div><code class="fw-normal text-nowrap">bootstrap.css</code></div>
-        <div><code class="fw-normal text-nowrap">bootstrap.rtl.css</code></div>
-        <div><code class="fw-normal text-nowrap">bootstrap.min.css</code></div>
-        <div><code class="fw-normal text-nowrap">bootstrap.rtl.min.css</code></div>
-      </th>
-      <td>Included</td>
-      <td>Included</td>
-      <td>Included</td>
-      <td>Included</td>
-    </tr>
-    <tr>
-      <th scope="row">
-        <div><code class="fw-normal text-nowrap">bootstrap-grid.css</code></div>
-        <div><code class="fw-normal text-nowrap">bootstrap-grid.rtl.css</code></div>
-        <div><code class="fw-normal text-nowrap">bootstrap-grid.min.css</code></div>
-        <div><code class="fw-normal text-nowrap">bootstrap-grid.rtl.min.css</code></div>
-      </th>
-      <td><a class="link-secondary" href="{{< docsref "/layout/grid" >}}">Only grid system</a></td>
-      <td class="text-muted">&mdash;</td>
-      <td class="text-muted">&mdash;</td>
-      <td><a class="link-secondary" href="{{< docsref "/utilities/flex" >}}">Only flex utilities</a></td>
-    </tr>
-    <tr>
-      <th scope="row">
-        <div><code class="fw-normal text-nowrap">bootstrap-utilities.css</code></div>
-        <div><code class="fw-normal text-nowrap">bootstrap-utilities.rtl.css</code></div>
-        <div><code class="fw-normal text-nowrap">bootstrap-utilities.min.css</code></div>
-        <div><code class="fw-normal text-nowrap">bootstrap-utilities.rtl.min.css</code></div>
-      </th>
-      <td class="text-muted">&mdash;</td>
-      <td class="text-muted">&mdash;</td>
-      <td class="text-muted">&mdash;</td>
-      <td>Included</td>
-    </tr>
-    <tr>
-      <th scope="row">
-        <div><code class="fw-normal text-nowrap">bootstrap-reboot.css</code></div>
-        <div><code class="fw-normal text-nowrap">bootstrap-reboot.rtl.css</code></div>
-        <div><code class="fw-normal text-nowrap">bootstrap-reboot.min.css</code></div>
-        <div><code class="fw-normal text-nowrap">bootstrap-reboot.rtl.min.css</code></div>
-      </th>
-      <td class="text-muted">&mdash;</td>
-      <td><a class="link-secondary" href="{{< docsref "/content/reboot" >}}">Only Reboot</a></td>
-      <td class="text-muted">&mdash;</td>
-      <td class="text-muted">&mdash;</td>
-    </tr>
-  </tbody>
-</table>
-
-## JS files
-
-Similarly, we have options for including some or all of our compiled JavaScript.
-
-<table class="table">
-  <thead>
-    <tr>
-      <th scope="col">JS files</th>
-      <th scope="col">Popper</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">
-        <div><code class="fw-normal text-nowrap">bootstrap.bundle.js</code></div>
-        <div><code class="fw-normal text-nowrap">bootstrap.bundle.min.js</code></div>
-      </th>
-      <td>Included</td>
-    </tr>
-    <tr>
-      <th scope="row">
-        <div><code class="fw-normal text-nowrap">bootstrap.js</code></div>
-        <div><code class="fw-normal text-nowrap">bootstrap.min.js</code></div>
-      </th>
-      <td class="text-muted">&mdash;</td>
-    </tr>
-  </tbody>
-</table>
-
-## Bootstrap source code
-
-The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:
-
-```text
-bootstrap/
-├── dist/
-│   ├── css/
-│   └── js/
-├── site/
-│   └──content/
-│      └── docs/
-│          └── 5.1/
-│              └── examples/
-├── js/
-└── scss/
-```
-
-The `scss/` and `js/` are the source code for our CSS and JavaScript. The `dist/` folder includes everything listed in the precompiled download section above. The `site/docs/` folder includes the source code for our documentation, and `examples/` of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development.
diff --git a/site/content/docs/5.1/getting-started/introduction.md b/site/content/docs/5.1/getting-started/introduction.md
deleted file mode 100644
index b2fe767d7..000000000
--- a/site/content/docs/5.1/getting-started/introduction.md
+++ /dev/null
@@ -1,162 +0,0 @@
----
-layout: docs
-title: Introduction
-description: Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.
-group: getting-started
-aliases:
-  - "/docs/5.1/getting-started/"
-  - "/docs/getting-started/"
-  - "/getting-started/"
-toc: true
----
-
-## Quick start
-
-Looking to quickly add Bootstrap to your project? Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files? [Head to the downloads page]({{< docsref "/getting-started/download" >}}).
-
-### CSS
-
-Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
-
-```html
-<link href="{{< param "cdn.css" >}}" rel="stylesheet" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
-```
-
-### JS
-
-Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and [Popper](https://popper.js.org/). Place **one of the following `<script>`s** near the end of your pages, right before the closing `</body>` tag, to enable them.
-
-#### Bundle
-
-Include every Bootstrap JavaScript plugin and dependency with one of our two bundles. Both `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/) for our tooltips and popovers. For more information about what's included in Bootstrap, please see our [contents]({{< docsref "/getting-started/contents#precompiled-bootstrap" >}}) section.
-
-```html
-<script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
-```
-
-#### Separate
-
-If you decide to go with the separate scripts solution, Popper must come first (if you're using tooltips or popovers), and then our JavaScript plugins.
-
-```html
-<script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
-<script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
-```
-
-#### Modules
-
-If you use `<script type="module">`, please refer to our [using Bootstrap as a module]({{< docsref "/getting-started/javascript#using-bootstrap-as-a-module" >}}) section.
-
-#### Components
-
-Curious which components explicitly require our JavaScript and Popper? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template.
-
-<details>
-<summary class="text-primary mb-3">Show components requiring JavaScript</summary>
-{{< markdown >}}
-- Alerts for dismissing
-- 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/))
-- Modals for displaying, positioning, and scroll behavior
-- Navbar for extending our Collapse plugin to implement responsive behavior
-- Offcanvases for displaying, positioning, and scroll behavior
-- Toasts for displaying and dismissing
-- Tooltips and popovers for displaying and positioning (also requires [Popper](https://popper.js.org/))
-- Scrollspy for scroll behavior and navigation updates
-{{< /markdown >}}
-</details>
-
-## Starter template
-
-Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:
-
-```html
-<!doctype html>
-<html lang="en">
-  <head>
-    <!-- Required meta tags -->
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- Bootstrap CSS -->
-    <link href="{{< param "cdn.css" >}}" rel="stylesheet" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
-
-    <title>Hello, world!</title>
-  </head>
-  <body>
-    <h1>Hello, world!</h1>
-
-    <!-- Optional JavaScript; choose one of the two! -->
-
-    <!-- Option 1: Bootstrap Bundle with Popper -->
-    <script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
-
-    <!-- Option 2: Separate Popper and Bootstrap JS -->
-    <!--
-    <script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
-    <script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
-    -->
-  </body>
-</html>
-```
-
-For next steps, visit the [Layout docs]({{< docsref "/layout/grid" >}}) or [our official examples]({{< docsref "/examples" >}}) to start laying out your site's content and components.
-
-## Important globals
-
-Bootstrap employs a handful of important global styles and settings that you'll need to be aware of when using it, all of which are almost exclusively geared towards the *normalization* of cross browser styles. Let's dive in.
-
-### HTML5 doctype
-
-Bootstrap requires the use of the HTML5 doctype. Without it, you'll see some funky incomplete styling, but including it shouldn't cause any considerable hiccups.
-
-```html
-<!doctype html>
-<html lang="en">
-  ...
-</html>
-```
-
-### Responsive meta tag
-
-Bootstrap is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, **add the responsive viewport meta tag** to your `<head>`.
-
-```html
-<meta name="viewport" content="width=device-width, initial-scale=1">
-```
-
-You can see an example of this in action in the [starter template](#starter-template).
-
-### Box-sizing
-
-For more straightforward sizing in CSS, we switch the global `box-sizing` value from `content-box` to `border-box`. This ensures `padding` does not affect the final computed width of an element, but it can cause problems with some third-party software like Google Maps and Google Custom Search Engine.
-
-On the rare occasion you need to override it, use something like the following:
-
-```css
-.selector-for-some-widget {
-  box-sizing: content-box;
-}
-```
-
-With the above snippet, nested elements—including generated content via `::before` and `::after`—will all inherit the specified `box-sizing` for that `.selector-for-some-widget`.
-
-Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box-sizing/).
-
-### Reboot
-
-For improved cross-browser rendering, we use [Reboot]({{< docsref "/content/reboot" >}}) to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
-
-## Community
-
-Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.
-
-- Read and subscribe to [The Official Bootstrap Blog]({{< param blog >}}).
-- Join [the official Slack room]({{< param slack >}}).
-- 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.
-
-You can also follow [@getbootstrap on Twitter](https://twitter.com/{{< param twitter >}}) for the latest gossip and awesome music videos.
diff --git a/site/content/docs/5.1/getting-started/javascript.md b/site/content/docs/5.1/getting-started/javascript.md
deleted file mode 100644
index 8ee428921..000000000
--- a/site/content/docs/5.1/getting-started/javascript.md
+++ /dev/null
@@ -1,238 +0,0 @@
----
-layout: docs
-title: JavaScript
-description: Bring Bootstrap to life with our optional JavaScript plugins. Learn about each plugin, our data and programmatic API options, and more.
-group: getting-started
-toc: true
----
-
-## Individual or compiled
-
-Plugins can be included individually (using Bootstrap's individual `js/dist/*.js`), or all at once using `bootstrap.js` or the minified `bootstrap.min.js` (don't include both).
-
-If you use a bundler (Webpack, Rollup...), you can use `/js/dist/*.js` files which are UMD ready.
-
-## Using Bootstrap as a module
-
-We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootstrap.esm.min.js`) which allows you to use Bootstrap as a module in your browser, if your [targeted browsers support it](https://caniuse.com/es6-module).
-
-```html
-<script type="module">
-  import { Toast } from 'bootstrap.esm.min.js'
-
-  Array.from(document.querySelectorAll('.toast'))
-    .forEach(toastNode => new Toast(toastNode))
-</script>
-```
-
-{{< callout warning >}}
-## Incompatible plugins
-
-Due to browser limitations, some of our plugins, namely Dropdown, Tooltip and Popover plugins, cannot be used in a `<script>` tag with `module` type because they depend on Popper. For more information about the issue see [here](https://v8.dev/features/modules#specifiers).
-{{< /callout >}}
-
-## Dependencies
-
-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/).
-
-## Still want to use jQuery? It's possible!
-
-Bootstrap 5 is designed to be used without jQuery, but it's still possible to use our components with jQuery. **If Bootstrap detects `jQuery` in the `window` object** it'll add all of our components in jQuery's plugin system; this means you'll be able to do `$('[data-bs-toggle="tooltip"]').tooltip()` to enable tooltips. The same goes for our other components.
-
-## Data attributes
-
-Nearly all Bootstrap plugins can be enabled and configured through HTML alone with data attributes (our preferred way of using JavaScript functionality). Be sure to **only use one set of data attributes on a single element** (e.g., you cannot trigger a tooltip and modal from the same button.)
-
-{{< callout warning >}}
-## Selectors
-
-Currently to query DOM elements we use the native methods `querySelector` and `querySelectorAll` for performance reasons, so you have to use [valid selectors](https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier).
-If you use special selectors, for example: `collapse:Example` be sure to escape them.
-{{< /callout >}}
-
-## Events
-
-Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. `show`) is triggered at the start of an event, and its past participle form (ex. `shown`) is triggered on the completion of an action.
-
-All infinitive events provide [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) functionality. This provides the ability to stop the execution of an action before it starts. Returning false from an event handler will also automatically call `preventDefault()`.
-
-```js
-var myModal = document.getElementById('myModal')
-
-myModal.addEventListener('show.bs.modal', function (event) {
-  if (!data) {
-    return event.preventDefault() // stops modal from being shown
-  }
-})
-```
-
-{{< callout warning >}}
-## jQuery events
-
-Bootstrap will detect jQuery if `jQuery` is present in the `window` object and there is no `data-bs-no-jquery` attribute set on `<body>`. If jQuery is found, Bootstrap will emit events thanks to jQuery's event system. So if you want to listen to Bootstrap's events, you'll have to use the jQuery methods (`.on`, `.one`) instead of `addEventListener`.
-
-```js
-$('#myTab a').on('shown.bs.tab', function () {
-  // do something...
-})
-```
-{{< /callout >}}
-
-## Programmatic API
-
-All constructors accept an optional options object or nothing (which initiates a plugin with its default behavior):
-
-```js
-var myModalEl = document.getElementById('myModal')
-
-var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
-var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard
-```
-
-If you'd like to get a particular plugin instance, each plugin exposes a `getInstance` method. In order to retrieve it directly from an element, do this: `bootstrap.Popover.getInstance(myPopoverEl)`.
-
-### CSS selectors in constructors
-
-You can also use a CSS selector as the first argument instead of a DOM element to initialize the plugin. Currently the element for the plugin is found by the `querySelector` method since our plugins support a single element only.
-
-```js
-var modal = new bootstrap.Modal('#myModal')
-var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
-```
-
-### Asynchronous functions and transitions
-
-All programmatic API methods are **asynchronous** and return to the caller once the transition is started but **before it ends**.
-
-In order to execute an action once the transition is complete, you can listen to the corresponding event.
-
-```js
-var myCollapseEl = document.getElementById('myCollapse')
-
-myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
-  // Action to execute once the collapsible area is expanded
-})
-```
-
-In addition a method call on a **transitioning component will be ignored**.
-
-```js
-var myCarouselEl = document.getElementById('myCarousel')
-var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance
-
-myCarouselEl.addEventListener('slid.bs.carousel', function (event) {
-  carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
-})
-
-carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
-carousel.to('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!
-```
-
-### Default settings
-
-You can change the default settings for a plugin by modifying the plugin's `Constructor.Default` object:
-
-```js
-// changes default for the modal plugin's `keyboard` option to false
-bootstrap.Modal.Default.keyboard = false
-```
-
-## No conflict (only if you use jQuery)
-
-Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call `.noConflict` on the plugin you wish to revert the value of.
-
-```js
-var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
-$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
-```
-
-## Version numbers
-
-The version of each of Bootstrap's plugins can be accessed via the `VERSION` property of the plugin's constructor. For example, for the tooltip plugin:
-
-```js
-bootstrap.Tooltip.VERSION // => "{{< param current_version >}}"
-```
-
-## No special fallbacks when JavaScript is disabled
-
-Bootstrap's plugins don't fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use [`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript) to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.
-
-{{< callout warning >}}
-##### Third-party libraries
-
-**Bootstrap does not officially support third-party JavaScript libraries** like Prototype or jQuery UI. Despite `.noConflict` and namespaced events, there may be compatibility problems that you need to fix on your own.
-{{< /callout >}}
-
-## Sanitizer
-
-Tooltips and Popovers use our built-in sanitizer to sanitize options which accept HTML.
-
-The default `allowList` value is the following:
-
-```js
-var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
-var DefaultAllowlist = {
-  // Global attributes allowed on any supplied element below.
-  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
-  a: ['target', 'href', 'title', 'rel'],
-  area: [],
-  b: [],
-  br: [],
-  col: [],
-  code: [],
-  div: [],
-  em: [],
-  hr: [],
-  h1: [],
-  h2: [],
-  h3: [],
-  h4: [],
-  h5: [],
-  h6: [],
-  i: [],
-  img: ['src', 'srcset', 'alt', 'title', 'width', 'height'],
-  li: [],
-  ol: [],
-  p: [],
-  pre: [],
-  s: [],
-  small: [],
-  span: [],
-  sub: [],
-  sup: [],
-  strong: [],
-  u: [],
-  ul: []
-}
-```
-
-If you want to add new values to this default `allowList` you can do the following:
-
-```js
-var myDefaultAllowList = bootstrap.Tooltip.Default.allowList
-
-// To allow table elements
-myDefaultAllowList.table = []
-
-// To allow td elements and data-bs-option attributes on td elements
-myDefaultAllowList.td = ['data-bs-option']
-
-// You can push your custom regex to validate your attributes.
-// Be careful about your regular expressions being too lax
-var myCustomRegex = /^data-my-app-[\w-]+/
-myDefaultAllowList['*'].push(myCustomRegex)
-```
-
-If you want to bypass our sanitizer because you prefer to use a dedicated library, for example [DOMPurify](https://www.npmjs.com/package/dompurify), you should do the following:
-
-```js
-var yourTooltipEl = document.getElementById('yourTooltip')
-var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
-  sanitizeFn: function (content) {
-    return DOMPurify.sanitize(content)
-  }
-})
-```
diff --git a/site/content/docs/5.1/getting-started/parcel.md b/site/content/docs/5.1/getting-started/parcel.md
deleted file mode 100644
index 23aab0054..000000000
--- a/site/content/docs/5.1/getting-started/parcel.md
+++ /dev/null
@@ -1,99 +0,0 @@
----
-layout: docs
-title: Parcel
-description: Learn how to include Bootstrap in your project using Parcel.
-group: getting-started
-toc: true
----
-
-## Install Parcel
-
-Install [Parcel Bundler](https://en.parceljs.org/getting_started.html).
-
-## Install Bootstrap
-
-[Install bootstrap]({{< docsref "/getting-started/download#npm" >}}) as a Node.js module using npm.
-
-Bootstrap depends on [Popper](https://popper.js.org/), which is specified in the `peerDependencies` property. This means that you will have to make sure to add both of them to your `package.json` using `npm install @popperjs/core`.
-
-When all will be completed, your project will be structured like this:
-
-```text
-project-name/
-├── build/
-├── node_modules/
-│   └── bootstrap/
-│   └── popper.js/
-├── scss/
-│   └── custom.scss
-├── src/
-│   └── index.html
-│   └── index.js
-└── package.json
-```
-
-## Importing JavaScript
-
-Import [Bootstrap's JavaScript]({{< docsref "/getting-started/javascript" >}}) in your app's entry point (usually `src/index.js`). You can import all our plugins in one file or separately if you require only a subset of them.
-
-```js
-// Import all plugins
-import * as bootstrap from 'bootstrap';
-
-// Or import only needed plugins
-import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap';
-
-// Or import just one
-import Alert as Alert from '../node_modules/bootstrap/js/dist/alert';
-```
-
-## Importing CSS
-
-To utilize the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project's bundling process.
-
-Create your own `scss/custom.scss` to [import Bootstrap's Sass files]({{< docsref "/customize/sass#importing" >}}) and then override the [built-in custom variables]({{< docsref "/customize/sass#variable-defaults" >}}).
-
-## Build app
-
-Include `src/index.js` before the closing `</body>` tag.
-
-```html
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
-  <body>
-    <script src="./index.js"></script>
-  </body>
-</html>
-```
-
-### Edit `package.json`
-
-Add `dev` and `build` scripts in your `package.json` file.
-
-```json
-"scripts": {
-  "dev": "parcel ./src/index.html",
-  "prebuild": "npx rimraf build",
-  "build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
-}
-```
-
-### Run dev script
-
-Your app will be accessible at `http://127.0.0.1:1234`.
-
-```sh
-npm run dev
-```
-
-### Build app files
-
-Built files are in the `build/` folder.
-
-```sh
-npm run build
-```
diff --git a/site/content/docs/5.1/getting-started/webpack.md b/site/content/docs/5.1/getting-started/webpack.md
deleted file mode 100644
index b87460ebe..000000000
--- a/site/content/docs/5.1/getting-started/webpack.md
+++ /dev/null
@@ -1,108 +0,0 @@
----
-layout: docs
-title: Webpack and bundlers
-description: Learn how to include Bootstrap in your project using Webpack or other bundlers.
-group: getting-started
-toc: true
----
-
-## Installing Bootstrap
-
-[Install bootstrap]({{< docsref "/getting-started/download#npm" >}}) as a Node.js module using npm.
-
-## Importing JavaScript
-
-Import [Bootstrap's JavaScript]({{< docsref "/getting-started/javascript" >}}) by adding this line to your app's entry point (usually `index.js` or `app.js`):
-
-```js
-import 'bootstrap';
-
-// or get all of the named exports for further usage
-import * as bootstrap from 'bootstrap';
-```
-
-Alternatively, if you only need just a few of our plugins, you may **import plugins individually** as needed:
-
-```js
-import Alert from 'bootstrap/js/dist/alert';
-
-// or, specify which plugins you need:
-import { Tooltip, Toast, Popover } from 'bootstrap';
-```
-
-Bootstrap depends on [Popper](https://popper.js.org/), which is specified in the `peerDependencies` property.
-This means that you will have to make sure to add it to your `package.json` using `npm install @popperjs/core`.
-
-## Importing Styles
-
-### Importing Precompiled Sass
-
-To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project's bundling process.
-
-First, create your own `_custom.scss` and use it to override the [built-in custom variables]({{< docsref "/customize/sass" >}}). Then, use your main Sass file to import your custom variables, followed by Bootstrap:
-
-```scss
-@import "custom";
-@import "~bootstrap/scss/bootstrap";
-```
-
-For Bootstrap to compile, make sure you install and use the required loaders: [sass-loader](https://github.com/webpack-contrib/sass-loader), [postcss-loader](https://github.com/webpack-contrib/postcss-loader) with [Autoprefixer](https://github.com/postcss/autoprefixer#webpack). With minimal setup, your webpack config should include this rule or similar:
-
-```js
-// ...
-{
-  test: /\.(scss)$/,
-  use: [{
-    // inject CSS to page
-    loader: 'style-loader'
-  }, {
-    // translates CSS into CommonJS modules
-    loader: 'css-loader'
-  }, {
-    // Run postcss actions
-    loader: 'postcss-loader',
-    options: {
-      // `postcssOptions` is needed for postcss 8.x;
-      // if you use postcss 7.x skip the key
-      postcssOptions: {
-        // postcss plugins, can be exported to postcss.config.js
-        plugins: function () {
-          return [
-            require('autoprefixer')
-          ];
-        }
-      }
-    }
-  }, {
-    // compiles Sass to CSS
-    loader: 'sass-loader'
-  }]
-}
-// ...
-```
-
-### Importing Compiled CSS
-
-Alternatively, you may use Bootstrap's ready-to-use CSS by simply adding this line to your project's entry point:
-
-```js
-import 'bootstrap/dist/css/bootstrap.min.css';
-```
-
-In this case you may use your existing rule for `css` without any special modifications to webpack config, except you don't need `sass-loader` just [style-loader](https://github.com/webpack-contrib/style-loader) and [css-loader](https://github.com/webpack-contrib/css-loader).
-
-```js
-// ...
-module: {
-  rules: [
-    {
-      test: /\.css$/,
-      use: [
-        'style-loader',
-        'css-loader'
-      ]
-    }
-  ]
-}
-// ...
-```
diff --git a/site/content/docs/5.1/helpers/colored-links.md b/site/content/docs/5.1/helpers/colored-links.md
deleted file mode 100644
index e940196ff..000000000
--- a/site/content/docs/5.1/helpers/colored-links.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-layout: docs
-title: Colored links
-description: Colored links with hover states
-group: helpers
-toc: false
----
-
-You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state.
-
-{{< example >}}
-{{< colored-links.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-<a href="#" class="link-{{ .name }}">{{ .name | title }} link</a>
-{{- end -}}
-{{< /colored-links.inline >}}
-{{< /example >}}
-
-{{< callout info >}}
-Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
-{{< /callout >}}
diff --git a/site/content/docs/5.1/migration.md b/site/content/docs/5.1/migration.md
deleted file mode 100644
index 522e8551b..000000000
--- a/site/content/docs/5.1/migration.md
+++ /dev/null
@@ -1,435 +0,0 @@
----
-layout: docs
-title: Migrating to v5
-description: Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5.
-group: migration
-aliases: "/migration/"
-toc: true
----
-
-## v5.2.0
-
-### New `_maps.scss`
-
-Bootstrap v5.2.0 introduced a new Sass file, `_maps.scss`, that pulled out several Sass maps from `_variables.scss` to fix an issue where updates to an original map were not applied to secondary maps that extend them. For example, updates to `$theme-colors` were not being applied to other theme maps that relied on `$theme-colors`, breaking key customization workflows. In short, Sass has a limitation where once a default variable or map has been _used_, it cannot be updated.
-
-This is why variable customizations in Bootstrap have to come after `@import "functions"`, but before `@import "variables"` and the rest of our import stack. The same applies to Sass maps—you must override the defaults before the defaults get used. The following maps have been moved to the new `_maps.scss`:
-
-- `$theme-colors-rgb`
-- `$utilities-colors`
-- `$utilities-text`
-- `$utilities-text-colors`
-- `$utilities-bg`
-- `$utilities-bg-colors`
-- `$negative-spacers`
-- `$gutters`
-
-Your custom Bootstrap CSS builds should now look something like this with a separate maps import.
-
-```diff
-  // Functions come first
-  @import "functions";
-
-  // Optional variable overrides here
-+ $custom-color: #df711b;
-+ $custom-theme-colors: (
-+   "custom": $custom-color
-+ );
-
-  // Variables come next
-  @import "variables";
-
-+ // Optional Sass map overrides here
-+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
-+
-+ // Followed by our default maps
-+ @import "maps";
-+
-  // Rest of our imports
-  @import "mixins";
-  @import "utilities";
-  @import "root";
-  @import "reboot";
-  // etc
-```
-
-### Key changes
-
-- **Introduced new `$enable-container-classes` option.** Now when opting into the experimental CSS Grid layout, `.container-*` classes will still be compiled, unless this option is set to `false`.
-
-## Dependencies
-
-- Dropped jQuery.
-- Upgraded from Popper v1.x to Popper v2.x.
-- Replaced Libsass with Dart Sass as our Sass compiler given Libsass was deprecated.
-- Migrated from Jekyll to Hugo for building our documentation
-
-## Browser support
-
-- Dropped Internet Explorer 10 and 11
-- Dropped Microsoft Edge < 16 (Legacy Edge)
-- Dropped Firefox < 60
-- Dropped Safari < 12
-- Dropped iOS Safari < 12
-- Dropped Chrome < 60
-
-<hr class="my-5">
-
-## Documentation changes
-
-- Redesigned homepage, docs layout, and footer.
-- Added [new Parcel guide](https://getbootstrap.com/docs/5.1/getting-started/parcel/).
-- Added [new Customize section](https://getbootstrap.com/docs/5.1/customize/overview/), replacing [v4's Theming page](https://getbootstrap.com/docs/4.6/getting-started/theming/), with new details on Sass, global configuration options, color schemes, CSS variables, and more.
-- Reorganized all form documentation into [new Forms section](https://getbootstrap.com/docs/5.1/forms/overview/), breaking apart the content into more focused pages.
-- Similarly, updated [the Layout section](https://getbootstrap.com/docs/5.1/layout/breakpoints/), to flesh out grid content more clearly.
-- Renamed "Navs" component page to "Navs & Tabs".
-- Renamed "Checks" page to "Checks & radios".
-- Redesigned the navbar and added a new subnav to make it easier to get around our sites and docs versions.
-- Added new keyboard shortcut for the search field: <kbd>Ctrl + /</kbd>.
-
-## Sass
-
-- We've ditched the default Sass map merges to make it easier to remove redundant values. Keep in mind you now have to define all values in the Sass maps like `$theme-colors`. Check out how to deal with [Sass maps]({{< docsref "/customize/sass#maps-and-loops" >}}).
-
-- <span class="badge bg-danger">Breaking</span> Renamed `color-yiq()` function and related variables to `color-contrast()` as it's no longer related to YIQ colorspace. [See #30168.](https://github.com/twbs/bootstrap/pull/30168/)
-  - `$yiq-contrasted-threshold` is renamed to `$min-contrast-ratio`.
-  - `$yiq-text-dark` and `$yiq-text-light` are respectively renamed to `$color-contrast-dark` and `$color-contrast-light`.
-
-- <span class="badge bg-danger">Breaking</span> Media query mixins parameters have changed for a more logical approach.
-  - `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint (e.g., `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` targets viewports smaller than `lg`).
-  - Similarly, the second parameter in `media-breakpoint-between()` also uses the breakpoint itself instead of the next breakpoint (e.g., `media-between(sm, lg)` instead of `media-breakpoint-between(sm, md)` targets viewports between `sm` and `lg`).
-
-- <span class="badge bg-danger">Breaking</span> Removed print styles and `$enable-print-styles` variable. Print display classes are still around. [See #28339](https://github.com/twbs/bootstrap/pull/28339).
-
-- <span class="badge bg-danger">Breaking</span> Dropped `color()`, `theme-color()`, and `gray()` functions in favor of variables. [See #29083](https://github.com/twbs/bootstrap/pull/29083).
-
-- <span class="badge bg-danger">Breaking</span> Renamed `theme-color-level()` function to `color-level()` and now accepts any color you want instead of only `$theme-color` colors. [See #29083](https://github.com/twbs/bootstrap/pull/29083) **Watch out:** `color-level()` was later on dropped in `v5.0.0-alpha3`.
-
-- <span class="badge bg-danger">Breaking</span> Renamed `$enable-prefers-reduced-motion-media-query` and `$enable-pointer-cursor-for-buttons` to `$enable-reduced-motion` and `$enable-button-pointers` for brevity.
-
-- <span class="badge bg-danger">Breaking</span> Removed the `bg-gradient-variant()` mixin. Use the `.bg-gradient` class to add gradients to elements instead of the generated `.bg-gradient-*` classes.
-
-- <span class="badge bg-danger">Breaking</span> **Removed previously deprecated mixins:**
-  - `hover`, `hover-focus`, `plain-hover-focus`, and `hover-focus-active`
-  - `float()`
-  - `form-control-mixin()`
-  - `nav-divider()`
-  - `retina-img()`
-  - `text-hide()` (also dropped the associated utility class, `.text-hide`)
-  - `visibility()`
-  - `form-control-focus()`
-
-- <span class="badge bg-danger">Breaking</span> Renamed `scale-color()` function to `shift-color()` to avoid collision with Sass's own color scaling function.
-
-- `box-shadow` mixins now allow `null` values and drop `none` from multiple arguments. [See #30394](https://github.com/twbs/bootstrap/pull/30394).
-
-- The `border-radius()` mixin now has a default value.
-
-## Color system
-
-- The color system which worked with `color-level()` and `$theme-color-interval` was removed in favor of a new color system. All `lighten()` and `darken()` functions in our codebase are replaced by `tint-color()` and `shade-color()`. These functions will mix the color with either white or black instead of changing its lightness by a fixed amount. The `shift-color()` will either tint or shade a color depending on whether its weight parameter is positive or negative. [See #30622](https://github.com/twbs/bootstrap/pull/30622) for more details.
-
-- Added new tints and shades for every color, providing nine separate colors for each base color, as new Sass variables.
-
-- Improved color contrast. Bumped color contrast ratio from 3:1 to 4.5:1 and updated blue, green, cyan, and pink colors to ensure WCAG 2.1 AA contrast. Also changed our color contrast color from `$gray-900` to `$black`.
-
-- To support our color system, we've added new custom `tint-color()` and `shade-color()` functions to mix our colors appropriately.
-
-## Grid updates
-
-- **New breakpoint!** Added new `xxl` breakpoint for `1400px` and up. No changes to all other breakpoints.
-
-- **Improved gutters.** Gutters are now set in rems, and are narrower than v4 (`1.5rem`, or about `24px`, down from `30px`). This aligns our grid system's gutters with our spacing utilities.
-  - Added new [gutter class](https://getbootstrap.com/docs/5.1/layout/gutters/) (`.g-*`, `.gx-*`, and `.gy-*`) to control horizontal/vertical gutters, horizontal gutters, and vertical gutters.
-  - <span class="badge bg-danger">Breaking</span> Renamed `.no-gutters` to `.g-0` to match new gutter utilities.
-
-- Columns no longer have `position: relative` applied, so you may have to add `.position-relative` to some elements to restore that behavior.
-
-- <span class="badge bg-danger">Breaking</span> Dropped several `.order-*` classes that often went unused. We now only provide `.order-1` to `.order-5` out of the box.
-
-- <span class="badge bg-danger">Breaking</span> Dropped the `.media` component as it can be easily replicated with utilities. [See #28265](https://github.com/twbs/bootstrap/pull/28265) and the [flex utilities page for an example]({{< docsref "/utilities/flex#media-object" >}}).
-
-- <span class="badge bg-danger">Breaking</span> `bootstrap-grid.css` now only applies `box-sizing: border-box` to the column instead of resetting the global box-sizing. This way, our grid styles can be used in more places without interference.
-
-- `$enable-grid-classes` no longer disables the generation of container classes anymore. [See #29146.](https://github.com/twbs/bootstrap/pull/29146)
-
-- Updated the `make-col` mixin to default to equal columns without a specified size.
-
-## Content, Reboot, etc
-
-- **[RFS]({{< docsref "/getting-started/rfs" >}}) is now enabled by default.** Headings using the `font-size()` mixin will automatically adjust their `font-size` to scale with the viewport. _This feature was previously opt-in with v4._
-
-- <span class="badge bg-danger">Breaking</span> Overhauled our display typography to replace our `$display-*` variables and with a `$display-font-sizes` Sass map. Also removed the individual `$display-*-weight` variables for a single `$display-font-weight` and adjusted `font-size`s.
-
-- Added two new `.display-*` heading sizes, `.display-5` and `.display-6`.
-
-- **Links are underlined by default** (not just on hover), unless they're part of specific components.
-
-- **Redesigned tables** to refresh their styles and rebuild them with CSS variables for more control over styling.
-
-- <span class="badge bg-danger">Breaking</span> Nested tables do not inherit styles anymore.
-
-- <span class="badge bg-danger">Breaking</span> `.thead-light` and `.thead-dark` are dropped in favor of the `.table-*` variant classes which can be used for all table elements (`thead`, `tbody`, `tfoot`, `tr`, `th` and `td`).
-
-- <span class="badge bg-danger">Breaking</span> The `table-row-variant()` mixin is renamed to `table-variant()` and accepts only 2 parameters: `$color` (color name) and `$value` (color code). The border color and accent colors are automatically calculated based on the table factor variables.
-
-- Split table cell padding variables into `-y` and `-x`.
-
-- <span class="badge bg-danger">Breaking</span> Dropped `.pre-scrollable` class. [See #29135](https://github.com/twbs/bootstrap/pull/29135)
-
-- <span class="badge bg-danger">Breaking</span> `.text-*` utilities do not add hover and focus states to links anymore. `.link-*` helper classes can be used instead. [See #29267](https://github.com/twbs/bootstrap/pull/29267)
-
-- <span class="badge bg-danger">Breaking</span> Dropped `.text-justify` class. [See #29793](https://github.com/twbs/bootstrap/pull/29793)
-
-- <span class="badge bg-danger">Breaking</span> `<hr>` elements now use `height` instead of `border` to better support the `size` attribute. This also enables use of padding utilities to create thicker dividers (e.g., `<hr class="py-1">`).
-
-- Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`.
-
-- Added `$enable-smooth-scroll`, which applies `scroll-behavior: smooth` globally—except for users asking for reduced motion through `prefers-reduced-motion` media query. [See #31877](https://github.com/twbs/bootstrap/pull/31877)
-
-## RTL
-
-- Horizontal direction specific variables, utilities, and mixins have all been renamed to use logical properties like those found in flexbox layouts—e.g., `start` and `end` in lieu of `left` and `right`.
-
-## Forms
-
-- **Added new floating forms!** We've promoted the Floating labels example to fully supported form components. [See the new Floating labels page.]({{< docsref "/forms/floating-labels" >}})
-
-- <span class="badge bg-danger">Breaking</span> **Consolidated native and custom form elements.** Checkboxes, radios, selects, and other inputs that had native and custom classes in v4 have been consolidated. Now nearly all our form elements are entirely custom, most without the need for custom HTML.
-  - `.custom-check` is now `.form-check`.
-  - `.custom-check.custom-switch` is now `.form-check.form-switch`.
-  - `.custom-select` is now `.form-select`.
-  - `.custom-file` and `.form-file` have been replaced by custom styles on top of `.form-control`.
-  - `.custom-range` is now `.form-range`.
-  - Dropped native `.form-control-file` and `.form-control-range`.
-
-- <span class="badge bg-danger">Breaking</span> Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups.
-
-- The longstanding [Missing border radius on input group with validation feedback bug](https://github.com/twbs/bootstrap/issues/25110) is finally fixed by adding an additional `.has-validation` class to input groups with validation.
-
-- <span class="badge bg-danger">Breaking</span> **Dropped form-specific layout classes for our grid system.** Use our grid and utilities instead of `.form-group`, `.form-row`, or `.form-inline`.
-
-- <span class="badge bg-danger">Breaking</span> Form labels now require `.form-label`.
-
-- <span class="badge bg-danger">Breaking</span> `.form-text` no longer sets `display`, allowing you to create inline or block help text as you wish just by changing the HTML element.
-
-- Validation icons are no longer applied to `<select>`s with `multiple`.
-
-- Rearranged source Sass files under `scss/forms/`, including input group styles.
-
-<hr class="my-5">
-
-## Components
-
-- Unified `padding` values for alerts, breadcrumbs, cards, dropdowns, list groups, modals, popovers, and tooltips to be based on our `$spacer` variable. [See #30564](https://github.com/twbs/bootstrap/pull/30564).
-
-### Accordion
-
-- Added [new accordion component]({{< docsref "/components/accordion" >}}).
-
-### Alerts
-
-- Alerts now have [examples with icons]({{< docsref "/components/alerts#icons" >}}).
-
-- Removed custom styles for `<hr>`s in each alert since they already use `currentColor`.
-
-### Badges
-
-- <span class="badge bg-danger">Breaking</span> Dropped all `.badge-*` color classes for background utilities (e.g., use `.bg-primary` instead of `.badge-primary`).
-
-- <span class="badge bg-danger">Breaking</span> Dropped `.badge-pill`—use the `.rounded-pill` utility instead.
-
-- <span class="badge bg-danger">Breaking</span> Removed hover and focus styles for `<a>` and `<button>` elements.
-
-- Increased default padding for badges from `.25em`/`.5em` to `.35em`/`.65em`.
-
-### Breadcrumbs
-
-- Simplified the default appearance of breadcrumbs by removing `padding`, `background-color`, and `border-radius`.
-
-- Added new CSS custom property `--bs-breadcrumb-divider` for easy customization without needing to recompile CSS.
-
-### Buttons
-
-- <span class="badge bg-danger">Breaking</span> **[Toggle buttons](https://getbootstrap.com/docs/5.1/forms/checks-radios/#toggle-buttons), with checkboxes or radios, no longer require JavaScript and have new markup.** We no longer require a wrapping element, add `.btn-check` to the `<input>`, and pair it with any `.btn` classes on the `<label>`. [See #30650](https://github.com/twbs/bootstrap/pull/30650). _The docs for this has moved from our Buttons page to the new Forms section._
-
-- <span class="badge bg-danger">Breaking</span> **Dropped `.btn-block` for utilities.** Instead of using `.btn-block` on the `.btn`, wrap your buttons with `.d-grid` and a `.gap-*` utility to space them as needed. Switch to responsive classes for even more control over them. [Read the docs for some examples.](https://getbootstrap.com/docs/5.1/components/buttons/#block-buttons)
-
-- Updated our `button-variant()` and `button-outline-variant()` mixins to support additional parameters.
-
-- Updated buttons to ensure increased contrast on hover and active states.
-
-- Disabled buttons now have `pointer-events: none;`.
-
-### Card
-
-- <span class="badge bg-danger">Breaking</span> Dropped `.card-deck` in favor of our grid. Wrap your cards in column classes and add a parent `.row-cols-*` container to recreate card decks (but with more control over responsive alignment).
-
-- <span class="badge bg-danger">Breaking</span> Dropped `.card-columns` in favor of Masonry. [See #28922](https://github.com/twbs/bootstrap/pull/28922).
-
-- <span class="badge bg-danger">Breaking</span> Replaced the `.card` based accordion with a [new Accordion component]({{< docsref "/components/accordion" >}}).
-
-### Carousel
-
-- Added new [`.carousel-dark` variant]({{< docsref "/components/carousel#dark-variant" >}}) for dark text, controls, and indicators (great for lighter backgrounds).
-
-- Replaced chevron icons for carousel controls with new SVGs from [Bootstrap Icons]({{< param "icons" >}}).
-
-### Close button
-
-- <span class="badge bg-danger">Breaking</span> Renamed `.close` to `.btn-close` for a less generic name.
-
-- Close buttons now use a `background-image` (embedded SVG) instead of a `&times;` in the HTML, allowing for easier customization without the need to touch your markup.
-
-- Added new `.btn-close-white` variant that uses `filter: invert(1)` to enable higher contrast dismiss icons against darker backgrounds.
-
-### Collapse
-
-- Removed scroll anchoring for accordions.
-
-### Dropdowns
-
-- Added new `.dropdown-menu-dark` variant and associated variables for on-demand dark dropdowns.
-
-- Added new variable for `$dropdown-padding-x`.
-
-- Darkened the dropdown divider for improved contrast.
-
-- <span class="badge bg-danger">Breaking</span> All the events for the dropdown are now triggered on the dropdown toggle button and then bubbled up to the parent element.
-
-- Dropdown menus now have a `data-bs-popper="static"` attribute set when the positioning of the dropdown is static and `data-bs-popper="none"` when dropdown is in the navbar. This is added by our JavaScript and helps us use custom position styles without interfering with Popper's positioning.
-
-- <span class="badge bg-danger">Breaking</span> Dropped `flip` option for dropdown plugin in favor of native Popper configuration. You can now disable the flipping behavior by passing an empty array for [`fallbackPlacements`](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) option in [flip](https://popper.js.org/docs/v2/modifiers/flip/) modifier.
-
-- Dropdown menus can now be clickable with a new `autoClose` option to handle the [auto close behavior]({{< docsref "/components/dropdowns#auto-close-behavior" >}}). You can use this option to accept the click inside or outside the dropdown menu to make it interactive.
-
-- Dropdowns now support `.dropdown-item`s wrapped in `<li>`s.
-
-### Jumbotron
-
-- <span class="badge bg-danger">Breaking</span> Dropped the jumbotron component as it can be replicated with utilities. [See our new Jumbotron example for a demo.](https://getbootstrap.com/docs/5.1/examples/jumbotron/)
-
-### List group
-
-- Added new [`.list-group-numbered` modifier]({{< docsref "/components/list-group#numbered" >}}) to list groups.
-
-### Navs and tabs
-
-- Added new `null` variables for `font-size`, `font-weight`, `color`, and `:hover` `color` to the `.nav-link` class.
-
-### Navbars
-
-- <span class="badge bg-danger">Breaking</span> Navbars now require a container within (to drastically simplify spacing requirements and CSS required).
-
-### Offcanvas
-
-- Added the new [offcanvas component]({{< docsref "/components/offcanvas" >}}).
-
-### Pagination
-
-- Pagination links now have customizable `margin-left` that are dynamically rounded on all corners when separated from one another.
-
-- Added `transition`s to pagination links.
-
-### Popovers
-
-- <span class="badge bg-danger">Breaking</span> Renamed `.arrow` to `.popover-arrow` in our default popover template.
-
-- Renamed `whiteList` option to `allowList`.
-
-### Spinners
-
-- Spinners now honor `prefers-reduced-motion: reduce` by slowing down animations. [See #31882](https://github.com/twbs/bootstrap/pull/31882).
-
-- Improved spinner vertical alignment.
-
-### Toasts
-
-- Toasts can now be [positioned]({{< docsref "/components/toasts#placement" >}}) in a `.toast-container` with the help of [positioning utilities]({{< docsref "/utilities/position" >}}).
-
-- Changed default toast duration to 5 seconds.
-
-- Removed `overflow: hidden` from toasts and replaced with proper `border-radius`s with `calc()` functions.
-
-### Tooltips
-
-- <span class="badge bg-danger">Breaking</span> Renamed `.arrow` to `.tooltip-arrow` in our default tooltip template.
-
-- <span class="badge bg-danger">Breaking</span> The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of popper elements.
-
-- <span class="badge bg-danger">Breaking</span> Renamed `whiteList` option to `allowList`.
-
-## Utilities
-
-- <span class="badge bg-danger">Breaking</span> Renamed several utilities to use logical property names instead of directional names with the addition of RTL support:
-  - Renamed `.left-*` and `.right-*` to `.start-*` and `.end-*`.
-  - Renamed `.float-left` and `.float-right` to `.float-start` and `.float-end`.
-  - Renamed `.border-left` and `.border-right` to `.border-start` and `.border-end`.
-  - Renamed `.rounded-left` and `.rounded-right` to `.rounded-start` and `.rounded-end`.
-  - Renamed `.ml-*` and `.mr-*` to `.ms-*` and `.me-*`.
-  - Renamed `.pl-*` and `.pr-*` to `.ps-*` and `.pe-*`.
-  - Renamed `.text-left` and `.text-right` to `.text-start` and `.text-end`.
-
-- <span class="badge bg-danger">Breaking</span> Disabled negative margins by default.
-
-- Added new `.bg-body` class for quickly setting the `<body>`'s background to additional elements.
-
-- Added new [position utilities]({{< docsref "/utilities/position#arrange-elements" >}}) for `top`, `right`, `bottom`, and `left`. Values include `0`, `50%`, and `100%` for each property.
-
-- Added new `.translate-middle-x` & `.translate-middle-y` utilities to horizontally or vertically center absolute/fixed positioned elements.
-
-- Added new [`border-width` utilities]({{< docsref "/utilities/borders#border-width" >}}).
-
-- <span class="badge bg-danger">Breaking</span> Renamed `.text-monospace` to `.font-monospace`.
-
-- <span class="badge bg-danger">Breaking</span> Removed `.text-hide` as it's an antiquated method for hiding text that shouldn't be used anymore.
-
-- Added `.fs-*` utilities for `font-size` utilities (with RFS enabled). These use the same scale as HTML's default headings (1-6, large to small), and can be modified via Sass map.
-
-- <span class="badge bg-danger">Breaking</span> Renamed `.font-weight-*` utilities as `.fw-*` for brevity and consistency.
-
-- <span class="badge bg-danger">Breaking</span> Renamed `.font-style-*` utilities as `.fst-*` for brevity and consistency.
-
-- Added `.d-grid` to display utilities and new `gap` utilities (`.gap`) for CSS Grid and flexbox layouts.
-
-- <span class="badge bg-danger">Breaking</span> Removed `.rounded-sm` and `rounded-lg`, and introduced a new scale of classes, `.rounded-0` to `.rounded-3`. [See #31687](https://github.com/twbs/bootstrap/pull/31687).
-
-- Added new `line-height` utilities: `.lh-1`, `.lh-sm`, `.lh-base` and `.lh-lg`. See [here]({{< docsref "/utilities/text#line-height" >}}).
-
-- Moved the `.d-none` utility in our CSS to give it more weight over other display utilities.
-
-- Extended the `.visually-hidden-focusable` helper to also work on containers, using `:focus-within`.
-
-## Helpers
-
-- <span class="badge bg-danger">Breaking</span> **Responsive embed helpers have been renamed to [ratio helpers]({{< docsref "/helpers/ratio" >}})** with new class names and improved behaviors, as well as a helpful CSS variable.
-  - Classes have been renamed to change `by` to `x` in the aspect ratio. For example, `.ratio-16by9` is now `.ratio-16x9`.
-  - We've dropped the `.embed-responsive-item` and element group selector in favor of a simpler `.ratio > *` selector. No more class is needed, and the ratio helper now works with any HTML element.
-  - The `$embed-responsive-aspect-ratios` Sass map has been renamed to `$aspect-ratios` and its values have been simplified to include the class name and the percentage as the `key: value` pair.
-  - CSS variables are now generated and included for each value in the Sass map. Modify the `--bs-aspect-ratio` variable on the `.ratio` to create any [custom aspect ratio]({{< docsref "/helpers/ratio#custom-ratios" >}}).
-
-- <span class="badge bg-danger">Breaking</span> **"Screen reader" classes are now ["visually hidden" classes]({{< docsref "/helpers/visually-hidden" >}}).**
-  - Changed the Sass file from `scss/helpers/_screenreaders.scss` to `scss/helpers/_visually-hidden.scss`
-  - Renamed `.sr-only` and `.sr-only-focusable` to `.visually-hidden` and `.visually-hidden-focusable`
-  - Renamed `sr-only()` and `sr-only-focusable()` mixins to `visually-hidden()` and `visually-hidden-focusable()`.
-
-- `bootstrap-utilities.css` now also includes our helpers. Helpers don't need to be imported in custom builds anymore.
-
-## JavaScript
-
-- **Dropped jQuery dependency** and rewrote plugins to be in regular JavaScript.
-
-- <span class="badge bg-danger">Breaking</span> Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use `data-bs-toggle` instead of `data-toggle`.
-
-- **All plugins can now accept a CSS selector as the first argument.** You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin:
-
-  ```js
-  var modal = new bootstrap.Modal('#myModal')
-  var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
-  ```
-
-- `popperConfig` can be passed as a function that accepts the Bootstrap's default Popper config as an argument, so that you can merge this default configuration in your way. **Applies to dropdowns, popovers, and tooltips.**
-
-- The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of Popper elements. **Applies to dropdowns, popovers, and tooltips.**
-
-- Removed underscore from public static methods like `_getInstance()` → `getInstance()`.
diff --git a/site/content/docs/5.1/utilities/borders.md b/site/content/docs/5.1/utilities/borders.md
deleted file mode 100644
index 6ba1174c9..000000000
--- a/site/content/docs/5.1/utilities/borders.md
+++ /dev/null
@@ -1,99 +0,0 @@
----
-layout: docs
-title: Borders
-description: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
-group: utilities
-toc: true
----
-
-## Border
-
-Use border utilities to add or remove an element's borders. Choose from all borders or one at a time.
-
-### Additive
-
-{{< example class="bd-example-border-utils" >}}
-<span class="border"></span>
-<span class="border-top"></span>
-<span class="border-end"></span>
-<span class="border-bottom"></span>
-<span class="border-start"></span>
-{{< /example >}}
-
-### Subtractive
-
-{{< example class="bd-example-border-utils bd-example-border-utils-0" >}}
-<span class="border-0"></span>
-<span class="border-top-0"></span>
-<span class="border-end-0"></span>
-<span class="border-bottom-0"></span>
-<span class="border-start-0"></span>
-{{< /example >}}
-
-## Border color
-
-Change the border color using utilities built on our theme colors.
-
-{{< example class="bd-example-border-utils" >}}
-{{< border.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-<span class="border border-{{ .name }}"></span>
-{{- end -}}
-{{< /border.inline >}}
-<span class="border border-white"></span>
-{{< /example >}}
-
-## Border-width
-
-{{< example class="bd-example-border-utils" >}}
-<span class="border border-1"></span>
-<span class="border border-2"></span>
-<span class="border border-3"></span>
-<span class="border border-4"></span>
-<span class="border border-5"></span>
-{{< /example >}}
-
-## Border-radius
-
-Add classes to an element to easily round its corners.
-
-{{< example class="bd-example-rounded-utils" >}}
-{{< placeholder width="75" height="75" class="rounded" title="Example rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
-{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
-{{< /example >}}
-
-### Sizes
-
-Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `3`, and can be configured by modifying the utilities API.
-
-{{< example class="bd-example-rounded-utils" >}}
-{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" >}}
-{{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" >}}
-{{< /example >}}
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="border-variables" file="scss/_variables.scss" >}}
-
-{{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-{{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}}
-
-### Utilities API
-
-Border utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
-
-{{< scss-docs name="utils-borders" file="scss/_utilities.scss" >}}
-
-{{< scss-docs name="utils-border-radius" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.1/utilities/flex.md b/site/content/docs/5.1/utilities/flex.md
deleted file mode 100644
index bbb1824b4..000000000
--- a/site/content/docs/5.1/utilities/flex.md
+++ /dev/null
@@ -1,665 +0,0 @@
----
-layout: docs
-title: Flex
-description: Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
-group: utilities
-toc: true
----
-
-## Enable flex behaviors
-
-Apply `display` utilities to create a flexbox container and transform **direct children elements** into flex items. Flex containers and items are able to be modified further with additional flex properties.
-
-{{< example >}}
-<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
-{{< /example >}}
-
-{{< example >}}
-<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>
-{{< /example >}}
-
-Responsive variations also exist for `.d-flex` and `.d-inline-flex`.
-
-{{< markdown >}}
-{{< flex.inline >}}
-{{- range $.Site.Data.breakpoints }}
-- `.d{{ .abbr }}-flex`
-- `.d{{ .abbr }}-inline-flex`
-{{- end -}}
-{{< /flex.inline >}}
-{{< /markdown >}}
-
-## Direction
-
-Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is `row`. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).
-
-Use `.flex-row` to set a horizontal direction (the browser default), or `.flex-row-reverse` to start the horizontal direction from the opposite side.
-
-{{< example >}}
-<div class="d-flex flex-row bd-highlight mb-3">
-  <div class="p-2 bd-highlight">Flex item 1</div>
-  <div class="p-2 bd-highlight">Flex item 2</div>
-  <div class="p-2 bd-highlight">Flex item 3</div>
-</div>
-<div class="d-flex flex-row-reverse bd-highlight">
-  <div class="p-2 bd-highlight">Flex item 1</div>
-  <div class="p-2 bd-highlight">Flex item 2</div>
-  <div class="p-2 bd-highlight">Flex item 3</div>
-</div>
-{{< /example >}}
-
-Use `.flex-column` to set a vertical direction, or `.flex-column-reverse`  to start the vertical direction from the opposite side.
-
-{{< example >}}
-<div class="d-flex flex-column bd-highlight mb-3">
-  <div class="p-2 bd-highlight">Flex item 1</div>
-  <div class="p-2 bd-highlight">Flex item 2</div>
-  <div class="p-2 bd-highlight">Flex item 3</div>
-</div>
-<div class="d-flex flex-column-reverse bd-highlight">
-  <div class="p-2 bd-highlight">Flex item 1</div>
-  <div class="p-2 bd-highlight">Flex item 2</div>
-  <div class="p-2 bd-highlight">Flex item 3</div>
-</div>
-{{< /example >}}
-
-Responsive variations also exist for `flex-direction`.
-
-{{< markdown >}}
-{{< flex.inline >}}
-{{- range $.Site.Data.breakpoints }}
-- `.flex{{ .abbr }}-row`
-- `.flex{{ .abbr }}-row-reverse`
-- `.flex{{ .abbr }}-column`
-- `.flex{{ .abbr }}-column-reverse`
-{{- end -}}
-{{< /flex.inline >}}
-{{< /markdown >}}
-
-## Justify content
-
-Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `evenly`.
-
-<div class="bd-example">
-  <div class="d-flex justify-content-start bd-highlight mb-3">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex justify-content-end bd-highlight mb-3">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex justify-content-center bd-highlight mb-3">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex justify-content-between bd-highlight mb-3">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex justify-content-around bd-highlight mb-3">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex justify-content-evenly bd-highlight">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-</div>
-
-```html
-<div class="d-flex justify-content-start">...</div>
-<div class="d-flex justify-content-end">...</div>
-<div class="d-flex justify-content-center">...</div>
-<div class="d-flex justify-content-between">...</div>
-<div class="d-flex justify-content-around">...</div>
-<div class="d-flex justify-content-evenly">...</div>
-```
-
-Responsive variations also exist for `justify-content`.
-
-{{< markdown >}}
-{{< flex.inline >}}
-{{- range $.Site.Data.breakpoints }}
-- `.justify-content{{ .abbr }}-start`
-- `.justify-content{{ .abbr }}-end`
-- `.justify-content{{ .abbr }}-center`
-- `.justify-content{{ .abbr }}-between`
-- `.justify-content{{ .abbr }}-around`
-- `.justify-content{{ .abbr }}-evenly`
-{{- end -}}
-{{< /flex.inline >}}
-{{< /markdown >}}
-
-## Align items
-
-Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
-
-<div class="bd-example">
-  <div class="d-flex align-items-start bd-highlight mb-3" style="height: 100px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex align-items-end bd-highlight mb-3" style="height: 100px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex align-items-center bd-highlight mb-3" style="height: 100px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex align-items-baseline bd-highlight mb-3" style="height: 100px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex align-items-stretch bd-highlight" style="height: 100px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-</div>
-
-```html
-<div class="d-flex align-items-start">...</div>
-<div class="d-flex align-items-end">...</div>
-<div class="d-flex align-items-center">...</div>
-<div class="d-flex align-items-baseline">...</div>
-<div class="d-flex align-items-stretch">...</div>
-```
-
-Responsive variations also exist for `align-items`.
-
-{{< markdown >}}
-{{< flex.inline >}}
-{{- range $.Site.Data.breakpoints }}
-- `.align-items{{ .abbr }}-start`
-- `.align-items{{ .abbr }}-end`
-- `.align-items{{ .abbr }}-center`
-- `.align-items{{ .abbr }}-baseline`
-- `.align-items{{ .abbr }}-stretch`
-{{- end -}}
-{{< /flex.inline >}}
-{{< /markdown >}}
-
-## Align self
-
-Use `align-self` utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from the same options as `align-items`: `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
-
-<div class="bd-example">
-  <div class="d-flex bd-highlight mb-3" style="height: 100px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="align-self-start p-2 bd-highlight">Aligned flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex bd-highlight mb-3" style="height: 100px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="align-self-end p-2 bd-highlight">Aligned flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex bd-highlight mb-3" style="height: 100px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="align-self-center p-2 bd-highlight">Aligned flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex bd-highlight mb-3" style="height: 100px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="align-self-baseline p-2 bd-highlight">Aligned flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-  <div class="d-flex bd-highlight" style="height: 100px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="align-self-stretch p-2 bd-highlight">Aligned flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-</div>
-
-```html
-<div class="align-self-start">Aligned flex item</div>
-<div class="align-self-end">Aligned flex item</div>
-<div class="align-self-center">Aligned flex item</div>
-<div class="align-self-baseline">Aligned flex item</div>
-<div class="align-self-stretch">Aligned flex item</div>
-```
-
-Responsive variations also exist for `align-self`.
-
-{{< markdown >}}
-{{< flex.inline >}}
-{{- range $.Site.Data.breakpoints }}
-- `.align-self{{ .abbr }}-start`
-- `.align-self{{ .abbr }}-end`
-- `.align-self{{ .abbr }}-center`
-- `.align-self{{ .abbr }}-baseline`
-- `.align-self{{ .abbr }}-stretch`
-{{- end -}}
-{{< /flex.inline >}}
-{{< /markdown >}}
-
-## Fill
-
-Use the `.flex-fill` class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.
-
-{{< example >}}
-<div class="d-flex bd-highlight">
-  <div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
-  <div class="p-2 flex-fill bd-highlight">Flex item</div>
-  <div class="p-2 flex-fill bd-highlight">Flex item</div>
-</div>
-{{< /example >}}
-
-Responsive variations also exist for `flex-fill`.
-
-{{< markdown >}}
-{{< flex.inline >}}
-{{- range $.Site.Data.breakpoints }}
-- `.flex{{ .abbr }}-fill`
-{{- end -}}
-{{< /flex.inline >}}
-{{< /markdown >}}
-
-## Grow and shrink
-
-Use `.flex-grow-*` utilities to toggle a flex item's ability to grow to fill available space. In the example below, the `.flex-grow-1` elements uses all available space it can, while allowing the remaining two flex items their necessary space.
-
-{{< example >}}
-<div class="d-flex bd-highlight">
-  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
-  <div class="p-2 bd-highlight">Flex item</div>
-  <div class="p-2 bd-highlight">Third flex item</div>
-</div>
-{{< /example >}}
-
-Use `.flex-shrink-*` utilities to toggle a flex item's ability to shrink if necessary. In the example below, the second flex item with `.flex-shrink-1` is forced to wrap its contents to a new line, "shrinking" to allow more space for the previous flex item with `.w-100`.
-
-{{< example >}}
-<div class="d-flex bd-highlight">
-  <div class="p-2 w-100 bd-highlight">Flex item</div>
-  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
-</div>
-{{< /example >}}
-
-Responsive variations also exist for `flex-grow` and `flex-shrink`.
-
-{{< markdown >}}
-{{< flex.inline >}}
-{{- range $.Site.Data.breakpoints }}
-- `.flex{{ .abbr }}-{grow|shrink}-0`
-- `.flex{{ .abbr }}-{grow|shrink}-1`
-{{- end -}}
-{{< /flex.inline >}}
-{{< /markdown >}}
-
-## Auto margins
-
-Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.me-auto`), and pushing two items to the left (`.ms-auto`).
-
-{{< example >}}
-<div class="d-flex bd-highlight mb-3">
-  <div class="p-2 bd-highlight">Flex item</div>
-  <div class="p-2 bd-highlight">Flex item</div>
-  <div class="p-2 bd-highlight">Flex item</div>
-</div>
-
-<div class="d-flex bd-highlight mb-3">
-  <div class="me-auto p-2 bd-highlight">Flex item</div>
-  <div class="p-2 bd-highlight">Flex item</div>
-  <div class="p-2 bd-highlight">Flex item</div>
-</div>
-
-<div class="d-flex bd-highlight mb-3">
-  <div class="p-2 bd-highlight">Flex item</div>
-  <div class="p-2 bd-highlight">Flex item</div>
-  <div class="ms-auto p-2 bd-highlight">Flex item</div>
-</div>
-{{< /example >}}
-
-### With align-items
-
-Vertically move one flex item to the top or bottom of a container by mixing `align-items`, `flex-direction: column`, and `margin-top: auto` or `margin-bottom: auto`.
-
-{{< example >}}
-<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
-  <div class="mb-auto p-2 bd-highlight">Flex item</div>
-  <div class="p-2 bd-highlight">Flex item</div>
-  <div class="p-2 bd-highlight">Flex item</div>
-</div>
-
-<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
-  <div class="p-2 bd-highlight">Flex item</div>
-  <div class="p-2 bd-highlight">Flex item</div>
-  <div class="mt-auto p-2 bd-highlight">Flex item</div>
-</div>
-{{< /example >}}
-
-## Wrap
-
-Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, wrapping with `.flex-wrap`, or reverse wrapping with `.flex-wrap-reverse`.
-
-<div class="bd-example">
-  <div class="d-flex flex-nowrap bd-highlight" style="width: 8rem;">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-</div>
-
-```html
-<div class="d-flex flex-nowrap">
-  ...
-</div>
-```
-
-<div class="bd-example">
-  <div class="d-flex flex-wrap bd-highlight">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-</div>
-
-```html
-<div class="d-flex flex-wrap">
-  ...
-</div>
-```
-
-<div class="bd-example">
-  <div class="d-flex flex-wrap-reverse bd-highlight">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-</div>
-
-```html
-<div class="d-flex flex-wrap-reverse">
-  ...
-</div>
-```
-
-
-Responsive variations also exist for `flex-wrap`.
-
-{{< markdown >}}
-{{< flex.inline >}}
-{{- range $.Site.Data.breakpoints }}
-- `.flex{{ .abbr }}-nowrap`
-- `.flex{{ .abbr }}-wrap`
-- `.flex{{ .abbr }}-wrap-reverse`
-{{- end -}}
-{{< /flex.inline >}}
-{{< /markdown >}}
-
-## Order
-
-Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As `order` takes any integer value from 0 to 5, add custom CSS for any additional values needed.
-
-{{< example >}}
-<div class="d-flex flex-nowrap bd-highlight">
-  <div class="order-3 p-2 bd-highlight">First flex item</div>
-  <div class="order-2 p-2 bd-highlight">Second flex item</div>
-  <div class="order-1 p-2 bd-highlight">Third flex item</div>
-</div>
-{{< /example >}}
-
-Responsive variations also exist for `order`.
-
-{{< markdown >}}
-{{< flex.inline >}}
-{{- range $bp := $.Site.Data.breakpoints -}}
-{{- range (seq 0 5) }}
-- `.order{{ $bp.abbr }}-{{ . }}`
-{{- end -}}
-{{- end -}}
-{{< /flex.inline >}}
-{{< /markdown >}}
-
-Additionally there are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 6`, respectively.
-
-{{< markdown >}}
-{{< flex.inline >}}
-{{- range $bp := $.Site.Data.breakpoints -}}
-{{- range (slice "first" "last") }}
-- `.order{{ $bp.abbr }}-{{ . }}`
-{{- end -}}
-{{- end -}}
-{{< /flex.inline >}}
-{{< /markdown >}}
-
-## Align content
-
-Use `align-content` utilities on flexbox containers to align flex items *together* on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we've enforced `flex-wrap: wrap` and increased the number of flex items.
-
-**Heads up!** This property has no effect on single rows of flex items.
-
-<div class="bd-example">
-  <div class="d-flex align-content-start flex-wrap bd-highlight mb-3" style="height: 200px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-</div>
-
-```html
-<div class="d-flex align-content-start flex-wrap">
-  ...
-</div>
-```
-
-<div class="bd-example">
-  <div class="d-flex align-content-end flex-wrap bd-highlight mb-3" style="height: 200px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-</div>
-
-```html
-<div class="d-flex align-content-end flex-wrap">...</div>
-```
-
-<div class="bd-example">
-  <div class="d-flex align-content-center flex-wrap bd-highlight mb-3" style="height: 200px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-</div>
-
-```html
-<div class="d-flex align-content-center flex-wrap">...</div>
-```
-
-<div class="bd-example">
-  <div class="d-flex align-content-between flex-wrap bd-highlight mb-3" style="height: 200px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-</div>
-
-```html
-<div class="d-flex align-content-between flex-wrap">...</div>
-```
-
-<div class="bd-example">
-  <div class="d-flex align-content-around flex-wrap bd-highlight mb-3" style="height: 200px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-</div>
-
-```html
-<div class="d-flex align-content-around flex-wrap">...</div>
-```
-
-<div class="bd-example">
-  <div class="d-flex align-content-stretch flex-wrap bd-highlight mb-3" style="height: 200px">
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-    <div class="p-2 bd-highlight">Flex item</div>
-  </div>
-</div>
-
-```html
-<div class="d-flex align-content-stretch flex-wrap">...</div>
-```
-
-Responsive variations also exist for `align-content`.
-
-{{< markdown >}}
-{{< flex.inline >}}
-{{- range $.Site.Data.breakpoints }}
-- `.align-content{{ .abbr }}-start`
-- `.align-content{{ .abbr }}-end`
-- `.align-content{{ .abbr }}-center`
-- `.align-content{{ .abbr }}-around`
-- `.align-content{{ .abbr }}-stretch`
-{{- end -}}
-{{< /flex.inline >}}
-{{< /markdown >}}
-
-## Media object
-
-Looking to replicate the [media object component](https://getbootstrap.com/docs/4.6/components/media-object/) from Bootstrap 4? Recreate it in no time with a few flex utilities that allow even more flexibility and customization than before.
-
-{{< example >}}
-<div class="d-flex">
-  <div class="flex-shrink-0">
-    {{< placeholder width="100" height="100" color="#999" background="#e5e5e5" text="Image" >}}
-  </div>
-  <div class="flex-grow-1 ms-3">
-    This is some content from a media component. You can replace this with any content and adjust it as needed.
-  </div>
-</div>
-{{< /example >}}
-
-And say you want to vertically center the content next to the image:
-
-{{< example >}}
-<div class="d-flex align-items-center">
-  <div class="flex-shrink-0">
-    {{< placeholder width="100" height="100" color="#999" background="#e5e5e5" text="Image" >}}
-  </div>
-  <div class="flex-grow-1 ms-3">
-    This is some content from a media component. You can replace this with any content and adjust it as needed.
-  </div>
-</div>
-{{< /example >}}
-
-## Sass
-
-### Utilities API
-
-Flexbox utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
-
-{{< scss-docs name="utils-flex" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.1/utilities/overflow.md b/site/content/docs/5.1/utilities/overflow.md
deleted file mode 100644
index a36374cd5..000000000
--- a/site/content/docs/5.1/utilities/overflow.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-layout: docs
-title: Overflow
-description: Use these shorthand utilities for quickly configuring how content overflows an element.
-group: utilities
----
-
-Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default.
-
-<div class="bd-example d-md-flex">
-  <div class="overflow-auto p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
-    This is an example of using <code>.overflow-auto</code> on an element with set width and height dimensions. By design, this content will vertically scroll.
-  </div>
-  <div class="overflow-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
-    This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions.
-  </div>
-  <div class="overflow-visible p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
-    This is an example of using <code>.overflow-visible</code> on an element with set width and height dimensions.
-  </div>
-  <div class="overflow-scroll p-3 bg-light" style="max-width: 260px; max-height: 100px;">
-    This is an example of using <code>.overflow-scroll</code> on an element with set width and height dimensions.
-  </div>
-</div>
-
-```html
-<div class="overflow-auto">...</div>
-<div class="overflow-hidden">...</div>
-<div class="overflow-visible">...</div>
-<div class="overflow-scroll">...</div>
-```
-
-Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.
-
-## Sass
-
-### Utilities API
-
-Overflow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
-
-{{< scss-docs name="utils-overflow" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.1/utilities/sizing.md b/site/content/docs/5.1/utilities/sizing.md
deleted file mode 100644
index 962575ffe..000000000
--- a/site/content/docs/5.1/utilities/sizing.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-layout: docs
-title: Sizing
-description: Easily make an element as wide or as tall with our width and height utilities.
-group: utilities
-toc: true
----
-
-## Relative to the parent
-
-Width and height utilities are generated from the utility API in `_utilities.scss`. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default. Modify those values as you need to generate different utilities here.
-
-{{< example >}}
-<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
-<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
-<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
-<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
-<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
-{{< /example >}}
-
-{{< example >}}
-<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
-  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
-  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
-  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
-  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
-  <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
-</div>
-{{< /example >}}
-
-You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
-
-{{< example >}}
-{{< placeholder width="100%" height="100" class="mw-100" text="Max-width 100%" >}}
-{{< /example >}}
-
-{{< example >}}
-<div style="height: 100px; background-color: rgba(255,0,0,.1);">
-  <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,.1);">Max-height 100%</div>
-</div>
-{{< /example >}}
-
-## Relative to the viewport
-
-You can also use utilities to set the width and height relative to the viewport.
-
-```html
-<div class="min-vw-100">Min-width 100vw</div>
-<div class="min-vh-100">Min-height 100vh</div>
-<div class="vw-100">Width 100vw</div>
-<div class="vh-100">Height 100vh</div>
-```
-
-## Sass
-
-### Utilities API
-
-Sizing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
-
-{{< scss-docs name="utils-sizing" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.3/_index.html b/site/content/docs/5.3/_index.html
new file mode 100644
index 000000000..f182bde37
--- /dev/null
+++ b/site/content/docs/5.3/_index.html
@@ -0,0 +1,6 @@
+---
+layout: redirect
+sitemap:
+  disable: true
+redirect: "/docs/5.3/getting-started/introduction/"
+---
diff --git a/site/content/docs/5.1/about/brand.md b/site/content/docs/5.3/about/brand.md
index 80c613526..59f262eff 100644
--- a/site/content/docs/5.1/about/brand.md
+++ b/site/content/docs/5.3/about/brand.md
@@ -10,15 +10,15 @@ Have a need for Bootstrap's brand resources? Great! We have only a few guideline
 
 ## Logo
 
-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. **Do not use the Twitter name or logo** in association with Bootstrap.
+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 bg-light rounded-lg">
+<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">
 </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-lg overflow-hidden w-100 mb-3">
+<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">
   </div>
@@ -29,19 +29,15 @@ Our logo mark is also available in black and white. All rules for our primary lo
 
 ## Name
 
-Bootstrap should always be referred to as just **Bootstrap**. No Twitter before it and no capital _s_.
+Bootstrap should always be referred to as just **Bootstrap**. No capital _s_.
 
-<div class="bd-brand-logos d-sm-flex text-center bg-light rounded-lg overflow-hidden w-100 mb-3">
-  <div class="bd-brand-item w-100 p-3">
+<div class="bd-brand-logos d-sm-flex text-center border rounded-3 overflow-hidden w-100 mb-3">
+  <div class="bd-brand-item w-100 px-2 py-5">
     <div class="h3">Bootstrap</div>
     <strong class="text-success">Correct</strong>
   </div>
-  <div class="bd-brand-item w-100 p-3">
-    <div class="h3 text-muted">BootStrap</div>
-    <strong class="text-danger">Incorrect</strong>
-  </div>
-  <div class="bd-brand-item w-100 p-3">
-    <div class="h3 text-muted">Twitter Bootstrap</div>
+  <div class="bd-brand-item w-100 px-2 py-5">
+    <div class="h3 text-body-secondary">BootStrap</div>
     <strong class="text-danger">Incorrect</strong>
   </div>
 </div>
diff --git a/site/content/docs/5.1/about/license.md b/site/content/docs/5.3/about/license.md
index 07e60e00a..8698b1a3b 100644
--- a/site/content/docs/5.1/about/license.md
+++ b/site/content/docs/5.3/about/license.md
@@ -5,7 +5,7 @@ description: Commonly asked questions about Bootstrap's open source license.
 group: about
 ---
 
-Bootstrap is released under the MIT license and is copyright {{< year >}} Twitter. Boiled down to smaller chunks, it can be described with the following conditions.
+Bootstrap is released under the MIT license and is copyright {{< year >}}. Boiled down to smaller chunks, it can be described with the following conditions.
 
 ## It requires you to:
 
@@ -23,8 +23,8 @@ Bootstrap is released under the MIT license and is copyright {{< year >}} Twitte
 - Hold the authors and license owners liable for damages as Bootstrap is provided without warranty
 - Hold the creators or copyright holders of Bootstrap liable
 - Redistribute any piece of Bootstrap without proper attribution
-- Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution
-- Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question
+- Use any marks owned by Bootstrap in any way that might state or imply that Bootstrap endorses your distribution
+- Use any marks owned by Bootstrap in any way that might state or imply that you created the Bootstrap software in question
 
 ## It does not require you to:
 
diff --git a/site/content/docs/5.1/about/overview.md b/site/content/docs/5.3/about/overview.md
index 4fd019314..6ddfde0a8 100644
--- a/site/content/docs/5.1/about/overview.md
+++ b/site/content/docs/5.3/about/overview.md
@@ -5,7 +5,7 @@ description: Learn more about the team maintaining Bootstrap, how and why the pr
 group: about
 aliases:
   - "/about/"
-  - "/docs/5.1/about/"
+  - "/docs/5.3/about/"
 ---
 
 ## Team
@@ -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.
 
@@ -26,4 +26,4 @@ Our latest release, Bootstrap 5, focuses on improving v4's codebase with as few
 
 ## Get involved
 
-Get involved with Bootstrap development by [opening an issue]({{< param repo >}}/issues/new) or submitting a pull request. Read our [contributing guidelines]({{< param repo >}}/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how we develop.
+Get involved with Bootstrap development by [opening an issue]({{< param repo >}}/issues/new/choose) or submitting a pull request. Read our [contributing guidelines]({{< param repo >}}/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how we develop.
diff --git a/site/content/docs/5.1/about/team.md b/site/content/docs/5.3/about/team.md
index 3c1666f29..c00ba4efc 100644
--- a/site/content/docs/5.1/about/team.md
+++ b/site/content/docs/5.3/about/team.md
@@ -20,4 +20,4 @@ Bootstrap is maintained by the founding team and a small group of invaluable cor
 </div>
 {{< /team.inline >}}
 
-Get involved with Bootstrap development by [opening an issue]({{< param repo >}}/issues/new) or submitting a pull request. Read our [contributing guidelines]({{< param repo >}}/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how we develop.
+Get involved with Bootstrap development by [opening an issue]({{< param repo >}}/issues/new/choose) or submitting a pull request. Read our [contributing guidelines]({{< param repo >}}/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how we develop.
diff --git a/site/content/docs/5.1/about/translations.md b/site/content/docs/5.3/about/translations.md
index e719e3a84..5e2ae30c5 100644
--- a/site/content/docs/5.1/about/translations.md
+++ b/site/content/docs/5.3/about/translations.md
@@ -5,7 +5,7 @@ description: Links to community-translated Bootstrap documentation sites.
 group: about
 ---
 
-Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.
+Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up-to-date.
 
 {{< translations.inline >}}
 <ul>
diff --git a/site/content/docs/5.1/components/accordion.md b/site/content/docs/5.3/components/accordion.md
index 535ae46b5..8b22686ad 100644
--- a/site/content/docs/5.1/components/accordion.md
+++ b/site/content/docs/5.3/components/accordion.md
@@ -5,55 +5,59 @@ description: Build vertically collapsing accordions in combination with our Coll
 group: components
 aliases:
   - "/components/"
-  - "/docs/5.1/components/"
+  - "/docs/5.3/components/"
 toc: true
 ---
 
 ## How it works
 
-The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible. To render an accordion that's expanded, add the `.open` class on the `.accordion`.
+The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible.
 
 {{< callout info >}}
-{{< partial "callout-info-prefersreducedmotion.md" >}}
+{{< partial "callouts/info-prefersreducedmotion.md" >}}
 {{< /callout >}}
 
 ## Example
 
 Click the accordions below to expand/collapse the accordion content.
 
+To render an accordion that's expanded by default:
+- add the `.show` class on the `.accordion-collapse` element.
+- drop the `.collapsed` class from the `.accordion-button` element and set its `aria-expanded` attribute to `true`.
+
 {{< example >}}
 <div class="accordion" id="accordionExample">
   <div class="accordion-item">
-    <h2 class="accordion-header" id="headingOne">
+    <h2 class="accordion-header">
       <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
         Accordion Item #1
       </button>
     </h2>
-    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
       <div class="accordion-body">
         <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
       </div>
     </div>
   </div>
   <div class="accordion-item">
-    <h2 class="accordion-header" id="headingTwo">
+    <h2 class="accordion-header">
       <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
         Accordion Item #2
       </button>
     </h2>
-    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
+    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
       <div class="accordion-body">
         <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
       </div>
     </div>
   </div>
   <div class="accordion-item">
-    <h2 class="accordion-header" id="headingThree">
+    <h2 class="accordion-header">
       <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
         Accordion Item #3
       </button>
     </h2>
-    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
       <div class="accordion-body">
         <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
       </div>
@@ -64,37 +68,37 @@ Click the accordions below to expand/collapse the accordion content.
 
 ### Flush
 
-Add `.accordion-flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
+Add `.accordion-flush` to remove some borders and rounded corners to render accordions edge-to-edge with their parent container.
 
-{{< example class="bg-light" >}}
+{{< example class="bg-body-secondary" >}}
 <div class="accordion accordion-flush" id="accordionFlushExample">
   <div class="accordion-item">
-    <h2 class="accordion-header" id="flush-headingOne">
+    <h2 class="accordion-header">
       <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
         Accordion Item #1
       </button>
     </h2>
-    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
+    <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
       <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
     </div>
   </div>
   <div class="accordion-item">
-    <h2 class="accordion-header" id="flush-headingTwo">
+    <h2 class="accordion-header">
       <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
         Accordion Item #2
       </button>
     </h2>
-    <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
+    <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
       <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
     </div>
   </div>
   <div class="accordion-item">
-    <h2 class="accordion-header" id="flush-headingThree">
+    <h2 class="accordion-header">
       <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
         Accordion Item #3
       </button>
     </h2>
-    <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
+    <div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
       <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
     </div>
   </div>
@@ -108,36 +112,36 @@ Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accord
 {{< example >}}
 <div class="accordion" id="accordionPanelsStayOpenExample">
   <div class="accordion-item">
-    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
+    <h2 class="accordion-header">
       <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
         Accordion Item #1
       </button>
     </h2>
-    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
+    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
       <div class="accordion-body">
         <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
       </div>
     </div>
   </div>
   <div class="accordion-item">
-    <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
+    <h2 class="accordion-header">
       <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
         Accordion Item #2
       </button>
     </h2>
-    <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
+    <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
       <div class="accordion-body">
         <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
       </div>
     </div>
   </div>
   <div class="accordion-item">
-    <h2 class="accordion-header" id="panelsStayOpen-headingThree">
+    <h2 class="accordion-header">
       <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
         Accordion Item #3
       </button>
     </h2>
-    <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
+    <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse">
       <div class="accordion-body">
         <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
       </div>
@@ -150,8 +154,16 @@ Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accord
 
 Please read the [collapse accessibility section]({{< docsref "/components/collapse#accessibility" >}}) for more information.
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, accordions now use local CSS variables on `.accordion` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="accordion-css-vars" file="scss/_accordion.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="accordion-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.1/components/alerts.md b/site/content/docs/5.3/components/alerts.md
index d54f7b9ce..8e3d99f53 100644
--- a/site/content/docs/5.1/components/alerts.md
+++ b/site/content/docs/5.3/components/alerts.md
@@ -10,6 +10,10 @@ toc: true
 
 Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).
 
+{{< callout info >}}
+**Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [a Sass loop](#sass-loops).
+{{< /callout >}}
+
 {{< example >}}
 {{< alerts.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
@@ -20,37 +24,21 @@ Alerts are available for any length of text, as well as an optional close button
 {{< /example >}}
 
 {{< callout info >}}
-{{< partial "callout-warning-color-assistive-technologies.md" >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
 {{< /callout >}}
 
 ### Live example
 
 Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.
 
-{{< example >}}
+{{< example stackblitz_add_js="true" >}}
 <div id="liveAlertPlaceholder"></div>
 <button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
 {{< /example >}}
 
 We use the following JavaScript to trigger our live alert demo:
 
-```js
-var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
-var alertTrigger = document.getElementById('liveAlertBtn')
-
-function alert(message, type) {
-  var wrapper = document.createElement('div')
-  wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'
-
-  alertPlaceholder.append(wrapper)
-}
-
-if (alertTrigger) {
-  alertTrigger.addEventListener('click', function () {
-    alert('Nice, you triggered this alert message!', 'success')
-  })
-}
-```
+{{< js-docs name="live-alert" file="site/assets/js/partials/snippets.js" >}}
 
 ### Link color
 
@@ -84,7 +72,7 @@ Similarly, you can use [flexbox utilities]({{< docsref "/utilities/flex" >}}) an
 
 {{< example >}}
 <div class="alert alert-primary d-flex align-items-center" role="alert">
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
+  <svg xmlns="http://www.w3.org/2000/svg" class="bi flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
     <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
   </svg>
   <div>
@@ -96,38 +84,38 @@ Similarly, you can use [flexbox utilities]({{< docsref "/utilities/flex" >}}) an
 Need more than one icon for your alerts? Consider using more Bootstrap Icons and making a local SVG sprite like so to easily reference the same icons repeatedly.
 
 {{< example >}}
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-  <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+  <symbol id="check-circle-fill" viewBox="0 0 16 16">
     <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
   </symbol>
-  <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
+  <symbol id="info-fill" viewBox="0 0 16 16">
     <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
   </symbol>
-  <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
+  <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
     <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
   </symbol>
 </svg>
 
 <div class="alert alert-primary d-flex align-items-center" role="alert">
-  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
+  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
   <div>
     An example alert with an icon
   </div>
 </div>
 <div class="alert alert-success d-flex align-items-center" role="alert">
-  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
+  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
   <div>
     An example success alert with an icon
   </div>
 </div>
 <div class="alert alert-warning d-flex align-items-center" role="alert">
-  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
+  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
   <div>
     An example warning alert with an icon
   </div>
 </div>
 <div class="alert alert-danger d-flex align-items-center" role="alert">
-  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
+  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
   <div>
     An example danger alert with an icon
   </div>
@@ -156,21 +144,29 @@ You can see this in action with a live demo:
 When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you're planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex="-1"` to the element.
 {{< /callout >}}
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="alert-css-vars" file="scss/_alert.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="alert-variables" file="scss/_variables.scss" >}}
 
-### Variant mixin
+### Sass mixins
 
-Used in combination with `$theme-colors` to create contextual modifier classes for our alerts.
+{{< deprecated-in "5.3.0" >}}
 
 {{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}}
 
-### Loop
+### Sass loops
 
-Loop that generates the modifier classes with the `alert-variant()` mixin.
+Loop that generates the modifier classes with an overriding of CSS variables.
 
 {{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}}
 
@@ -181,10 +177,8 @@ Loop that generates the modifier classes with the `alert-variant()` mixin.
 Initialize elements as alerts
 
 ```js
-var alertList = document.querySelectorAll('.alert')
-var alerts = Array.prototype.slice.call(alertList).map(function (element) {
-  return new bootstrap.Alert(element)
-})
+const alertList = document.querySelectorAll('.alert')
+const alerts = [...alertList].map(element => new bootstrap.Alert(element))
 ```
 
 {{< callout info >}}
@@ -201,53 +195,27 @@ See the [triggers](#triggers) section for more details.
 
 ### Methods
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>Method</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <code>close</code>
-      </td>
-      <td>
-        Closes an alert by removing it from the DOM. If the <code>.fade</code> and <code>.show</code> classes are present on the element, the alert will fade out before it is removed.
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>dispose</code>
-      </td>
-      <td>
-        Destroys an element's alert. (Removes stored data on the DOM element)
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>getInstance</code>
-      </td>
-      <td>
-        Static method which allows you to get the alert instance associated to a DOM element, you can use it like this: <code>bootstrap.Alert.getInstance(alert)</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>getOrCreateInstance</code>
-      </td>
-      <td>
-        Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialized.
-        You can use it like this: <code>bootstrap.Alert.getOrCreateInstance(element)</code>
-      </td>
-    </tr>
-  </tbody>
-</table>
+You can create an alert instance with the alert constructor, for example:
+
+```js
+const bsAlert = new bootstrap.Alert('#myAlert')
+```
+
+This makes an alert listen for click events on descendant elements which have the `data-bs-dismiss="alert"` attribute. (Not necessary when using the data-api’s auto-initialization.)
+
+{{< bs-table >}}
+| Method | Description |
+| --- | --- |
+| `close` | Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. |
+| `dispose` | Destroys an element's alert. (Removes stored data on the DOM element) |
+| `getInstance` | Static method which allows you to get the alert instance associated to a DOM element. For example: `bootstrap.Alert.getInstance(alert)`. |
+| `getOrCreateInstance` | Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Alert.getOrCreateInstance(element)`. |
+{{< /bs-table >}}
+
+Basic usage:
 
 ```js
-var alertNode = document.querySelector('.alert')
-var alert = bootstrap.Alert.getInstance(alertNode)
+const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
 alert.close()
 ```
 
@@ -255,32 +223,16 @@ alert.close()
 
 Bootstrap's alert plugin exposes a few events for hooking into alert functionality.
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>Event</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>close.bs.alert</code></td>
-      <td>
-        Fires immediately when the <code>close</code> instance method is called.
-      </td>
-    </tr>
-    <tr>
-      <td><code>closed.bs.alert</code></td>
-      <td>
-        Fired when the alert has been closed and CSS transitions have completed.
-      </td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table >}}
+| Event | Description |
+| --- | --- |
+| `close.bs.alert` | Fires immediately when the `close` instance method is called. |
+| `closed.bs.alert` | Fired when the alert has been closed and CSS transitions have completed. |
+{{< /bs-table >}}
 
 ```js
-var myAlert = document.getElementById('myAlert')
-myAlert.addEventListener('closed.bs.alert', function () {
+const myAlert = document.getElementById('myAlert')
+myAlert.addEventListener('closed.bs.alert', event => {
   // do something, for instance, explicitly move focus to the most appropriate element,
   // so it doesn't get lost/reset to the start of the page
   // document.getElementById('...').focus()
diff --git a/site/content/docs/5.1/components/badge.md b/site/content/docs/5.3/components/badge.md
index de80d3b27..56ade490d 100644
--- a/site/content/docs/5.1/components/badge.md
+++ b/site/content/docs/5.3/components/badge.md
@@ -13,12 +13,12 @@ Badges scale to match the size of the immediate parent element by using relative
 ### Headings
 
 {{< example >}}
-<h1>Example heading <span class="badge bg-secondary">New</span></h1>
-<h2>Example heading <span class="badge bg-secondary">New</span></h2>
-<h3>Example heading <span class="badge bg-secondary">New</span></h3>
-<h4>Example heading <span class="badge bg-secondary">New</span></h4>
-<h5>Example heading <span class="badge bg-secondary">New</span></h5>
-<h6>Example heading <span class="badge bg-secondary">New</span></h6>
+<h1>Example heading <span class="badge text-bg-secondary">New</span></h1>
+<h2>Example heading <span class="badge text-bg-secondary">New</span></h2>
+<h3>Example heading <span class="badge text-bg-secondary">New</span></h3>
+<h4>Example heading <span class="badge text-bg-secondary">New</span></h4>
+<h5>Example heading <span class="badge text-bg-secondary">New</span></h5>
+<h6>Example heading <span class="badge text-bg-secondary">New</span></h6>
 {{< /example >}}
 
 ### Buttons
@@ -27,7 +27,7 @@ Badges can be used as part of links or buttons to provide a counter.
 
 {{< example >}}
 <button type="button" class="btn btn-primary">
-  Notifications <span class="badge bg-secondary">4</span>
+  Notifications <span class="badge text-bg-secondary">4</span>
 </button>
 {{< /example >}}
 
@@ -62,17 +62,19 @@ You can also replace the `.badge` class with a few more utilities without a coun
 
 ## Background colors
 
-Use our background utility classes to quickly change the appearance of a badge. Please note that when using Bootstrap's default `.bg-light`, you'll likely need a text color utility like `.text-dark` for proper styling. This is because background utilities do not set anything but `background-color`.
+{{< added-in "5.2.0" >}}
+
+Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]({{< docsref "helpers/color-background" >}}). Previously it was required to manually pair your choice of [`.text-{color}`]({{< docsref "/utilities/colors" >}}) and [`.bg-{color}`]({{< docsref "/utilities/background" >}}) utilities for styling, which you still may use if you prefer.
 
 {{< example >}}
 {{< badge.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
-<span class="badge bg-{{ .name }}{{ with .contrast_color }} text-{{ . }}{{ end }}">{{ .name | title }}</span>{{- end -}}
+<span class="badge text-bg-{{ .name }}">{{ .name | title }}</span>{{- end -}}
 {{< /badge.inline >}}
 {{< /example >}}
 
 {{< callout info >}}
-{{< partial "callout-warning-color-assistive-technologies.md" >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
 {{< /callout >}}
 
 ## Pill badges
@@ -82,12 +84,20 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger
 {{< example >}}
 {{< badge.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
-<span class="badge rounded-pill bg-{{ .name }}{{ with .contrast_color }} text-{{ . }}{{ end }}">{{ .name | title }}</span>{{- end -}}
+<span class="badge rounded-pill text-bg-{{ .name }}">{{ .name | title }}</span>{{- end -}}
 {{< /badge.inline >}}
 {{< /example >}}
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, badges now use local CSS variables on `.badge` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="badge-css-vars" file="scss/_badge.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="badge-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.1/components/breadcrumb.md b/site/content/docs/5.3/components/breadcrumb.md
index 9143e7612..9025ce9cd 100644
--- a/site/content/docs/5.1/components/breadcrumb.md
+++ b/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(">");
@@ -54,8 +54,12 @@ $breadcrumb-divider: quote(">");
 
 It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom property, or use the Sass variable.
 
+{{< callout info >}}
+**Inlined SVG requires properly escaped characters.** Some reserved characters, such as `<`, `>` and `#`, must be URL-encoded or escaped. We do this with the `$breadcrumb-divider` variable using our [`escape-svg()` Sass function]({{< docsref "/customize/sass#escape-svg" >}}). When customizing the CSS variable, you must handle this yourself. Read [Kevin Weber's explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for more info.
+{{< /callout >}}
+
 {{< example >}}
-<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
+<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
   <ol class="breadcrumb">
     <li class="breadcrumb-item"><a href="#">Home</a></li>
     <li class="breadcrumb-item active" aria-current="page">Library</li>
@@ -64,7 +68,7 @@ It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom
 {{< /example >}}
 
 ```scss
-$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");
+$breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");
 ```
 
 You can also remove the divider setting `--bs-breadcrumb-divider: '';` (empty strings in CSS custom properties counts as a value), or setting the Sass variable to `$breadcrumb-divider: none;`.
@@ -87,10 +91,18 @@ $breadcrumb-divider: none;
 
 Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element, as well as applying an `aria-current="page"` to the last item of the set to indicate that it represents the current page.
 
-For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).
+For more information, see the [ARIA Authoring Practices Guide breadcrumb pattern](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/).
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, breadcrumbs now use local CSS variables on `.breadcrumb` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="breadcrumb-css-vars" file="scss/_breadcrumb.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="breadcrumb-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.1/components/button-group.md b/site/content/docs/5.3/components/button-group.md
index 184ca4973..545467fec 100644
--- a/site/content/docs/5.1/components/button-group.md
+++ b/site/content/docs/5.3/components/button-group.md
@@ -18,12 +18,8 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
 </div>
 {{< /example >}}
 
-{{< callout warning >}}
-##### Ensure correct `role` and provide a label
-
-In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`.
-
-In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
+{{< callout info >}}
+Button groups require an appropriate `role` attribute and explicit label to ensure assistive technologies like screen readers identify buttons as grouped and announce them. Use `role="group"` for button groups or `role="toolbar"` for button toolbars. Then use `aria-label` or `aria-labelledby` to label them.
 {{< /callout >}}
 
 These classes can also be added to groups of links, as an alternative to the [`.nav` navigation components]({{< docsref "/components/navs-tabs" >}}).
@@ -143,31 +139,25 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
 
 Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.
 
-<div class="bd-example">
-  <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
-    <button type="button" class="btn btn-outline-dark">Left</button>
-    <button type="button" class="btn btn-outline-dark">Middle</button>
-    <button type="button" class="btn btn-outline-dark">Right</button>
-  </div>
-  <br>
-  <div class="btn-group" role="group" aria-label="Default button group">
-    <button type="button" class="btn btn-outline-dark">Left</button>
-    <button type="button" class="btn btn-outline-dark">Middle</button>
-    <button type="button" class="btn btn-outline-dark">Right</button>
-  </div>
-  <br>
-  <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
-    <button type="button" class="btn btn-outline-dark">Left</button>
-    <button type="button" class="btn btn-outline-dark">Middle</button>
-    <button type="button" class="btn btn-outline-dark">Right</button>
-  </div>
+{{< example >}}
+<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
+  <button type="button" class="btn btn-outline-primary">Left</button>
+  <button type="button" class="btn btn-outline-primary">Middle</button>
+  <button type="button" class="btn btn-outline-primary">Right</button>
 </div>
-
-```html
-<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
-<div class="btn-group" role="group" aria-label="...">...</div>
-<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
-```
+<br>
+<div class="btn-group" role="group" aria-label="Default button group">
+  <button type="button" class="btn btn-outline-primary">Left</button>
+  <button type="button" class="btn btn-outline-primary">Middle</button>
+  <button type="button" class="btn btn-outline-primary">Right</button>
+</div>
+<br>
+<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
+  <button type="button" class="btn btn-outline-primary">Left</button>
+  <button type="button" class="btn btn-outline-primary">Middle</button>
+  <button type="button" class="btn btn-outline-primary">Right</button>
+</div>
+{{< /example >}}
 
 ## Nesting
 
@@ -179,10 +169,10 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
   <button type="button" class="btn btn-primary">2</button>
 
   <div class="btn-group" role="group">
-    <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
       Dropdown
     </button>
-    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
+    <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Dropdown link</a></li>
       <li><a class="dropdown-item" href="#">Dropdown link</a></li>
     </ul>
@@ -194,75 +184,65 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
 
 Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
 
-<div class="bd-example">
-  <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
-    <button type="button" class="btn btn-dark">Button</button>
-    <button type="button" class="btn btn-dark">Button</button>
-    <button type="button" class="btn btn-dark">Button</button>
-    <button type="button" class="btn btn-dark">Button</button>
-    <button type="button" class="btn btn-dark">Button</button>
-    <button type="button" class="btn btn-dark">Button</button>
-  </div>
+{{< example >}}
+<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
+  <button type="button" class="btn btn-primary">Button</button>
+  <button type="button" class="btn btn-primary">Button</button>
+  <button type="button" class="btn btn-primary">Button</button>
+  <button type="button" class="btn btn-primary">Button</button>
 </div>
+{{< /example >}}
 
-<div class="bd-example">
-  <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
-    <button type="button" class="btn btn-primary">Button</button>
-    <button type="button" class="btn btn-primary">Button</button>
-    <div class="btn-group" role="group">
-      <button id="btnGroupVerticalDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-        Dropdown
-      </button>
-      <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
-        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
-        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
-      </ul>
-    </div>
-    <button type="button" class="btn btn-primary">Button</button>
-    <button type="button" class="btn btn-primary">Button</button>
-    <div class="btn-group" role="group">
-      <button id="btnGroupVerticalDrop2" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-        Dropdown
-      </button>
-      <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
-        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
-        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
-      </ul>
-    </div>
-    <div class="btn-group" role="group">
-      <button id="btnGroupVerticalDrop3" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-        Dropdown
-      </button>
-      <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
-        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
-        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
-      </ul>
-    </div>
-    <div class="btn-group" role="group">
-      <button id="btnGroupVerticalDrop4" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-        Dropdown
-      </button>
-      <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
-        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
-        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
-      </ul>
-    </div>
+{{< example >}}
+<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
+  <div class="btn-group" role="group">
+    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+      Dropdown
+    </button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+    </ul>
   </div>
-</div>
-
-<div class="bd-example">
-  <div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
-    <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
-    <label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
-    <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
-    <label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
-    <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
-    <label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
+  <button type="button" class="btn btn-primary">Button</button>
+  <button type="button" class="btn btn-primary">Button</button>
+  <div class="btn-group dropstart" role="group">
+    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+      Dropdown
+    </button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+    </ul>
+  </div>
+  <div class="btn-group dropend" role="group">
+    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+      Dropdown
+    </button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+    </ul>
+  </div>
+  <div class="btn-group dropup" role="group">
+    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+      Dropdown
+    </button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
+    </ul>
   </div>
 </div>
+{{< /example >}}
 
-```html
-<div class="btn-group-vertical">
-  ...
+{{< example >}}
+<div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
+  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
+  <label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
+  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
+  <label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
+  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
+  <label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
 </div>
-```
+{{< /example >}}
diff --git a/site/content/docs/5.1/components/buttons.md b/site/content/docs/5.3/components/buttons.md
index 1f279ffd7..83a61382a 100644
--- a/site/content/docs/5.1/components/buttons.md
+++ b/site/content/docs/5.3/components/buttons.md
@@ -6,9 +6,23 @@ group: components
 toc: true
 ---
 
-## Examples
+## Base class
 
-Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
+Bootstrap has a base `.btn` class that sets up basic styles such as padding and content alignment. By default, `.btn` controls have a transparent border and background color, and lack any explicit focus and hover styles.
+
+{{< example >}}
+<button type="button" class="btn">Base class</button>
+{{< /example >}}
+
+The `.btn` class is intended to be used in conjunction with our button variants, or to serve as a basis for your own custom styles.
+
+{{< callout warning >}}
+If you are using the `.btn` class on its own, remember to at least define some explicit `:focus` and/or `:focus-visible` styles.
+{{< /callout >}}
+
+## Variants
+
+Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control.
 
 {{< example >}}
 {{< buttons.inline >}}
@@ -21,7 +35,7 @@ Bootstrap includes several predefined button styles, each serving its own semant
 {{< /example >}}
 
 {{< callout info >}}
-{{< partial "callout-warning-color-assistive-technologies.md" >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
 {{< /callout >}}
 
 ## Disable text wrapping
@@ -72,13 +86,24 @@ Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes
 <button type="button" class="btn btn-secondary btn-sm">Small button</button>
 {{< /example >}}
 
+You can even roll your own custom sizing with CSS variables:
+
+{{< example >}}
+<button type="button" class="btn btn-primary"
+        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
+  Custom button
+</button>
+{{< /example >}}
+
 ## Disabled state
 
 Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element. Disabled buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.
 
 {{< example >}}
-<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
-<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
+<button type="button" class="btn btn-primary" disabled>Primary button</button>
+<button type="button" class="btn btn-secondary" disabled>Button</button>
+<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
+<button type="button" class="btn btn-outline-secondary" disabled>Button</button>
 {{< /example >}}
 
 Disabled buttons using the `<a>` element behave a bit different:
@@ -89,8 +114,8 @@ Disabled buttons using the `<a>` element behave a bit different:
 - Disabled buttons using `<a>` *should not* include the `href` attribute.
 
 {{< example >}}
-<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
-<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
+<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
+<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>
 {{< /example >}}
 
 ### Link functionality caveat
@@ -98,13 +123,13 @@ Disabled buttons using the `<a>` element behave a bit different:
 To cover cases where you have to keep the `href` attribute on a disabled link, the `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s. Note that this CSS property is not yet standardized for HTML, but all modern browsers support it. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to `aria-disabled="true"`, also include a `tabindex="-1"` attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether.
 
 {{< example >}}
-<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
-<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
+<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
+<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
 {{< /example >}}
 
 ## Block buttons
 
-Create responsive stacks of full-width, "block buttons" like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.
+Create responsive stacks of full-width, "block buttons" like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button-specific classes, we have much greater control over spacing, alignment, and responsive behaviors.
 
 {{< example >}}
 <div class="d-grid gap-2">
@@ -131,7 +156,7 @@ You can adjust the width of your block buttons with grid column width classes. F
 </div>
 {{< /example >}}
 
-Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they're no longer stacked.
+Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right-align the buttons when they're no longer stacked.
 
 {{< example >}}
 <div class="d-grid gap-2 d-md-flex justify-content-md-end">
@@ -153,15 +178,29 @@ Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{
 Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to ensure that it is conveyed appropriately to assistive technologies.
 
 {{< example >}}
-<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
-<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
-<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>
+<p class="d-inline-flex gap-1">
+  <button type="button" class="btn" data-bs-toggle="button">Toggle button</button>
+  <button type="button" class="btn active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
+  <button type="button" class="btn" disabled data-bs-toggle="button">Disabled toggle button</button>
+</p>
+<p class="d-inline-flex gap-1">
+  <button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
+  <button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
+  <button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
+</p>
 {{< /example >}}
 
 {{< example >}}
-<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
-<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
-<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
+<p class="d-inline-flex gap-1">
+  <a href="#" class="btn" role="button" data-bs-toggle="button">Toggle link</a>
+  <a href="#" class="btn active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
+  <a class="btn disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
+</p>
+<p class="d-inline-flex gap-1">
+  <a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
+  <a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
+  <a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
+</p>
 {{< /example >}}
 
 ### Methods
@@ -169,71 +208,52 @@ Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre
 You can create a button instance with the button constructor, for example:
 
 ```js
-var button = document.getElementById('myButton')
-var bsButton = new bootstrap.Button(button)
+const bsButton = new bootstrap.Button('#myButton')
 ```
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>Method</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <code>toggle</code>
-      </td>
-      <td>
-        Toggles push state. Gives the button the appearance that it has been activated.
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>dispose</code>
-      </td>
-      <td>
-        Destroys an element's button. (Removes stored data on the DOM element)
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>getInstance</code>
-      </td>
-      <td>
-        Static method which allows you to get the button instance associated to a DOM element, you can use it like this: <code>bootstrap.Button.getInstance(element)</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>getOrCreateInstance</code>
-      </td>
-      <td>
-        Static method which returns a button instance associated to a DOM element or create a new one in case it wasn't initialized.
-        You can use it like this: <code>bootstrap.Button.getOrCreateInstance(element)</code>
-      </td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table "table" >}}
+| Method | Description |
+| --- | --- |
+| `dispose` | Destroys an element's button. (Removes stored data on the DOM element) |
+| `getInstance` | Static method which allows you to get the button instance associated with a DOM element, you can use it like this: `bootstrap.Button.getInstance(element)`. |
+| `getOrCreateInstance` | Static method which returns a button instance associated with a DOM element or creates a new one in case it wasn't initialized. You can use it like this: `bootstrap.Button.getOrCreateInstance(element)`. |
+| `toggle` | Toggles push state. Gives the button the appearance that it has been activated. |
+{{< /bs-table >}}
 
 For example, to toggle all buttons
 
 ```js
-var buttons = document.querySelectorAll('.btn')
-buttons.forEach(function (button) {
-  var button = new bootstrap.Button(button)
+document.querySelectorAll('.btn').forEach(buttonElement => {
+  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
   button.toggle()
 })
 ```
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, buttons now use local CSS variables on `.btn` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="btn-css-vars" file="scss/_buttons.scss" >}}
+
+Each `.btn-*` modifier class updates the appropriate CSS variables to minimize additional CSS rules with our `button-variant()`, `button-outline-variant()`, and `button-size()` mixins.
+
+Here's an example of building a custom `.btn-*` modifier class as we do for the buttons unique to our docs by reassigning Bootstrap's CSS variables with a mixture of our own CSS and Sass variables.
+
+<div class="bd-example">
+  <button type="button" class="btn btn-bd-primary">Custom button</button>
+</div>
+
+{{< scss-docs name="btn-css-vars-example" file="site/assets/scss/_buttons.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="btn-variables" file="scss/_variables.scss" >}}
 
-### Mixins
+### Sass mixins
 
 There are three mixins for buttons: button and button outline variant mixins (both based on `$theme-colors`), plus a button size mixin.
 
@@ -243,7 +263,7 @@ There are three mixins for buttons: button and button outline variant mixins (bo
 
 {{< scss-docs name="btn-size-mixin" file="scss/mixins/_buttons.scss" >}}
 
-### Loops
+### Sass loops
 
 Button variants (for regular and outline buttons) use their respective mixins with our `$theme-colors` map to generate the modifier classes in `scss/_buttons.scss`.
 
diff --git a/site/content/docs/5.1/components/card.md b/site/content/docs/5.3/components/card.md
index 3effb21d0..c504fef61 100644
--- a/site/content/docs/5.1/components/card.md
+++ b/site/content/docs/5.3/components/card.md
@@ -53,7 +53,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
 <div class="card" style="width: 18rem;">
   <div class="card-body">
     <h5 class="card-title">Card title</h5>
-    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
+    <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
     <a href="#" class="card-link">Card link</a>
     <a href="#" class="card-link">Another link</a>
@@ -63,7 +63,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
 
 ### Images
 
-`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.
+`.card-img-top` and `.card-img-bottom` respectively set the top and bottom corners rounded to match the card's borders. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.
 
 {{< example >}}
 <div class="card" style="width: 18rem;">
@@ -191,7 +191,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
-  <div class="card-footer text-muted">
+  <div class="card-footer text-body-secondary">
     2 days ago
   </div>
 </div>
@@ -207,7 +207,7 @@ Using the grid, wrap cards in columns and rows as needed.
 
 {{< example >}}
 <div class="row">
-  <div class="col-sm-6">
+  <div class="col-sm-6 mb-3 mb-sm-0">
     <div class="card">
       <div class="card-body">
         <h5 class="card-title">Special title treatment</h5>
@@ -233,7 +233,7 @@ Using the grid, wrap cards in columns and rows as needed.
 Use our handful of [available sizing utilities]({{< docsref "/utilities/sizing" >}}) to quickly set a card's width.
 
 {{< example >}}
-<div class="card w-75">
+<div class="card w-75 mb-3">
   <div class="card-body">
     <h5 class="card-title">Card title</h5>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
@@ -269,7 +269,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
 You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{< docsref "/utilities/text#text-alignment" >}}).
 
 {{< example >}}
-<div class="card" style="width: 18rem;">
+<div class="card mb-3" style="width: 18rem;">
   <div class="card-body">
     <h5 class="card-title">Special title treatment</h5>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
@@ -277,7 +277,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
   </div>
 </div>
 
-<div class="card text-center" style="width: 18rem;">
+<div class="card text-center mb-3" style="width: 18rem;">
   <div class="card-body">
     <h5 class="card-title">Special title treatment</h5>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
@@ -309,7 +309,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
         <a class="nav-link" href="#">Link</a>
       </li>
       <li class="nav-item">
-        <a class="nav-link disabled">Disabled</a>
+        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
       </li>
     </ul>
   </div>
@@ -332,7 +332,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
         <a class="nav-link" href="#">Link</a>
       </li>
       <li class="nav-item">
-        <a class="nav-link disabled">Disabled</a>
+        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
       </li>
     </ul>
   </div>
@@ -358,14 +358,14 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
   <div class="card-body">
     <h5 class="card-title">Card title</h5>
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
   </div>
 </div>
 <div class="card">
   <div class="card-body">
     <h5 class="card-title">Card title</h5>
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
   </div>
   {{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}}
 </div>
@@ -376,12 +376,12 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
 Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need additional styles or utilities.
 
 {{< example >}}
-<div class="card bg-dark text-white">
+<div class="card text-bg-dark">
   {{< placeholder width="100%" height="270" class="bd-placeholder-img-lg card-img" text="Card image" >}}
   <div class="card-img-overlay">
     <h5 class="card-title">Card title</h5>
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-    <p class="card-text">Last updated 3 mins ago</p>
+    <p class="card-text"><small>Last updated 3 mins ago</small></p>
   </div>
 </div>
 {{< /example >}}
@@ -404,7 +404,7 @@ Using a combination of grid and utility classes, cards can be made horizontal in
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+        <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
       </div>
     </div>
   </div>
@@ -417,12 +417,14 @@ Cards include various options for customizing their backgrounds, borders, and co
 
 ### Background and color
 
-Use [text color]({{< docsref "/utilities/colors" >}}) and [background utilities]({{< docsref "/utilities/background" >}}) to change the appearance of a card.
+{{< added-in "5.2.0" >}}
+
+Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]({{< docsref "helpers/color-background" >}}). Previously it was required to manually pair your choice of [`.text-{color}`]({{< docsref "/utilities/colors" >}}) and [`.bg-{color}`]({{< docsref "/utilities/background" >}}) utilities for styling, which you still may use if you prefer.
 
 {{< example >}}
 {{< card.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
-<div class="card{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }} bg-{{ .name }} mb-3" style="max-width: 18rem;">
+<div class="card text-bg-{{ .name }} mb-3" style="max-width: 18rem;">
   <div class="card-header">Header</div>
   <div class="card-body">
     <h5 class="card-title">{{ .name | title }} card title</h5>
@@ -434,7 +436,7 @@ Use [text color]({{< docsref "/utilities/colors" >}}) and [background utilities]
 {{< /example >}}
 
 {{< callout info >}}
-{{< partial "callout-warning-color-assistive-technologies.md" >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
 {{< /callout >}}
 
 ### Border
@@ -485,7 +487,7 @@ Use card groups to render cards as a single, attached element with equal width a
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
     </div>
   </div>
   <div class="card">
@@ -493,7 +495,7 @@ Use card groups to render cards as a single, attached element with equal width a
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
     </div>
   </div>
   <div class="card">
@@ -501,7 +503,7 @@ Use card groups to render cards as a single, attached element with equal width a
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
     </div>
   </div>
 </div>
@@ -518,7 +520,7 @@ When using card groups with footers, their content will automatically line up.
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
     </div>
     <div class="card-footer">
-      <small class="text-muted">Last updated 3 mins ago</small>
+      <small class="text-body-secondary">Last updated 3 mins ago</small>
     </div>
   </div>
   <div class="card">
@@ -528,7 +530,7 @@ When using card groups with footers, their content will automatically line up.
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
     </div>
     <div class="card-footer">
-      <small class="text-muted">Last updated 3 mins ago</small>
+      <small class="text-body-secondary">Last updated 3 mins ago</small>
     </div>
   </div>
   <div class="card">
@@ -538,7 +540,7 @@ When using card groups with footers, their content will automatically line up.
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
     </div>
     <div class="card-footer">
-      <small class="text-muted">Last updated 3 mins ago</small>
+      <small class="text-body-secondary">Last updated 3 mins ago</small>
     </div>
   </div>
 </div>
@@ -687,7 +689,7 @@ Just like with card groups, card footers will automatically line up.
         <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
       </div>
       <div class="card-footer">
-        <small class="text-muted">Last updated 3 mins ago</small>
+        <small class="text-body-secondary">Last updated 3 mins ago</small>
       </div>
     </div>
   </div>
@@ -699,7 +701,7 @@ Just like with card groups, card footers will automatically line up.
         <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
       </div>
       <div class="card-footer">
-        <small class="text-muted">Last updated 3 mins ago</small>
+        <small class="text-body-secondary">Last updated 3 mins ago</small>
       </div>
     </div>
   </div>
@@ -711,7 +713,7 @@ Just like with card groups, card footers will automatically line up.
         <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
       </div>
       <div class="card-footer">
-        <small class="text-muted">Last updated 3 mins ago</small>
+        <small class="text-body-secondary">Last updated 3 mins ago</small>
       </div>
     </div>
   </div>
@@ -722,8 +724,16 @@ Just like with card groups, card footers will automatically line up.
 
 In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we've made a [demo example]({{< docsref "/examples/masonry" >}}) to help you get started.
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, cards now use local CSS variables on `.card` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="card-css-vars" file="scss/_card.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="card-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.1/components/carousel.md b/site/content/docs/5.3/components/carousel.md
index 5a060f26f..5c2f1b6a1 100644
--- a/site/content/docs/5.1/components/carousel.md
+++ b/site/content/docs/5.3/components/carousel.md
@@ -8,48 +8,24 @@ toc: true
 
 ## How it works
 
-The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
+- The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
 
-In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
+- For performance reasons, **carousels must be manually initialized** using the [carousel constructor method](#methods). Without initialization, some of the event listeners (specifically, the events needed touch/swipe support) will not be registered until a user has explicitly activated a control or indicator.
 
-{{< callout info >}}
-{{< partial "callout-info-prefersreducedmotion.md" >}}
-{{< /callout >}}
-
-Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
-
-## Example
-
-Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit.
-
-**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique `id` on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-bs-target` attribute (or `href` for links) that matches the `id` of the `.carousel` element.
+  The only exception are [autoplaying carousels](#autoplaying-carousels) with the `data-bs-ride="carousel"` attribute as these are initialized automatically on page load. If you're using autoplaying carousels with the data attribute, **don't explicitly initialize the same carousels with the constructor method.**
 
-### Slides only
+- Nested carousels are not supported. You should also be aware that carousels in general can often cause usability and accessibility challenges.
 
-Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-100` on carousel images to prevent browser default image alignment.
-
-{{< example >}}
-<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
-  <div class="carousel-inner">
-    <div class="carousel-item active">
-      {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
-    </div>
-    <div class="carousel-item">
-      {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" >}}
-    </div>
-    <div class="carousel-item">
-      {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
-    </div>
-  </div>
-</div>
-{{< /example >}}
+{{< callout info >}}
+{{< partial "callouts/info-prefersreducedmotion.md" >}}
+{{< /callout >}}
 
-### With controls
+## Basic examples
 
-Adding in the previous and next controls. We recommend using `<button>` elements, but you can also use `<a>` elements with `role="button"`.
+Here is a basic example of a carousel with three slides. Note the previous/next controls. We recommend using `<button>` elements, but you can also use `<a>` elements with `role="button"`.
 
 {{< example >}}
-<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
+<div id="carouselExample" class="carousel slide">
   <div class="carousel-inner">
     <div class="carousel-item active">
       {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
@@ -61,23 +37,27 @@ Adding in the previous and next controls. We recommend using `<button>` elements
       {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
     </div>
   </div>
-  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
+  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="visually-hidden">Previous</span>
   </button>
-  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
+  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="visually-hidden">Next</span>
   </button>
 </div>
 {{< /example >}}
 
-### With indicators
+Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit.
+
+**You must add the `.active` class to one of the slides**, otherwise the carousel will not be visible. Also be sure to set a unique `id` on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-bs-target` attribute (or `href` for links) that matches the `id` of the `.carousel` element.
 
-You can also add the indicators to the carousel, alongside the controls, too.
+### Indicators
+
+You can add indicators to the carousel, alongside the previous/next controls. The indicators let users jump directly to a particular slide.
 
 {{< example >}}
-<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
+<div id="carouselExampleIndicators" class="carousel slide">
   <div class="carousel-indicators">
     <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
     <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
@@ -105,12 +85,12 @@ You can also add the indicators to the carousel, alongside the controls, too.
 </div>
 {{< /example >}}
 
-### With captions
+### Captions
 
-Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{< docsref "/utilities/display" >}}). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
+You can add captions to your slides with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{< docsref "/utilities/display" >}}). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
 
 {{< example >}}
-<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
+<div id="carouselExampleCaptions" class="carousel slide">
   <div class="carousel-indicators">
     <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
     <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
@@ -152,10 +132,10 @@ Add captions to your slides easily with the `.carousel-caption` element within a
 
 ### Crossfade
 
-Add `.carousel-fade` to your carousel to animate slides with a fade transition instead of a slide.
+Add `.carousel-fade` to your carousel to animate slides with a fade transition instead of a slide. Depending on your carousel content (e.g., text only slides), you may want to add `.bg-body` or some custom CSS to the `.carousel-item`s for proper crossfading.
 
 {{< example >}}
-<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
+<div id="carouselExampleFade" class="carousel slide carousel-fade">
   <div class="carousel-inner">
     <div class="carousel-item active">
       {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
@@ -178,6 +158,66 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
 </div>
 {{< /example >}}
 
+## Autoplaying carousels
+
+You can make your carousels autoplay on page load by setting the `ride` option to `carousel`. Autoplaying carousels automatically pause while hovered with the mouse. This behavior can be controlled with the `pause` option. In browsers that support the [Page Visibility API](https://www.w3.org/TR/page-visibility/), the carousel will stop cycling when the webpage is not visible to the user (such as when the browser tab is inactive, or when the browser window is minimized).
+
+{{< callout info >}}
+For accessibility reasons, we recommend avoiding the use of autoplaying carousels. If your page does include an autoplaying carousel, we recommend providing an additional button or control to explicitly pause/stop the carousel.
+
+See [WCAG 2.2 Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/TR/WCAG/#pause-stop-hide).
+{{< /callout >}}
+
+{{< example >}}
+<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
+    </div>
+    <div class="carousel-item">
+      {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" >}}
+    </div>
+    <div class="carousel-item">
+      {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
+    </div>
+  </div>
+  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Previous</span>
+  </button>
+  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Next</span>
+  </button>
+</div>
+{{< /example >}}
+
+When the `ride` option is set to `true`, rather than `carousel`, the carousel won't automatically start to cycle on page load. Instead, it will only start after the first user interaction.
+
+{{< example >}}
+<div id="carouselExampleRide" class="carousel slide" data-bs-ride="true">
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
+    </div>
+    <div class="carousel-item">
+      {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" >}}
+    </div>
+    <div class="carousel-item">
+      {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
+    </div>
+  </div>
+  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="prev">
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Previous</span>
+  </button>
+  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Next</span>
+  </button>
+</div>
+{{< /example >}}
+
 ### Individual `.carousel-item` interval
 
 Add `data-bs-interval=""` to a `.carousel-item` to change the amount of time to delay between automatically cycling to the next item.
@@ -206,12 +246,32 @@ Add `data-bs-interval=""` to a `.carousel-item` to change the amount of time to
 </div>
 {{< /example >}}
 
-### Disable touch swiping
+### Autoplaying carousels without controls
 
-Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled using the `data-bs-touch` attribute. The example below also does not include the `data-bs-ride` attribute and has `data-bs-interval="false"` so it doesn't autoplay.
+Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-100` on carousel images to prevent browser default image alignment.
+
+{{< example >}}
+<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
+    </div>
+    <div class="carousel-item">
+      {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" >}}
+    </div>
+    <div class="carousel-item">
+      {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
+    </div>
+  </div>
+</div>
+{{< /example >}}
+
+## Disable touch swiping
+
+Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled by setting the `touch` option to `false`.
 
 {{< example >}}
-<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
+<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
   <div class="carousel-inner">
     <div class="carousel-item active">
       {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
@@ -236,10 +296,14 @@ Carousels support swiping left/right on touchscreen devices to move between slid
 
 ## Dark variant
 
-Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`.
+{{< deprecated-in "5.3.0" >}}
+
+Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and captions. Controls are inverted compared to their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`.
+
+{{< callout-deprecated-dark-variants "carousel" >}}
 
 {{< example >}}
-<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
+<div id="carouselExampleDark" class="carousel carousel-dark slide">
   <div class="carousel-indicators">
     <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
     <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
@@ -281,156 +345,81 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap
 
 ## Custom transition
 
-The transition duration of `.carousel-item` can be changed with the `$carousel-transition-duration` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. `transition: transform 2s ease, opacity .5s ease-out`).
+The transition duration of `.carousel-item` can be changed with the `$carousel-transition-duration` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (e.g. `transition: transform 2s ease, opacity .5s ease-out`).
+
+## CSS
 
-## Sass
+### Sass variables
 
-### Variables
+Variables for all carousels:
 
 {{< scss-docs name="carousel-variables" file="scss/_variables.scss" >}}
 
+Variables for the [dark carousel](#dark-variant):
+
+{{< scss-docs name="carousel-dark-variables" file="scss/_variables.scss" >}}
+
 ## Usage
 
 ### Via data attributes
 
 Use data attributes to easily control the position of the carousel. `data-bs-slide` accepts the keywords `prev` or `next`, which alters the slide position relative to its current position. Alternatively, use `data-bs-slide-to` to pass a raw slide index to the carousel `data-bs-slide-to="2"`, which shifts the slide position to a particular index beginning with `0`.
 
-The `data-bs-ride="carousel"` attribute is used to mark a carousel as animating starting at page load. If you don't use `data-bs-ride="carousel"` to initialize your carousel, you have to initialize it yourself. **It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.**
-
 ### Via JavaScript
 
 Call carousel manually with:
 
 ```js
-var myCarousel = document.querySelector('#myCarousel')
-var carousel = new bootstrap.Carousel(myCarousel)
+const carousel = new bootstrap.Carousel('#myCarousel')
 ```
 
 ### Options
 
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-interval=""`.
-
-<table class="table">
-  <thead>
-    <tr>
-      <th style="width: 100px;">Name</th>
-      <th style="width: 50px;">Type</th>
-      <th style="width: 50px;">Default</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>interval</code></td>
-      <td>number</td>
-      <td><code>5000</code></td>
-      <td>The amount of time to delay between automatically cycling an item. If <code>false</code>, carousel will not automatically cycle.</td>
-    </tr>
-    <tr>
-      <td><code>keyboard</code></td>
-      <td>boolean</td>
-      <td><code>true</code></td>
-      <td>Whether the carousel should react to keyboard events.</td>
-    </tr>
-    <tr>
-      <td><code>pause</code></td>
-      <td>string | boolean</td>
-      <td><code>'hover'</code></td>
-      <td><p>If set to <code>'hover'</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>false</code>, hovering over the carousel won't pause it.</p>
-      <p>On touch-enabled devices, when set to <code>'hover'</code>, cycling will pause on <code>touchend</code> (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.</p></td>
-    </tr>
-    <tr>
-      <td><code>ride</code></td>
-      <td>string | boolean</td>
-      <td><code>false</code></td>
-      <td>Autoplays the carousel after the user manually cycles the first item. If set to <code>'carousel'</code>, autoplays the carousel on load.</td>
-    </tr>
-    <tr>
-      <td><code>wrap</code></td>
-      <td>boolean</td>
-      <td><code>true</code></td>
-      <td>Whether the carousel should cycle continuously or have hard stops.</td>
-    </tr>
-    <tr>
-      <td><code>touch</code></td>
-      <td>boolean</td>
-      <td><code>true</code></td>
-      <td>Whether the carousel should support left/right swipe interactions on touchscreen devices.</td>
-    </tr>
-  </tbody>
-</table>
+{{< markdown >}}
+{{< partial "js-data-attributes.md" >}}
+{{< /markdown >}}
+
+{{< bs-table >}}
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `interval` | number | `5000` | The amount of time to delay between automatically cycling an item. |
+| `keyboard` | boolean | `true` | Whether the carousel should react to keyboard events. |
+| `pause` | string, boolean | `"hover"` | If set to `"hover"`, pauses the cycling of the carousel on `mouseenter` and resumes the cycling of the carousel on `mouseleave`. If set to `false`, hovering over the carousel won't pause it. On touch-enabled devices, when set to `"hover"`, cycling will pause on `touchend` (once the user finished interacting with the carousel) for two intervals, before automatically resuming. This is in addition to the mouse behavior. |
+| `ride` | string, boolean | `false` | If set to `true`, autoplays the carousel after the user manually cycles the first item. If set to `"carousel"`, autoplays the carousel on load. |
+| `touch` | boolean | `true` | Whether the carousel should support left/right swipe interactions on touchscreen devices. |
+| `wrap` | boolean | `true` | Whether the carousel should cycle continuously or have hard stops. |
+{{< /bs-table >}}
 
 ### Methods
 
 {{< callout danger >}}
-{{< partial "callout-danger-async-methods.md" >}}
+{{< partial "callouts/danger-async-methods.md" >}}
 {{< /callout >}}
 
-You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items:
+You can create a carousel instance with the carousel constructor, and pass on any additional options. For example, to manually initialize an autoplaying carousel (assuming you're not using the `data-bs-ride="carousel"` attribute in the markup itself) with a specific interval and with touch support disabled, you can use:
 
 ```js
-var myCarousel = document.querySelector('#myCarousel')
-var carousel = new bootstrap.Carousel(myCarousel, {
+const myCarouselElement = document.querySelector('#myCarousel')
+
+const carousel = new bootstrap.Carousel(myCarouselElement, {
   interval: 2000,
-  wrap: false
+  touch: false
 })
 ```
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>Method</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>cycle</code></td>
-      <td>Cycles through the carousel items from left to right.</td>
-    </tr>
-    <tr>
-      <td><code>pause</code></td>
-      <td>Stops the carousel from cycling through items.</td>
-    </tr>
-    <tr>
-      <td><code>prev</code></td>
-      <td>Cycles to the previous item. <strong>Returns to the caller before the previous item has been shown</strong> (e.g., before the <code>slid.bs.carousel</code> event occurs).</td>
-    </tr>
-    <tr>
-      <td><code>next</code></td>
-      <td>Cycles to the next item. <strong>Returns to the caller before the next item has been shown</strong> (e.g., before the <code>slid.bs.carousel</code> event occurs).</td>
-    </tr>
-    <tr>
-      <td><code>nextWhenVisible</code></td>
-      <td>Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible. <strong>Returns to the caller before the target item has been shown</strong>
-    </tr>
-    <tr>
-      <td><code>to</code></td>
-      <td>Cycles the carousel to a particular frame (0 based, similar to an array). <strong>Returns to the caller before the target item has been shown</strong> (e.g., before the <code>slid.bs.carousel</code> event occurs).</td>
-    </tr>
-    <tr>
-      <td><code>dispose</code></td>
-      <td>Destroys an element's carousel. (Removes stored data on the DOM element)</td>
-    </tr>
-    <tr>
-      <td>
-        <code>getInstance</code>
-      </td>
-      <td>
-        Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: <code>bootstrap.Carousel.getInstance(element)</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>getOrCreateInstance</code>
-      </td>
-      <td>
-        Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn't initialized.
-        You can use it like this: <code>bootstrap.Carousel.getOrCreateInstance(element)</code>
-      </td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table >}}
+| Method | Description |
+| --- | --- |
+| `cycle` | Starts cycling through the carousel items from left to right. |
+| `dispose` | Destroys an element's carousel. (Removes stored data on the DOM element) |
+| `getInstance` | Static method which allows you to get the carousel instance associated to a DOM element. You can use it like this: `bootstrap.Carousel.getInstance(element)`. |
+| `getOrCreateInstance` | Static method which returns a carousel instance associated to a DOM element, or creates a new one in case it wasn't initialized. You can use it like this: `bootstrap.Carousel.getOrCreateInstance(element)`. |
+| `next` | Cycles to the next item. **Returns to the caller before the next item has been shown** (e.g., before the `slid.bs.carousel` event occurs). |
+| `nextWhenVisible` | Don't cycle carousel to next when the page, the carousel, or the carousel's parent aren't visible. **Returns to the caller before the target item has been shown**. |
+| `pause` | Stops the carousel from cycling through items. |
+| `prev` | Cycles to the previous item. **Returns to the caller before the previous item has been shown** (e.g., before the `slid.bs.carousel` event occurs). |
+| `to` | Cycles the carousel to a particular frame (0 based, similar to an array). **Returns to the caller before the target item has been shown** (e.g., before the `slid.bs.carousel` event occurs). |
+{{< /bs-table >}}
 
 ### Events
 
@@ -443,29 +432,17 @@ Bootstrap's carousel class exposes two events for hooking into carousel function
 
 All carousel events are fired at the carousel itself (i.e. at the `<div class="carousel">`).
 
-<table class="table">
-  <thead>
-    <tr>
-      <th style="width: 150px;">Event type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>slide.bs.carousel</code></td>
-      <td>Fires immediately when the <code>slide</code> instance method is invoked.</td>
-    </tr>
-    <tr>
-      <td><code>slid.bs.carousel</code></td>
-      <td>Fired when the carousel has completed its slide transition.</td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table >}}
+| Event type | Description |
+| --- | --- |
+| `slid.bs.carousel` | Fired when the carousel has completed its slide transition. |
+| `slide.bs.carousel` | Fires immediately when the `slide` instance method is invoked. |
+{{< /bs-table >}}
 
 ```js
-var myCarousel = document.getElementById('myCarousel')
+const myCarousel = document.getElementById('myCarousel')
 
-myCarousel.addEventListener('slide.bs.carousel', function () {
+myCarousel.addEventListener('slide.bs.carousel', event => {
   // do something...
 })
 ```
diff --git a/site/content/docs/5.3/components/close-button.md b/site/content/docs/5.3/components/close-button.md
new file mode 100644
index 000000000..533271b49
--- /dev/null
+++ b/site/content/docs/5.3/components/close-button.md
@@ -0,0 +1,54 @@
+---
+layout: docs
+title: Close button
+description: A generic close button for dismissing content like modals and alerts.
+group: components
+toc: true
+---
+
+## Example
+
+Provide an option to dismiss or close a component with `.btn-close`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default `background-image`. **Be sure to include text for screen readers**, as we've done with `aria-label`.
+
+{{< example >}}
+<button type="button" class="btn-close" aria-label="Close"></button>
+{{< /example >}}
+
+## Disabled state
+
+Disabled close buttons change their `opacity`. We've also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering.
+
+{{< example >}}
+<button type="button" class="btn-close" disabled aria-label="Close"></button>
+{{< /example >}}
+
+## Dark variant
+
+{{< deprecated-in "5.3.0" >}}
+
+{{< callout warning >}}
+**Heads up!** As of v5.3.0, the `.btn-close-white` class is deprecated. Instead, use `data-bs-theme="dark"` to change the color mode of the close button.
+{{< /callout >}}
+
+Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to invert the close button. This uses the `filter` property to invert the `background-image` without overriding its value.
+
+{{< example class="bg-dark" >}}
+<div data-bs-theme="dark">
+  <button type="button" class="btn-close" aria-label="Close"></button>
+  <button type="button" class="btn-close" disabled aria-label="Close"></button>
+</div>
+{{< /example >}}
+
+## CSS
+
+### Variables
+
+{{< added-in "5.3.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, close button now uses local CSS variables on `.btn-close` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="close-css-vars" file="scss/_close.scss" >}}
+
+### Sass variables
+
+{{< scss-docs name="close-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.1/components/collapse.md b/site/content/docs/5.3/components/collapse.md
index 75e4b20a3..d5171151b 100644
--- a/site/content/docs/5.1/components/collapse.md
+++ b/site/content/docs/5.3/components/collapse.md
@@ -11,7 +11,7 @@ toc: true
 The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the `height` from its current value to `0`. Given how CSS handles animations, you cannot use `padding` on a `.collapse` element. Instead, use the class as an independent wrapping element.
 
 {{< callout info >}}
-{{< partial "callout-info-prefersreducedmotion.md" >}}
+{{< partial "callouts/info-prefersreducedmotion.md" >}}
 {{< /callout >}}
 
 ## Example
@@ -22,10 +22,10 @@ Click the buttons below to show and hide another element via class changes:
 - `.collapsing` is applied during transitions
 - `.collapse.show` shows content
 
-Generally, we recommend using a button with the `data-bs-target` attribute. While not recommended from a semantic point of view, you can also use a link with the `href` attribute (and a `role="button"`). In both cases, the `data-bs-toggle="collapse"` is required.
+Generally, we recommend using a `<button>` with the `data-bs-target` attribute. While not recommended from a semantic point of view, you can also use an `<a>` link with the `href` attribute (and a `role="button"`). In both cases, the `data-bs-toggle="collapse"` is required.
 
 {{< example >}}
-<p>
+<p class="d-inline-flex gap-1">
   <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
     Link with href
   </a>
@@ -42,7 +42,7 @@ Generally, we recommend using a button with the `data-bs-target` attribute. Whil
 
 ## Horizontal
 
-The collapse plugin also supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our [width utilities]({{< docsref "/utilities/sizing" >}}).
+The collapse plugin supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our [width utilities]({{< docsref "/utilities/sizing" >}}).
 
 {{< callout info >}}
 Please note that while the example below has a `min-height` set to avoid excessive repaints in our docs, this is not explicitly required. **Only the `width` on the child element is required.**
@@ -63,13 +63,13 @@ Please note that while the example below has a `min-height` set to avoid excessi
 </div>
 {{< /example >}}
 
-## Multiple targets
+## Multiple toggles and targets
 
-A `<button>` or `<a>` can show and hide multiple elements by referencing them with a selector in its `href` or `data-bs-target` attribute.
-Multiple `<button>` or `<a>` can show and hide an element if they each reference it with their `href` or `data-bs-target` attribute
+A `<button>` or `<a>` element can show and hide multiple elements by referencing them with a selector in its `data-bs-target` or `href` attribute.
+Conversely, multiple `<button>` or `<a>` elements can show and hide the same element if they each reference it with their `data-bs-target` or `href` attribute.
 
 {{< example >}}
-<p>
+<p class="d-inline-flex gap-1">
   <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
   <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
   <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
@@ -98,11 +98,11 @@ Be sure to add `aria-expanded` to the control element. This attribute explicitly
 
 If your control element is targeting a single collapsible element – i.e. the `data-bs-target` attribute is pointing to an `id` selector – you should add the `aria-controls` attribute to the control element, containing the `id` of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.
 
-Note that Bootstrap's current implementation does not cover the various *optional* keyboard interactions described in the [WAI-ARIA Authoring Practices 1.1 accordion pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) - you will need to include these yourself with custom JavaScript.
+Note that Bootstrap's current implementation does not cover the various *optional* keyboard interactions described in the [ARIA Authoring Practices Guide accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) - you will need to include these yourself with custom JavaScript.
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
 
 {{< scss-docs name="collapse-transition" file="scss/_variables.scss" >}}
 
@@ -133,45 +133,27 @@ To add accordion-like group management to a collapsible area, add the data attri
 Enable manually with:
 
 ```js
-var collapseElementList = Array.prototype.slice.call(document.querySelectorAll('.collapse'))
-var collapseList = collapseElementList.map(function (collapseEl) {
-  return new bootstrap.Collapse(collapseEl)
-})
+const collapseElementList = document.querySelectorAll('.collapse')
+const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))
 ```
 
 ### Options
 
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-parent=""`.
-
-<table class="table">
-  <thead>
-    <tr>
-      <th style="width: 100px;">Name</th>
-      <th style="width: 50px;">Type</th>
-      <th style="width: 50px;">Default</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>parent</code></td>
-      <td>selector | jQuery object | DOM element </td>
-      <td><code>false</code></td>
-      <td>If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>card</code> class). The attribute has to be set on the target collapsible area.</td>
-    </tr>
-    <tr>
-      <td><code>toggle</code></td>
-      <td>boolean</td>
-      <td><code>true</code></td>
-      <td>Toggles the collapsible element on invocation</td>
-    </tr>
-  </tbody>
-</table>
+{{< markdown >}}
+{{< partial "js-data-attributes.md" >}}
+{{< /markdown >}}
+
+{{< bs-table "table" >}}
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+`parent` | selector, DOM element | `null` | If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the `card` class). The attribute has to be set on the target collapsible area. |
+`toggle` | boolean | `true` | Toggles the collapsible element on invocation. |
+{{< /bs-table >}}
 
 ### Methods
 
 {{< callout danger >}}
-{{< partial "callout-danger-async-methods.md" >}}
+{{< partial "callouts/danger-async-methods.md" >}}
 {{< /callout >}}
 
 Activates your content as a collapsible element. Accepts an optional options `object`.
@@ -179,90 +161,38 @@ Activates your content as a collapsible element. Accepts an optional options `ob
 You can create a collapse instance with the constructor, for example:
 
 ```js
-var myCollapse = document.getElementById('myCollapse')
-var bsCollapse = new bootstrap.Collapse(myCollapse, {
+const bsCollapse = new bootstrap.Collapse('#myCollapse', {
   toggle: false
 })
 ```
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>Method</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>toggle</code></td>
-      <td>Toggles a collapsible element to shown or hidden. <strong>Returns to the caller before the collapsible element has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.collapse</code> or <code>hidden.bs.collapse</code> event occurs).</td>
-    </tr>
-    <tr>
-      <td><code>show</code></td>
-      <td>Shows a collapsible element. <strong>Returns to the caller before the collapsible element has actually been shown</strong> (e.g., before the <code>shown.bs.collapse</code> event occurs). </td>
-    </tr>
-    <tr>
-      <td><code>hide</code></td>
-      <td>Hides a collapsible element. <strong>Returns to the caller before the collapsible element has actually been hidden</strong> (e.g., before the <code>hidden.bs.collapse</code> event occurs).</td>
-    </tr>
-    <tr>
-      <td><code>dispose</code></td>
-      <td>Destroys an element's collapse. (Removes stored data on the DOM element)</td>
-    </tr>
-    <tr>
-      <td>
-        <code>getInstance</code>
-      </td>
-      <td>
-        Static method which allows you to get the collapse instance associated to a DOM element, you can use it like this: <code>bootstrap.Collapse.getInstance(element)</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>getOrCreateInstance</code>
-      </td>
-      <td>
-        Static method which returns a collapse instance associated to a DOM element or create a new one in case it wasn't initialized.
-        You can use it like this: <code>bootstrap.Collapse.getOrCreateInstance(element)</code>
-      </td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table >}}
+| Method | Description |
+| --- | --- |
+| `dispose` | Destroys an element's collapse. (Removes stored data on the DOM element) |
+| `getInstance` | Static method which allows you to get the collapse instance associated to a DOM element, you can use it like this: `bootstrap.Collapse.getInstance(element)`. |
+| `getOrCreateInstance` | Static method which returns a collapse instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Collapse.getOrCreateInstance(element)`. |
+| `hide` | Hides a collapsible element. **Returns to the caller before the collapsible element has actually been hidden** (e.g., before the `hidden.bs.collapse` event occurs). |
+| `show` | Shows a collapsible element. **Returns to the caller before the collapsible element has actually been shown** (e.g., before the `shown.bs.collapse` event occurs). |
+| `toggle` | Toggles a collapsible element to shown or hidden. **Returns to the caller before the collapsible element has actually been shown or hidden** (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs). |
+{{< /bs-table >}}
 
 ### Events
 
 Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
 
-<table class="table">
-  <thead>
-    <tr>
-      <th style="width: 150px;">Event type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>show.bs.collapse</code></td>
-      <td>This event fires immediately when the <code>show</code> instance method is called.</td>
-    </tr>
-    <tr>
-      <td><code>shown.bs.collapse</code></td>
-      <td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td>
-    </tr>
-    <tr>
-      <td><code>hide.bs.collapse</code></td>
-      <td>This event is fired immediately when the <code>hide</code> method has been called.</td>
-    </tr>
-    <tr>
-      <td><code>hidden.bs.collapse</code></td>
-      <td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table >}}
+| Event type | Description |
+| --- | --- |
+| `hide.bs.collapse` | This event is fired immediately when the `hide` method has been called. |
+| `hidden.bs.collapse` | This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). |
+| `show.bs.collapse` | This event fires immediately when the `show` instance method is called. |
+| `shown.bs.collapse` | This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). |
+{{< /bs-table >}}
 
 ```js
-var myCollapsible = document.getElementById('myCollapsible')
-myCollapsible.addEventListener('hidden.bs.collapse', function () {
+const myCollapsible = document.getElementById('myCollapsible')
+myCollapsible.addEventListener('hidden.bs.collapse', event => {
   // do something...
 })
 ```
diff --git a/site/content/docs/5.1/components/dropdowns.md b/site/content/docs/5.3/components/dropdowns.md
index 2750ce540..b9e22e44a 100644
--- a/site/content/docs/5.1/components/dropdowns.md
+++ b/site/content/docs/5.3/components/dropdowns.md
@@ -10,30 +10,30 @@ 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
 
-The [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr>](https://www.w3.org/TR/wai-aria/) standard defines an actual [`role="menu"` widget](https://www.w3.org/WAI/PF/aria/roles#menu), but this is specific to application-like menus which trigger actions or functions. <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus.
+The [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr>](https://www.w3.org/TR/wai-aria/) standard defines an actual [`role="menu"` widget](https://www.w3.org/TR/wai-aria/#menu), but this is specific to application-like menus which trigger actions or functions. <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus.
 
 Bootstrap's dropdowns, on the other hand, are designed to be generic and applicable to a variety of situations and markup structures. For instance, it is possible to create dropdowns that contain additional inputs and form controls, such as search fields or login forms. For this reason, Bootstrap does not expect (nor automatically add) any of the `role` and `aria-` attributes required for true <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus. Authors will have to include these more specific attributes themselves.
 
-However, Bootstrap does add built-in support for most standard keyboard menu interactions, such as the ability to move through individual `.dropdown-item` elements using the cursor keys and close the menu with the <kbd>ESC</kbd> key.
+However, Bootstrap does add built-in support for most standard keyboard menu interactions, such as the ability to move through individual `.dropdown-item` elements using the cursor keys and close the menu with the <kbd>Esc</kbd> key.
 
 ## Examples
 
-Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Dropdowns can be triggered from `<a>` or `<button>` elements to better fit your potential needs. The examples shown here use semantic `<ul>` elements where appropriate, but custom markup is supported.
+Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Ideally, you should use a `<button>` element as the dropdown trigger, but the plugin will work with `<a>` elements as well. The examples shown here use semantic `<ul>` elements where appropriate, but custom markup is supported.
 
 ### Single button
 
-Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here's how you can put them to work with either `<button>` elements:
+Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here's how you can put them to work with `<button>` elements:
 
 {{< example >}}
 <div class="dropdown">
-  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
+  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Dropdown button
   </button>
-  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+  <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Action</a></li>
     <li><a class="dropdown-item" href="#">Another action</a></li>
     <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -41,15 +41,15 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes.
 </div>
 {{< /example >}}
 
-And with `<a>` elements:
+While `<button>` is the recommended control for a dropdown toggle, there might be situations where you have to use an `<a>` element. If you do, we recommend adding a `role="button"` attribute to appropriately convey control's purpose to assistive technologies such as screen readers.
 
 {{< example >}}
 <div class="dropdown">
-  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
+  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
     Dropdown link
   </a>
 
-  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+  <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Action</a></li>
     <li><a class="dropdown-item" href="#">Another action</a></li>
     <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -126,7 +126,7 @@ The best part is you can do this with any button variant, too:
 <!-- Example single danger button -->
 <div class="btn-group">
   <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-    Action
+    Danger
   </button>
   <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Action</a></li>
@@ -228,7 +228,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
 ```html
 <!-- Example split danger button -->
 <div class="btn-group">
-  <button type="button" class="btn btn-danger">Action</button>
+  <button type="button" class="btn btn-danger">Danger</button>
   <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
     <span class="visually-hidden">Toggle Dropdown</span>
   </button>
@@ -349,14 +349,18 @@ Button dropdowns work with buttons of all sizes, including default and split dro
 
 ## Dark dropdowns
 
+{{< deprecated-in "5.3.0" >}}
+
 Opt into darker dropdowns to match a dark navbar or custom style by adding `.dropdown-menu-dark` onto an existing `.dropdown-menu`. No changes are required to the dropdown items.
 
+{{< callout-deprecated-dark-variants "dropdown-menu" >}}
+
 {{< example >}}
 <div class="dropdown">
-  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
+  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Dropdown button
   </button>
-  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
+  <ul class="dropdown-menu dropdown-menu-dark">
     <li><a class="dropdown-item active" href="#">Action</a></li>
     <li><a class="dropdown-item" href="#">Another action</a></li>
     <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -378,10 +382,10 @@ And putting it to use in a navbar:
     <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
       <ul class="navbar-nav">
         <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+          <button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
             Dropdown
-          </a>
-          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
+          </button>
+          <ul class="dropdown-menu dropdown-menu-dark">
             <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
             <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -396,10 +400,26 @@ And putting it to use in a navbar:
 ## Directions
 
 {{< callout info >}}
-#### RTL
-Directions are mirrored when using Bootstrap in RTL, meaning `.dropstart` will appear on the right side.
+**Directions are flipped in RTL mode.** As such, `.dropstart` will appear on the right side.
 {{< /callout >}}
 
+### Centered
+
+Make the dropdown menu centered below the toggle with `.dropdown-center` on the parent element.
+
+{{< example >}}
+<div class="dropdown-center">
+  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    Centered dropdown
+  </button>
+  <ul class="dropdown-menu">
+    <li><a class="dropdown-item" href="#">Action</a></li>
+    <li><a class="dropdown-item" href="#">Action two</a></li>
+    <li><a class="dropdown-item" href="#">Action three</a></li>
+  </ul>
+</div>
+{{< /example >}}
+
 ### Dropup
 
 Trigger dropdown menus above elements by adding `.dropup` to the parent element.
@@ -459,14 +479,31 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
 </div>
 ```
 
-### Dropright
+### Dropup centered
+
+Make the dropup menu centered above the toggle with `.dropup-center` on the parent element.
+
+{{< example >}}
+<div class="dropup-center dropup">
+  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    Centered dropup
+  </button>
+  <ul class="dropdown-menu">
+    <li><a class="dropdown-item" href="#">Action</a></li>
+    <li><a class="dropdown-item" href="#">Action two</a></li>
+    <li><a class="dropdown-item" href="#">Action three</a></li>
+  </ul>
+</div>
+{{< /example >}}
+
+### Dropend
 
 Trigger dropdown menus at the right of the elements by adding `.dropend` to the parent element.
 
 <div class="bd-example">
   <div class="btn-group dropend">
     <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-      Dropright
+      Dropend
     </button>
     <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Action</a></li>
@@ -481,7 +518,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropend` to the
       Split dropend
     </button>
     <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
-      <span class="visually-hidden">Toggle Dropright</span>
+      <span class="visually-hidden">Toggle Dropend</span>
     </button>
     <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Action</a></li>
@@ -497,7 +534,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropend` to the
 <!-- Default dropend button -->
 <div class="btn-group dropend">
   <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-    Dropright
+    Dropend
   </button>
   <ul class="dropdown-menu">
     <!-- Dropdown menu links -->
@@ -510,7 +547,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropend` to the
     Split dropend
   </button>
   <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
-    <span class="visually-hidden">Toggle Dropright</span>
+    <span class="visually-hidden">Toggle Dropend</span>
   </button>
   <ul class="dropdown-menu">
     <!-- Dropdown menu links -->
@@ -518,14 +555,14 @@ Trigger dropdown menus at the right of the elements by adding `.dropend` to the
 </div>
 ```
 
-### Dropleft
+### Dropstart
 
 Trigger dropdown menus at the left of the elements by adding `.dropstart` to the parent element.
 
 <div class="bd-example">
   <div class="btn-group dropstart">
     <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-      Dropleft
+      Dropstart
     </button>
     <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Action</a></li>
@@ -535,19 +572,17 @@ Trigger dropdown menus at the left of the elements by adding `.dropstart` to the
       <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
   </div>
-  <div class="btn-group">
-    <div class="btn-group dropstart" role="group">
-      <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
-        <span class="visually-hidden">Toggle Dropleft</span>
-      </button>
-      <ul class="dropdown-menu">
-        <li><a class="dropdown-item" href="#">Action</a></li>
-        <li><a class="dropdown-item" href="#">Another action</a></li>
-        <li><a class="dropdown-item" href="#">Something else here</a></li>
-        <li><hr class="dropdown-divider"></li>
-        <li><a class="dropdown-item" href="#">Separated link</a></li>
-      </ul>
-    </div>
+  <div class="btn-group dropstart">
+    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+      <span class="visually-hidden">Toggle Dropstart</span>
+    </button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item" href="#">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
     <button type="button" class="btn btn-secondary">
       Split dropstart
     </button>
@@ -566,15 +601,13 @@ Trigger dropdown menus at the left of the elements by adding `.dropstart` to the
 </div>
 
 <!-- Split dropstart button -->
-<div class="btn-group">
-  <div class="btn-group dropstart" role="group">
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
-      <span class="visually-hidden">Toggle Dropstart</span>
-    </button>
-    <ul class="dropdown-menu">
-      <!-- Dropdown menu links -->
-    </ul>
-  </div>
+<div class="btn-group dropstart">
+  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <span class="visually-hidden">Toggle Dropstart</span>
+  </button>
+  <ul class="dropdown-menu">
+    <!-- Dropdown menu links -->
+  </ul>
   <button type="button" class="btn btn-secondary">
     Split dropstart
   </button>
@@ -587,10 +620,10 @@ You can use `<a>` or `<button>` elements as dropdown items.
 
 {{< example >}}
 <div class="dropdown">
-  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
+  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Dropdown
   </button>
-  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
+  <ul class="dropdown-menu">
     <li><button class="dropdown-item" type="button">Action</button></li>
     <li><button class="dropdown-item" type="button">Another action</button></li>
     <li><button class="dropdown-item" type="button">Something else here</button></li>
@@ -628,7 +661,7 @@ Add `.disabled` to items in the dropdown to **style them as disabled**.
 {{< example >}}
 <ul class="dropdown-menu">
   <li><a class="dropdown-item" href="#">Regular link</a></li>
-  <li><a class="dropdown-item disabled">Disabled link</a></li>
+  <li><a class="dropdown-item disabled" aria-disabled="true">Disabled link</a></li>
   <li><a class="dropdown-item" href="#">Another link</a></li>
 </ul>
 {{< /example >}}
@@ -698,10 +731,10 @@ Taking most of the options shown above, here's a small kitchen sink demo of vari
 
 {{< example >}}
 <div class="btn-group">
-  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
+  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Dropdown
   </button>
-  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+  <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Menu item</a></li>
     <li><a class="dropdown-item" href="#">Menu item</a></li>
     <li><a class="dropdown-item" href="#">Menu item</a></li>
@@ -808,7 +841,7 @@ Separate groups of related menu items with a divider.
 Place any freeform text within a dropdown menu with text and use [spacing utilities]({{< docsref "/utilities/spacing" >}}). Note that you'll likely need additional sizing styles to constrain the menu width.
 
 {{< example >}}
-<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
+<div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;">
   <p>
     Some example text that's free-flowing within the dropdown menu.
   </p>
@@ -850,25 +883,30 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar
 {{< /example >}}
 
 {{< example >}}
-<form class="dropdown-menu p-4">
-  <div class="mb-3">
-    <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
-    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
-  </div>
-  <div class="mb-3">
-    <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
-    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
-  </div>
-  <div class="mb-3">
-    <div class="form-check">
-      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
-      <label class="form-check-label" for="dropdownCheck2">
-        Remember me
-      </label>
+<div class="dropdown">
+  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
+    Dropdown form
+  </button>
+  <form class="dropdown-menu p-4">
+    <div class="mb-3">
+      <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
+      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
     </div>
-  </div>
-  <button type="submit" class="btn btn-primary">Sign in</button>
-</form>
+    <div class="mb-3">
+      <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
+      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
+    </div>
+    <div class="mb-3">
+      <div class="form-check">
+        <input type="checkbox" class="form-check-input" id="dropdownCheck2">
+        <label class="form-check-label" for="dropdownCheck2">
+          Remember me
+        </label>
+      </div>
+    </div>
+    <button type="submit" class="btn btn-primary">Sign in</button>
+  </form>
+</div>
 {{< /example >}}
 
 ## Dropdown options
@@ -878,10 +916,10 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo
 {{< example >}}
 <div class="d-flex">
   <div class="dropdown me-1">
-    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
+    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
       Offset
     </button>
-    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
+    <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Action</a></li>
       <li><a class="dropdown-item" href="#">Another action</a></li>
       <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -889,10 +927,10 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo
   </div>
   <div class="btn-group">
     <button type="button" class="btn btn-secondary">Reference</button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
+    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
-    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
+    <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Action</a></li>
       <li><a class="dropdown-item" href="#">Another action</a></li>
       <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -909,10 +947,10 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
 
 {{< example >}}
 <div class="btn-group">
-  <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
+  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
     Default dropdown
   </button>
-  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
+  <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Menu item</a></li>
     <li><a class="dropdown-item" href="#">Menu item</a></li>
     <li><a class="dropdown-item" href="#">Menu item</a></li>
@@ -920,10 +958,10 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
 </div>
 
 <div class="btn-group">
-  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
-    Clickable outside
+  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
+    Clickable inside
   </button>
-  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
+  <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Menu item</a></li>
     <li><a class="dropdown-item" href="#">Menu item</a></li>
     <li><a class="dropdown-item" href="#">Menu item</a></li>
@@ -931,10 +969,10 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
 </div>
 
 <div class="btn-group">
-  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
-    Clickable inside
+  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+    Clickable outside
   </button>
-  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
+  <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Menu item</a></li>
     <li><a class="dropdown-item" href="#">Menu item</a></li>
     <li><a class="dropdown-item" href="#">Menu item</a></li>
@@ -942,10 +980,10 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
 </div>
 
 <div class="btn-group">
-  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
+  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
     Manual close
   </button>
-  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
+  <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Menu item</a></li>
     <li><a class="dropdown-item" href="#">Menu item</a></li>
     <li><a class="dropdown-item" href="#">Menu item</a></li>
@@ -953,10 +991,28 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
 </div>
 {{< /example >}}
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, dropdowns now use local CSS variables on `.dropdown-menu` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="dropdown-css-vars" file="scss/_dropdown.scss" >}}
+
+{{< callout info >}}
+Dropdown items include at least one variable that is not set on `.dropdown`. This allows you to provide a new value while Bootstrap defaults to a fallback value.
+
+- `--bs-dropdown-item-border-radius`
+{{< /callout >}}
+
+Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors.
+
+{{< scss-docs name="dropdown-dark-css-vars" file="scss/_dropdown.scss" >}}
+
+### Sass variables
+
 Variables for all dropdowns:
 
 {{< scss-docs name="dropdown-variables" file="scss/_variables.scss" >}}
@@ -969,7 +1025,7 @@ Variables for the CSS-based carets that indicate a dropdown's interactivity:
 
 {{< scss-docs name="caret-variables" file="scss/_variables.scss" >}}
 
-### Mixins
+### Sass mixins
 
 Mixins are used to generate the CSS-based carets and can be found in `scss/mixins/_caret.scss`.
 
@@ -989,10 +1045,10 @@ Add `data-bs-toggle="dropdown"` to a link or button to toggle a dropdown.
 
 ```html
 <div class="dropdown">
-  <button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Dropdown trigger
   </button>
-  <ul class="dropdown-menu" aria-labelledby="dLabel">
+  <ul class="dropdown-menu">
     ...
   </ul>
 </div>
@@ -1000,95 +1056,40 @@ Add `data-bs-toggle="dropdown"` to a link or button to toggle a dropdown.
 
 ### Via JavaScript
 
+{{< callout warning >}}
+Dropdowns must have `data-bs-toggle="dropdown"` on their trigger element, regardless of whether you call your dropdown via JavaScript or use the data-api.
+{{< /callout >}}
+
 Call the dropdowns via JavaScript:
 
 ```js
-var dropdownElementList = Array.prototype.slice.call(document.querySelectorAll('.dropdown-toggle'))
-var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
-  return new bootstrap.Dropdown(dropdownToggleEl)
-})
+const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
+const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))
 ```
 
-{{< callout info >}}
-##### `data-bs-toggle="dropdown"` still required
-
-Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-bs-toggle="dropdown"` is always required to be present on the dropdown's trigger element.
-{{< /callout >}}
-
 ### Options
 
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-bs-autoClose="false"`, use `data-bs-auto-close="false"`.
-
-<table class="table">
-  <thead>
-    <tr>
-      <th style="width: 100px;">Name</th>
-      <th style="width: 100px;">Type</th>
-      <th style="width: 50px;">Default</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>boundary</code></td>
-      <td>string | element</td>
-      <td><code>'clippingParents'</code></td>
-      <td>Overflow constraint boundary of the dropdown menu (applies only to Popper's preventOverflow modifier). By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">detectOverflow docs</a>.</td>
-    </tr>
-    <tr>
-      <td><code>reference</code></td>
-      <td>string | element | object</td>
-      <td><code>'toggle'</code></td>
-      <td>Reference element of the dropdown menu. Accepts the values of <code>'toggle'</code>, <code>'parent'</code>, an HTMLElement reference or an object providing <code>getBoundingClientRect</code>. For more information refer to Popper's <a href="https://popper.js.org/docs/v2/constructors/#createpopper">constructor docs</a> and <a href="https://popper.js.org/docs/v2/virtual-elements/">virtual element docs</a>.</td>
-    </tr>
-    <tr>
-      <td><code>display</code></td>
-      <td>string</td>
-      <td><code>'dynamic'</code></td>
-      <td>By default, we use Popper for dynamic positioning. Disable this with <code>static</code>.</td>
-    </tr>
-    <tr>
-      <td><code>offset</code></td>
-      <td>array | string | function</td>
-      <td><code>[0, 2]</code></td>
-      <td>
-        <p>Offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: <code>data-bs-offset="10,20"</code></p>
-        <p>When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: <code>[<a href="https://popper.js.org/docs/v2/modifiers/offset/#skidding-1">skidding</a>, <a href="https://popper.js.org/docs/v2/modifiers/offset/#distance-1">distance</a>]</code>.</p>
-        <p>For more information refer to Popper's <a href="https://popper.js.org/docs/v2/modifiers/offset/#options">offset docs</a>.</p>
-      </td>
-    </tr>
-    <tr>
-      <td><code>autoClose</code></td>
-      <td>boolean | string</td>
-      <td><code>true</code></td>
-      <td>
-        <p>Configure the auto close behavior of the dropdown:</p>
-        <ul>
-          <li><code>true</code> - the dropdown will be closed by clicking outside or inside the dropdown menu.</li>
-          <li><code>false</code> - the dropdown will be closed by clicking the toggle button and manually calling <code>hide</code> or <code>toggle</code> method. (Also will not be closed by pressing <kbd>esc</kbd> key)</li>
-          <li><code>'inside'</code> - the dropdown will be closed (only) by clicking inside the dropdown menu.</li>
-          <li><code>'outside'</code> - the dropdown will be closed (only) by clicking outside the dropdown menu.</li>
-        </ul>
-      </td>
-    </tr>
-    <tr>
-      <td><code>popperConfig</code></td>
-      <td>null | object | function</td>
-      <td><code>null</code></td>
-      <td>
-        <p>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v2/constructors/#options">Popper's configuration</a>.</p>
-        <p>When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.</p>
-      </td>
-    </tr>
-  </tbody>
-</table>
+{{< markdown >}}
+{{< partial "js-data-attributes.md" >}}
+{{< /markdown >}}
+
+{{< bs-table "table" >}}
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `autoClose` | boolean, string | `true` | Configure the auto close behavior of the dropdown: <ul class="my-2"><li>`true` - the dropdown will be closed by clicking outside or inside the dropdown menu.</li><li>`false` - the dropdown will be closed by clicking the toggle button and manually calling `hide` or `toggle` method. (Also will not be closed by pressing <kbd>Esc</kbd> key)</li><li>`'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.</li> <li>`'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.</li></ul> Note: the dropdown can always be closed with the <kbd>Esc</kbd> key. |
+| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the dropdown menu (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). |
+| `display` | string | `'dynamic'` | By default, we use Popper for dynamic positioning. Disable this with `static`. |
+| `offset` | array, string, function | `[0, 2]` | Offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
+| `popperConfig` | null, object, function | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |
+| `reference` | string, element, object | `'toggle'` | Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, an HTMLElement reference or an object providing `getBoundingClientRect`. For more information refer to Popper's [constructor docs](https://popper.js.org/docs/v2/constructors/#createpopper) and [virtual element docs](https://popper.js.org/docs/v2/virtual-elements/). |
+{{< /bs-table >}}
 
 #### Using function with `popperConfig`
 
 ```js
-var dropdown = new bootstrap.Dropdown(element, {
-  popperConfig: function (defaultBsPopperConfig) {
-    // var newPopperConfig = {...}
+const dropdown = new bootstrap.Dropdown(element, {
+  popperConfig(defaultBsPopperConfig) {
+    // const newPopperConfig = {...}
     // use defaultBsPopperConfig if needed...
     // return newPopperConfig
   }
@@ -1097,114 +1098,34 @@ var dropdown = new bootstrap.Dropdown(element, {
 
 ### Methods
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>Method</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>toggle</code></td>
-      <td>
-        Toggles the dropdown menu of a given navbar or tabbed navigation.
-      </td>
-    </tr>
-    <tr>
-      <td><code>show</code></td>
-      <td>
-        Shows the dropdown menu of a given navbar or tabbed navigation.
-      </td>
-    </tr>
-    <tr>
-      <td><code>hide</code></td>
-      <td>
-        Hides the dropdown menu of a given navbar or tabbed navigation.
-      </td>
-    </tr>
-    <tr>
-      <td><code>update</code></td>
-      <td>
-        Updates the position of an element's dropdown.
-      </td>
-    </tr>
-    <tr>
-      <td><code>dispose</code></td>
-      <td>
-        Destroys an element's dropdown. (Removes stored data on the DOM element)
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>getInstance</code>
-      </td>
-      <td>
-        Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: <code>bootstrap.Dropdown.getInstance(element)</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>getOrCreateInstance</code>
-      </td>
-      <td>
-        Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn't initialized.
-        You can use it like this: <code>bootstrap.Dropdown.getOrCreateInstance(element)</code>
-      </td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table >}}
+| Method | Description |
+| --- | --- |
+| `dispose` | Destroys an element's dropdown. (Removes stored data on the DOM element) |
+| `getInstance` | Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: `bootstrap.Dropdown.getInstance(element)`. |
+| `getOrCreateInstance` | Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Dropdown.getOrCreateInstance(element)`. |
+| `hide` | Hides the dropdown menu of a given navbar or tabbed navigation. |
+| `show` | Shows the dropdown menu of a given navbar or tabbed navigation. |
+| `toggle` | Toggles the dropdown menu of a given navbar or tabbed navigation. |
+| `update` | Updates the position of an element's dropdown. |
+{{< /bs-table >}}
 
 ### Events
 
 All dropdown events are fired at the toggling element and then bubbled up. So you can also add event listeners on the `.dropdown-menu`'s parent element. `hide.bs.dropdown` and `hidden.bs.dropdown` events have a `clickEvent` property (only when the original Event type is `click`) that contains an Event Object for the click event.
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>Method</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <code>show.bs.dropdown</code>
-      </td>
-      <td>
-        Fires immediately when the show instance method is called.
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>shown.bs.dropdown</code>
-      </td>
-      <td>
-        Fired when the dropdown has been made visible to the user and CSS transitions have completed.
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>hide.bs.dropdown</code>
-      </td>
-      <td>
-        Fires immediately when the hide instance method has been called.
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>hidden.bs.dropdown</code>
-      </td>
-      <td>
-        Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.
-      </td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table >}}
+| Event type | Description |
+| --- | --- |
+| `hide.bs.dropdown` | Fires immediately when the `hide` instance method has been called. |
+| `hidden.bs.dropdown` | Fired when the dropdown has finished being hidden from the user and CSS transitions have completed. |
+| `show.bs.dropdown` | Fires immediately when the `show` instance method is called. |
+| `shown.bs.dropdown` | Fired when the dropdown has been made visible to the user and CSS transitions have completed. |
+{{< /bs-table >}}
 
 ```js
-var myDropdown = document.getElementById('myDropdown')
-myDropdown.addEventListener('show.bs.dropdown', function () {
+const myDropdown = document.getElementById('myDropdown')
+myDropdown.addEventListener('show.bs.dropdown', event => {
   // do something...
 })
 ```
diff --git a/site/content/docs/5.1/components/list-group.md b/site/content/docs/5.3/components/list-group.md
index af0237a07..7f7e1457c 100644
--- a/site/content/docs/5.1/components/list-group.md
+++ b/site/content/docs/5.3/components/list-group.md
@@ -62,7 +62,7 @@ Be sure to **not use the standard `.btn` classes here**.
   <a href="#" class="list-group-item list-group-item-action">A second link item</a>
   <a href="#" class="list-group-item list-group-item-action">A third link item</a>
   <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
-  <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
+  <a class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
 </div>
 {{< /example >}}
 
@@ -73,7 +73,7 @@ With `<button>`s, you can also make use of the `disabled` attribute instead of t
   <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
     The current button
   </button>
-  <button type="button" class="list-group-item list-group-item-action">A second item</button>
+  <button type="button" class="list-group-item list-group-item-action">A second button item</button>
   <button type="button" class="list-group-item list-group-item-action">A third button item</button>
   <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
   <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
@@ -117,21 +117,21 @@ These work great with custom content as well.
       <div class="fw-bold">Subheading</div>
       Content for list item
     </div>
-    <span class="badge bg-primary rounded-pill">14</span>
+    <span class="badge text-bg-primary rounded-pill">14</span>
   </li>
   <li class="list-group-item d-flex justify-content-between align-items-start">
     <div class="ms-2 me-auto">
       <div class="fw-bold">Subheading</div>
       Content for list item
     </div>
-    <span class="badge bg-primary rounded-pill">14</span>
+    <span class="badge text-bg-primary rounded-pill">14</span>
   </li>
   <li class="list-group-item d-flex justify-content-between align-items-start">
     <div class="ms-2 me-auto">
       <div class="fw-bold">Subheading</div>
       Content for list item
     </div>
-    <span class="badge bg-primary rounded-pill">14</span>
+    <span class="badge text-bg-primary rounded-pill">14</span>
   </li>
 </ol>
 {{< /example >}}
@@ -154,7 +154,11 @@ Add `.list-group-horizontal` to change the layout of list group items from verti
 {{< /list-group.inline >}}
 {{< /example >}}
 
-## Contextual classes
+## Variants
+
+{{< callout info >}}
+**Heads up!** As of v5.3.0, the `list-group-item-variant()` Sass mixin is deprecated. List group item variants now have their CSS variables overridden in [a Sass loop](#sass-loops).
+{{< /callout >}}
 
 Use contextual classes to style list items with a stateful background and color.
 
@@ -169,7 +173,9 @@ Use contextual classes to style list items with a stateful background and color.
 </ul>
 {{< /example >}}
 
-Contextual classes also work with `.list-group-item-action`. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item.
+### For links and buttons
+
+Contextual classes also work with `.list-group-item-action` for `<a>` and `<button>` elements. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item.
 
 {{< example >}}
 <div class="list-group">
@@ -183,7 +189,7 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o
 {{< /example >}}
 
 {{< callout info >}}
-{{< partial "callout-warning-color-assistive-technologies.md" >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
 {{< /callout >}}
 
 ## With badges
@@ -194,15 +200,15 @@ Add badges to any list group item to show unread counts, activity, and more with
 <ul class="list-group">
   <li class="list-group-item d-flex justify-content-between align-items-center">
     A list item
-    <span class="badge bg-primary rounded-pill">14</span>
+    <span class="badge text-bg-primary rounded-pill">14</span>
   </li>
   <li class="list-group-item d-flex justify-content-between align-items-center">
     A second list item
-    <span class="badge bg-primary rounded-pill">2</span>
+    <span class="badge text-bg-primary rounded-pill">2</span>
   </li>
   <li class="list-group-item d-flex justify-content-between align-items-center">
     A third list item
-    <span class="badge bg-primary rounded-pill">1</span>
+    <span class="badge text-bg-primary rounded-pill">1</span>
   </li>
 </ul>
 {{< /example >}}
@@ -224,18 +230,18 @@ Add nearly any HTML within, even for linked list groups like the one below, with
   <a href="#" class="list-group-item list-group-item-action">
     <div class="d-flex w-100 justify-content-between">
       <h5 class="mb-1">List group item heading</h5>
-      <small class="text-muted">3 days ago</small>
+      <small class="text-body-secondary">3 days ago</small>
     </div>
     <p class="mb-1">Some placeholder content in a paragraph.</p>
-    <small class="text-muted">And some muted small print.</small>
+    <small class="text-body-secondary">And some muted small print.</small>
   </a>
   <a href="#" class="list-group-item list-group-item-action">
     <div class="d-flex w-100 justify-content-between">
       <h5 class="mb-1">List group item heading</h5>
-      <small class="text-muted">3 days ago</small>
+      <small class="text-body-secondary">3 days ago</small>
     </div>
     <p class="mb-1">Some placeholder content in a paragraph.</p>
-    <small class="text-muted">And some muted small print.</small>
+    <small class="text-body-secondary">And some muted small print.</small>
   </a>
 </div>
 {{< /example >}}
@@ -247,70 +253,79 @@ Place Bootstrap's checkboxes and radios within list group items and customize as
 {{< example >}}
 <ul class="list-group">
   <li class="list-group-item">
-    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
-    First checkbox
+    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
+    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
   </li>
   <li class="list-group-item">
-    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
-    Second checkbox
+    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
+    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
   </li>
   <li class="list-group-item">
-    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
-    Third checkbox
+    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
+    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
+  </li>
+</ul>
+{{< /example >}}
+
+{{< example >}}
+<ul class="list-group">
+  <li class="list-group-item">
+    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
+    <label class="form-check-label" for="firstRadio">First radio</label>
   </li>
   <li class="list-group-item">
-    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
-    Fourth checkbox
+    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
+    <label class="form-check-label" for="secondRadio">Second radio</label>
   </li>
   <li class="list-group-item">
-    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
-    Fifth checkbox
+    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
+    <label class="form-check-label" for="thirdRadio">Third radio</label>
   </li>
 </ul>
 {{< /example >}}
 
-And if you want `<label>`s as the `.list-group-item` for large hit areas, you can do that, too.
+You can use `.stretched-link` on `<label>`s to make the whole list group item clickable.
 
 {{< example >}}
-<div class="list-group">
-  <label class="list-group-item">
-    <input class="form-check-input me-1" type="checkbox" value="">
-    First checkbox
-  </label>
-  <label class="list-group-item">
-    <input class="form-check-input me-1" type="checkbox" value="">
-    Second checkbox
-  </label>
-  <label class="list-group-item">
-    <input class="form-check-input me-1" type="checkbox" value="">
-    Third checkbox
-  </label>
-  <label class="list-group-item">
-    <input class="form-check-input me-1" type="checkbox" value="">
-    Fourth checkbox
-  </label>
-  <label class="list-group-item">
-    <input class="form-check-input me-1" type="checkbox" value="">
-    Fifth checkbox
-  </label>
-</div>
+<ul class="list-group">
+  <li class="list-group-item">
+    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
+    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
+  </li>
+  <li class="list-group-item">
+    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
+    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
+  </li>
+  <li class="list-group-item">
+    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
+    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
+  </li>
+</ul>
 {{< /example >}}
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, list groups now use local CSS variables on `.list-group` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="list-group-css-vars" file="scss/_list-group.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="list-group-variables" file="scss/_variables.scss" >}}
 
-### Mixins
+### Sass mixins
 
-Used in combination with `$theme-colors` to generate the [contextual variant classes](#contextual-classes) for `.list-group-item`s.
+{{< deprecated-in "5.3.0" >}}
 
 {{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}}
 
-### Loop
+### Sass loops
 
-Loop that generates the modifier classes with the `list-group-item-variant()` mixin.
+Loop that generates the modifier classes with an overriding of CSS variables.
 
 {{< scss-docs name="list-group-modifiers" file="scss/_list-group.scss" >}}
 
@@ -397,11 +412,11 @@ You can activate a list group navigation without writing any JavaScript by simpl
 Enable tabbable list item via JavaScript (each list item needs to be activated individually):
 
 ```js
-var triggerTabList = Array.prototype.slice.call(document.querySelectorAll('#myTab a'))
-triggerTabList.forEach(function (triggerEl) {
-  var tabTrigger = new bootstrap.Tab(triggerEl)
+const triggerTabList = document.querySelectorAll('#myTab a')
+triggerTabList.forEach(triggerEl => {
+  const tabTrigger = new bootstrap.Tab(triggerEl)
 
-  triggerEl.addEventListener('click', function (event) {
+  triggerEl.addEventListener('click', event => {
     event.preventDefault()
     tabTrigger.show()
   })
@@ -411,10 +426,10 @@ triggerTabList.forEach(function (triggerEl) {
 You can activate individual list item in several ways:
 
 ```js
-var triggerEl = document.querySelector('#myTab a[href="#profile"]')
+const triggerEl = document.querySelector('#myTab a[href="#profile"]')
 bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
 
-var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
+const triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
 bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
 ```
 
@@ -433,65 +448,26 @@ To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane
 
 ### Methods
 
-#### constructor
-
-Activates a list item element and content container. Tab should have either a `data-bs-target` or an `href` targeting a container node in the DOM.
-
-```html
-<div class="list-group" id="myList" role="tablist">
-  <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
-  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
-  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
-  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
-</div>
-
-<div class="tab-content">
-  <div class="tab-pane active" id="home" role="tabpanel">...</div>
-  <div class="tab-pane" id="profile" role="tabpanel">...</div>
-  <div class="tab-pane" id="messages" role="tabpanel">...</div>
-  <div class="tab-pane" id="settings" role="tabpanel">...</div>
-</div>
-
-<script>
-  var firstTabEl = document.querySelector('#myTab a:last-child')
-  var firstTab = new bootstrap.Tab(firstTabEl)
-
-  firstTab.show()
-</script>
-```
-
-#### show
-
-Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (for example, before the `shown.bs.tab` event occurs).
-
-```js
-  var someListItemEl = document.querySelector('#someListItem')
-  var tab = new bootstrap.Tab(someListItemEl)
-
-  tab.show()
-```
-
-#### dispose
-
-Destroys an element's tab.
+{{< callout danger >}}
+{{< partial "callouts/danger-async-methods.md" >}}
+{{< /callout >}}
 
-#### getInstance
+Activates your content as a tab element.
 
-*Static* method which allows you to get the tab instance associated with a DOM element
+You can create a tab instance with the constructor, for example:
 
 ```js
-var triggerEl = document.querySelector('#trigger')
-var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
+const bsTab = new bootstrap.Tab('#myTab')
 ```
 
-#### getOrCreateInstance
-
-*Static* method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn't initialized
-
-```js
-var triggerEl = document.querySelector('#trigger')
-var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
-```
+{{< bs-table >}}
+| Method | Description |
+| --- | --- |
+| `dispose` | Destroys an element's tab. |
+| `getInstance` | Static method which allows you to get the tab instance associated with a DOM element, you can use it like this: `bootstrap.Tab.getInstance(element)`. |
+| `getOrCreateInstance` | Static method which returns a tab instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Tab.getOrCreateInstance(element)`. |
+| `show` | Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (i.e. before the `shown.bs.tab` event occurs). |
+{{< /bs-table >}}
 
 ### Events
 
@@ -502,41 +478,23 @@ When showing a new tab, the events fire in the following order:
 3. `hidden.bs.tab` (on the previous active tab, the same one as for the `hide.bs.tab` event)
 4. `shown.bs.tab` (on the newly-active just-shown tab, the same one as for the `show.bs.tab` event)
 
-If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.
-
-<table class="table">
-  <thead>
-    <tr>
-      <th style="width: 150px;">Event type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>show.bs.tab</code></td>
-      <td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
-    </tr>
-    <tr>
-      <td><code>shown.bs.tab</code></td>
-      <td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
-    </tr>
-    <tr>
-      <td><code>hide.bs.tab</code></td>
-      <td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the current active tab and the new soon-to-be-active tab, respectively.</td>
-    </tr>
-    <tr>
-      <td><code>hidden.bs.tab</code></td>
-      <td>This event fires after a new tab is shown (and thus the previous active tab is hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the previous active tab and the new active tab, respectively.</td>
-    </tr>
-  </tbody>
-</table>
+If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.
+
+{{< bs-table >}}
+| Event type | Description |
+| --- | --- |
+| `hide.bs.tab` | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively. |
+| `hidden.bs.tab` | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively. |
+| `show.bs.tab` | This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
+| `shown.bs.tab` | This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
+{{< /bs-table >}}
 
 ```js
-var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
-tabElms.forEach(function(tabElm) {
-  tabElm.addEventListener('shown.bs.tab', function (event) {
+const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
+tabElms.forEach(tabElm => {
+  tabElm.addEventListener('shown.bs.tab', event => {
     event.target // newly activated tab
     event.relatedTarget // previous active tab
   })
-}
+})
 ```
diff --git a/site/content/docs/5.1/components/modal.md b/site/content/docs/5.3/components/modal.md
index 8255a7364..e00931e81 100644
--- a/site/content/docs/5.1/components/modal.md
+++ b/site/content/docs/5.3/components/modal.md
@@ -18,16 +18,16 @@ Before getting started with Bootstrap's modal component, be sure to read the fol
 - Due to how HTML5 defines its semantics, [the `autofocus` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus) has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
 
 ```js
-var myModal = document.getElementById('myModal')
-var myInput = document.getElementById('myInput')
+const myModal = document.getElementById('myModal')
+const myInput = document.getElementById('myInput')
 
-myModal.addEventListener('shown.bs.modal', function () {
+myModal.addEventListener('shown.bs.modal', () => {
   myInput.focus()
 })
 ```
 
 {{< callout info >}}
-{{< partial "callout-info-prefersreducedmotion.md" >}}
+{{< partial "callouts/info-prefersreducedmotion.md" >}}
 {{< /callout >}}
 
 Keep reading for demos and usage guidelines.
@@ -38,8 +38,8 @@ Keep reading for demos and usage guidelines.
 
 Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
 
-<div class="bd-example bd-example-modal">
-  <div class="modal" tabindex="-1">
+<div class="bd-example bg-body-tertiary">
+  <div class="modal position-static d-block" tabindex="-1">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
@@ -78,6 +78,10 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
 </div>
 ```
 
+{{< callout info >}}
+In the above static example, we use `<h5>`, to avoid issues with the heading hierarchy in the documentation page. Structurally, however, a modal dialog represents its own separate document/context, so the `.modal-title` should ideally be an `<h1>`. If necessary, you can use the [font size utilities]({{< docsref "/utilities/text#font-size" >}}) to control the heading's appearance. All the following live examples use this approach.
+{{< /callout >}}
+
 ### Live demo
 
 Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
@@ -86,11 +90,11 @@ Toggle a working modal demo by clicking the button below. It will slide down and
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalLiveLabel">Modal title</h5>
+        <h1 class="modal-title fs-5" id="exampleModalLiveLabel">Modal title</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
-        <p>Woohoo, you're reading this text in a modal!</p>
+        <p>Woo-hoo, you're reading this text in a modal!</p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
@@ -117,7 +121,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -134,17 +138,17 @@ Toggle a working modal demo by clicking the button below. It will slide down and
 
 ### Static backdrop
 
-When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
+When backdrop is set to static, the modal will not close when clicking outside of it. Click the button below to try it.
 
 <div class="modal fade" id="staticBackdropLive" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5>
+        <h1 class="modal-title fs-5" id="staticBackdropLiveLabel">Modal title</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
-        <p>I will not close if you click outside me. Don't even try to press escape key.</p>
+        <p>I will not close if you click outside of me. Don't even try to press escape key.</p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
@@ -171,7 +175,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
+        <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -194,11 +198,11 @@ When modals become too long for the user's viewport or device, they scroll indep
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
+        <h1 class="modal-title fs-5" id="exampleModalLongTitle">Modal title</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body" style="min-height: 1500px">
-        <p>This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p>
+        <p>This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
@@ -214,13 +218,13 @@ When modals become too long for the user's viewport or device, they scroll indep
   </button>
 </div>
 
-You can also create a scrollable modal that allows scroll the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`.
+You can also create a scrollable modal that allows scrolling the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`.
 
 <div class="modal fade" id="exampleModalScrollable" tabindex="-1" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
   <div class="modal-dialog modal-dialog-scrollable">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
+        <h1 class="modal-title fs-5" id="exampleModalScrollableTitle">Modal title</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -257,7 +261,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
+        <h1 class="modal-title fs-5" id="exampleModalCenterTitle">Modal title</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -275,7 +279,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
   <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5>
+        <h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">Modal title</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -320,15 +324,15 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5>
+        <h1 class="modal-title fs-5" id="exampleModalPopoversLabel">Modal title</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
-        <h5>Popover in a modal</h5>
-        <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute." data-bs-container="#exampleModalPopovers">button</a> triggers a popover on click.</p>
+        <h2 class="fs-5">Popover in a modal</h2>
+        <p>This <button class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute." data-bs-container="#exampleModalPopovers">button</button> triggers a popover on click.</p>
         <hr>
-        <h5>Tooltips in a modal</h5>
-        <p><a href="#" class="tooltip-test" title="Tooltip" data-bs-container="#exampleModalPopovers">This link</a> and <a href="#" class="tooltip-test" title="Tooltip" data-bs-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p>
+        <h2 class="fs-5">Tooltips in a modal</h2>
+        <p><a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
@@ -346,11 +350,11 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 
 ```html
 <div class="modal-body">
-  <h5>Popover in a modal</h5>
-  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
+  <h2 class="fs-5">Popover in a modal</h2>
+  <p>This <button class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</button> triggers a popover on click.</p>
   <hr>
-  <h5>Tooltips in a modal</h5>
-  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
+  <h2 class="fs-5">Tooltips in a modal</h2>
+  <p><a href="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
 </div>
 ```
 
@@ -362,7 +366,7 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="gridModalLabel">Grids in modals</h5>
+        <h1 class="modal-title fs-5" id="gridModalLabel">Grids in modals</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -444,7 +448,7 @@ Have a bunch of buttons that all trigger the same modal with slightly different
 
 Below is a live demo followed by example HTML and JavaScript. For more information, [read the modal events docs](#events) for details on `relatedTarget`.
 
-{{< example >}}
+{{< example stackblitz_add_js="true" >}}
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
@@ -453,7 +457,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
+        <h1 class="modal-title fs-5" id="exampleModalLabel">New message</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -477,24 +481,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
 </div>
 {{< /example >}}
 
-```js
-var exampleModal = document.getElementById('exampleModal')
-exampleModal.addEventListener('show.bs.modal', function (event) {
-  // Button that triggered the modal
-  var button = event.relatedTarget
-  // Extract info from data-bs-* attributes
-  var recipient = button.getAttribute('data-bs-whatever')
-  // If necessary, you could initiate an AJAX request here
-  // and then do the updating in a callback.
-  //
-  // Update the modal's content.
-  var modalTitle = exampleModal.querySelector('.modal-title')
-  var modalBodyInput = exampleModal.querySelector('.modal-body input')
-
-  modalTitle.textContent = 'New message to ' + recipient
-  modalBodyInput.value = recipient
-})
-```
+{{< js-docs name="varying-modal-content" file="site/assets/js/partials/snippets.js" >}}
 
 ### Toggle between modals
 
@@ -505,7 +492,7 @@ Toggle between multiple modals with some clever placement of the `data-bs-target
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
+        <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Modal 1</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -521,7 +508,7 @@ Toggle between multiple modals with some clever placement of the `data-bs-target
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
+        <h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Modal 2</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -533,7 +520,7 @@ Toggle between multiple modals with some clever placement of the `data-bs-target
     </div>
   </div>
 </div>
-<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
+<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Open first modal</button>
 {{< /example >}}
 
 ### Change animation
@@ -568,37 +555,14 @@ Embedding YouTube videos in modals requires additional JavaScript not in Bootstr
 
 Modals have three optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>Size</th>
-      <th>Class</th>
-      <th>Modal max-width</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Small</td>
-      <td><code>.modal-sm</code></td>
-      <td><code>300px</code></td>
-    </tr>
-    <tr>
-      <td>Default</td>
-      <td class="text-muted">None</td>
-      <td><code>500px</code></td>
-    </tr>
-    <tr>
-      <td>Large</td>
-      <td><code>.modal-lg</code></td>
-      <td><code>800px</code></td>
-    </tr>
-    <tr>
-      <td>Extra large</td>
-      <td><code>.modal-xl</code></td>
-      <td><code>1140px</code></td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table "table" >}}
+| Size | Class | Modal max-width
+| --- | --- | --- |
+| Small | `.modal-sm` | `300px` |
+| Default | <span class="text-body-secondary">None</span> | `500px` |
+| Large | `.modal-lg` | `800px` |
+| Extra large | `.modal-xl` | `1140px` |
+{{< /bs-table >}}
 
 Our default modal without modifier class constitutes the "medium" size modal.
 
@@ -618,7 +582,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
   <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title h4" id="exampleModalXlLabel">Extra large modal</h5>
+        <h1 class="modal-title fs-4" id="exampleModalXlLabel">Extra large modal</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -632,7 +596,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title h4" id="exampleModalLgLabel">Large modal</h5>
+        <h1 class="modal-title fs-4" id="exampleModalLgLabel">Large modal</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -646,7 +610,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
   <div class="modal-dialog modal-sm">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title h4" id="exampleModalSmLabel">Small modal</h5>
+        <h1 class="modal-title fs-4" id="exampleModalSmLabel">Small modal</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -660,40 +624,16 @@ Our default modal without modifier class constitutes the "medium" size modal.
 
 Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`.
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>Class</th>
-      <th>Availability</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>.modal-fullscreen</code></td>
-      <td>Always</td>
-    </tr>
-    <tr>
-      <td><code>.modal-fullscreen-sm-down</code></td>
-      <td>Below <code>576px</code></td>
-    </tr>
-    <tr>
-      <td><code>.modal-fullscreen-md-down</code></td>
-      <td>Below <code>768px</code></td>
-    </tr>
-    <tr>
-      <td><code>.modal-fullscreen-lg-down</code></td>
-      <td>Below <code>992px</code></td>
-    </tr>
-    <tr>
-      <td><code>.modal-fullscreen-xl-down</code></td>
-      <td>Below <code>1200px</code></td>
-    </tr>
-    <tr>
-      <td><code>.modal-fullscreen-xxl-down</code></td>
-      <td>Below <code>1400px</code></td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table >}}
+| Class | Availability |
+| --- | --- |
+| `.modal-fullscreen` | Always |
+| `.modal-fullscreen-sm-down` | `576px` |
+| `.modal-fullscreen-md-down` | `768px` |
+| `.modal-fullscreen-lg-down` | `992px` |
+| `.modal-fullscreen-xl-down` | `1200px` |
+| `.modal-fullscreen-xxl-down` | `1400px` |
+{{< /bs-table >}}
 
 <div class="bd-example">
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">Full screen</button>
@@ -715,7 +655,7 @@ Another override is the option to pop up a modal that covers the user viewport,
   <div class="modal-dialog modal-fullscreen">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h5>
+        <h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">Full screen modal</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -732,7 +672,7 @@ Another override is the option to pop up a modal that covers the user viewport,
   <div class="modal-dialog modal-fullscreen-sm-down">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title h4" id="exampleModalFullscreenSmLabel">Full screen below sm</h5>
+        <h1 class="modal-title fs-4" id="exampleModalFullscreenSmLabel">Full screen below sm</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -749,7 +689,7 @@ Another override is the option to pop up a modal that covers the user viewport,
   <div class="modal-dialog modal-fullscreen-md-down">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title h4" id="exampleModalFullscreenMdLabel">Full screen below md</h5>
+        <h1 class="modal-title fs-4" id="exampleModalFullscreenMdLabel">Full screen below md</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -766,7 +706,7 @@ Another override is the option to pop up a modal that covers the user viewport,
   <div class="modal-dialog modal-fullscreen-lg-down">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title h4" id="exampleModalFullscreenLgLabel">Full screen below lg</h5>
+        <h1 class="modal-title fs-4" id="exampleModalFullscreenLgLabel">Full screen below lg</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -783,7 +723,7 @@ Another override is the option to pop up a modal that covers the user viewport,
   <div class="modal-dialog modal-fullscreen-xl-down">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title h4" id="exampleModalFullscreenXlLabel">Full screen below xl</h5>
+        <h1 class="modal-title fs-4" id="exampleModalFullscreenXlLabel">Full screen below xl</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -800,7 +740,7 @@ Another override is the option to pop up a modal that covers the user viewport,
   <div class="modal-dialog modal-fullscreen-xxl-down">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title h4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h5>
+        <h1 class="modal-title fs-4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -813,13 +753,23 @@ Another override is the option to pop up a modal that covers the user viewport,
   </div>
 </div>
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, modals now use local CSS variables on `.modal` and `.modal-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="modal-css-vars" file="scss/_modal.scss" >}}
+
+{{< scss-docs name="modal-backdrop-css-vars" file="scss/_modal.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="modal-variables" file="scss/_variables.scss" >}}
 
-### Loop
+### Sass loops
 
 [Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`.
 
@@ -844,7 +794,7 @@ Activate a modal without writing JavaScript. Set `data-bs-toggle="modal"` on a c
 {{% js-dismiss "modal" %}}
 
 {{< callout warning >}}
-While both ways to dismiss a modal are supported, keep in mind that dismissing from outside a modal does not match [the WAI-ARIA modal dialog design pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). Do this at your own risk.
+While both ways to dismiss a modal are supported, keep in mind that dismissing from outside a modal does not match the [ARIA Authoring Practices Guide dialog (modal) pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/). Do this at your own risk.
 {{< /callout >}}
 
 ### Via JavaScript
@@ -852,48 +802,29 @@ While both ways to dismiss a modal are supported, keep in mind that dismissing f
 Create a modal with a single line of JavaScript:
 
 ```js
-var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
+const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
+// or
+const myModalAlternative = new bootstrap.Modal('#myModal', options)
 ```
 
 ### Options
 
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-backdrop=""`.
-
-<table class="table">
-  <thead>
-    <tr>
-      <th style="width: 100px;">Name</th>
-      <th style="width: 50px;">Type</th>
-      <th style="width: 50px;">Default</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>backdrop</code></td>
-      <td>boolean or the string <code>'static'</code></td>
-      <td><code>true</code></td>
-      <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
-    </tr>
-    <tr>
-      <td><code>keyboard</code></td>
-      <td>boolean</td>
-      <td><code>true</code></td>
-      <td>Closes the modal when escape key is pressed</td>
-    </tr>
-    <tr>
-      <td><code>focus</code></td>
-      <td>boolean</td>
-      <td><code>true</code></td>
-      <td>Puts the focus on the modal when initialized.</td>
-    </tr>
-  </tbody>
-</table>
+{{< markdown >}}
+{{< partial "js-data-attributes.md" >}}
+{{< /markdown >}}
+
+{{< bs-table "table" >}}
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `backdrop` | boolean, `'static'` | `true` | Includes a modal-backdrop element. Alternatively, specify `static` for a backdrop which doesn't close the modal when clicked. |
+| `focus` | boolean | `true` | Puts the focus on the modal when initialized. |
+| `keyboard` | boolean | `true` | Closes the modal when escape key is pressed. |
+{{< /bs-table >}}
 
 ### Methods
 
 {{< callout danger >}}
-{{< partial "callout-danger-async-methods.md" >}}
+{{< partial "callouts/danger-async-methods.md" >}}
 {{< /callout >}}
 
 #### Passing options
@@ -901,114 +832,40 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 Activates your content as a modal. Accepts an optional options `object`.
 
 ```js
-var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
+const myModal = new bootstrap.Modal('#myModal', {
   keyboard: false
 })
 ```
 
-#### toggle
-
-Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs).
-
-```js
-myModal.toggle()
-```
-
-#### show
-
-Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs).
-
-```js
-myModal.show()
-```
-
-Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property).
-
-```js
-var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
-myModal.show(modalToggle)
-```
-
-#### hide
-
-Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs).
-
-```js
-myModal.hide()
-```
-
-#### handleUpdate
-
-Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
-
-```js
-myModal.handleUpdate()
-```
-
-#### dispose
-
-Destroys an element's modal. (Removes stored data on the DOM element)
-
-```js
-myModal.dispose()
-```
-
-#### getInstance
-
-*Static* method which allows you to get the modal instance associated with a DOM element
-
-```js
-var myModalEl = document.getElementById('myModal')
-var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
-```
-
-#### getOrCreateInstance
-
-*Static* method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn't initialized
-
-```js
-var myModalEl = document.querySelector('#myModal')
-var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
-```
+{{< bs-table "table" >}}
+| Method | Description |
+| --- | --- |
+| `dispose` | Destroys an element's modal. (Removes stored data on the DOM element) |
+| `getInstance` | _Static_ method which allows you to get the modal instance associated with a DOM element. |
+| `getOrCreateInstance` | _Static_ method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn't initialized. |
+| `handleUpdate` | Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears). |
+| `hide` | Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). |
+| `show` | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`. |
+| `toggle` | Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs). |
+{{< /bs-table >}}
 
 ### Events
 
 Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`).
 
-<table class="table">
-  <thead>
-    <tr>
-      <th style="width: 150px;">Event type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>show.bs.modal</code></td>
-      <td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
-    </tr>
-    <tr>
-      <td><code>shown.bs.modal</code></td>
-      <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
-    </tr>
-    <tr>
-      <td><code>hide.bs.modal</code></td>
-      <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
-    </tr>
-    <tr>
-      <td><code>hidden.bs.modal</code></td>
-      <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
-    </tr>
-    <tr>
-      <td><code>hidePrevented.bs.modal</code></td>
-      <td>This event is fired when the modal is shown, its backdrop is <code>static</code> and a click outside the modal or an escape key press is performed with the keyboard option or <code>data-bs-keyboard</code> set to <code>false</code>.</td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table >}}
+| Event | Description |
+| --- | --- |
+| `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. |
+| `hidden.bs.modal` | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
+| `hidePrevented.bs.modal` | This event is fired when the modal is shown, its backdrop is `static` and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the `keyboard` option is set to `false`. |
+| `show.bs.modal` | This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event. |
+| `shown.bs.modal` | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event. |
+{{< /bs-table >}}
 
 ```js
-var myModalEl = document.getElementById('myModal')
-myModalEl.addEventListener('hidden.bs.modal', function (event) {
+const myModalEl = document.getElementById('myModal')
+myModalEl.addEventListener('hidden.bs.modal', event => {
   // do something...
 })
 ```
diff --git a/site/content/docs/5.1/components/navbar.md b/site/content/docs/5.3/components/navbar.md
index 8d245d10f..4b46eb095 100644
--- a/site/content/docs/5.1/components/navbar.md
+++ b/site/content/docs/5.3/components/navbar.md
@@ -16,9 +16,10 @@ Here's what you need to know before getting started with the navbar:
 - Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
 - Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
 - Indicate the current item by using `aria-current="page"` for the current page or `aria-current="true"` for the current item in a set.
+- **New in v5.2.0:** Navbars can be themed with CSS variables that are scoped to the `.navbar` base class. `.navbar-light` has been deprecated and `.navbar-dark` has been rewritten to override CSS variables instead of adding additional styles.
 
 {{< callout info >}}
-{{< partial "callout-info-prefersreducedmotion.md" >}}
+{{< partial "callouts/info-prefersreducedmotion.md" >}}
 {{< /callout >}}
 
 ## Supported content
@@ -36,7 +37,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from
 Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar</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">
@@ -51,10 +52,10 @@ Here's an example of all the sub-components included in a responsive light-theme
           <a class="nav-link" href="#">Link</a>
         </li>
         <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
             Dropdown
           </a>
-          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+          <ul class="dropdown-menu">
             <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
             <li><hr class="dropdown-divider"></li>
@@ -62,7 +63,7 @@ Here's an example of all the sub-components included in a responsive light-theme
           </ul>
         </li>
         <li class="nav-item">
-          <a class="nav-link disabled">Disabled</a>
+          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
         </li>
       </ul>
       <form class="d-flex" role="search">
@@ -74,7 +75,7 @@ Here's an example of all the sub-components included in a responsive light-theme
 </nav>
 {{< /example >}}
 
-This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes.
+This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-body-tertiary`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes.
 
 ### Brand
 
@@ -86,14 +87,14 @@ Add your text within an element with the `.navbar-brand` class.
 
 {{< example >}}
 <!-- As a link -->
-<nav class="navbar navbar-light bg-light">
+<nav class="navbar bg-body-tertiary">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar</a>
   </div>
 </nav>
 
 <!-- As a heading -->
-<nav class="navbar navbar-light bg-light">
+<nav class="navbar bg-body-tertiary">
   <div class="container-fluid">
     <span class="navbar-brand mb-0 h1">Navbar</span>
   </div>
@@ -105,10 +106,10 @@ Add your text within an element with the `.navbar-brand` class.
 You can replace the text within the `.navbar-brand` with an `<img>`.
 
 {{< example >}}
-<nav class="navbar navbar-light bg-light">
+<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="" width="30" height="24">
+      <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
     </a>
   </div>
 </nav>
@@ -119,10 +120,10 @@ You can replace the text within the `.navbar-brand` with an `<img>`.
 You can also make use of some additional utilities to add an image and text at the same time. Note the addition of `.d-inline-block` and `.align-text-top` on the `<img>`.
 
 {{< example >}}
-<nav class="navbar navbar-light bg-light">
+<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="" 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>
@@ -138,7 +139,7 @@ Add the `.active` class on `.nav-link` to indicate the current page.
 Please note that you should also add the `aria-current` attribute on the active `.nav-link`.
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -156,7 +157,7 @@ Please note that you should also add the `aria-current` attribute on the active
           <a class="nav-link" href="#">Pricing</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link disabled">Disabled</a>
+          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
         </li>
       </ul>
     </div>
@@ -167,7 +168,7 @@ Please note that you should also add the `aria-current` attribute on the active
 And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
@@ -178,7 +179,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
         <a class="nav-link active" aria-current="page" href="#">Home</a>
         <a class="nav-link" href="#">Features</a>
         <a class="nav-link" href="#">Pricing</a>
-        <a class="nav-link disabled">Disabled</a>
+        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
       </div>
     </div>
   </div>
@@ -188,7 +189,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
 You can also use dropdowns in your navbar. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
@@ -206,10 +207,10 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele
           <a class="nav-link" href="#">Pricing</a>
         </li>
         <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
             Dropdown link
           </a>
-          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+          <ul class="dropdown-menu">
             <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
             <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -226,7 +227,7 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele
 Place various form controls and components within a navbar:
 
 {{< example >}}
-<nav class="navbar navbar-light bg-light">
+<nav class="navbar bg-body-tertiary">
   <div class="container-fluid">
     <form class="d-flex" role="search">
       <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
@@ -239,7 +240,7 @@ Place various form controls and components within a navbar:
 Immediate child elements of `.navbar` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities]({{< docsref "/utilities/flex" >}}) as needed to adjust this behavior.
 
 {{< example >}}
-<nav class="navbar navbar-light bg-light">
+<nav class="navbar bg-body-tertiary">
   <div class="container-fluid">
     <a class="navbar-brand">Navbar</a>
     <form class="d-flex" role="search">
@@ -253,7 +254,7 @@ Immediate child elements of `.navbar` use flex layout and will default to `justi
 Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `<form>` element as the container and save some HTML.
 
 {{< example >}}
-<nav class="navbar navbar-light bg-light">
+<nav class="navbar bg-body-tertiary">
   <form class="container-fluid">
     <div class="input-group">
       <span class="input-group-text" id="basic-addon1">@</span>
@@ -266,7 +267,7 @@ Input groups work, too. If your navbar is an entire form, or mostly a form, you
 Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
 
 {{< example >}}
-<nav class="navbar navbar-light bg-light">
+<nav class="navbar bg-body-tertiary">
   <form class="container-fluid justify-content-start">
     <button class="btn btn-outline-success me-2" type="button">Main button</button>
     <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
@@ -279,7 +280,7 @@ Various buttons are supported as part of these navbar forms, too. This is also a
 Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.
 
 {{< example >}}
-<nav class="navbar navbar-light bg-light">
+<nav class="navbar bg-body-tertiary">
   <div class="container-fluid">
     <span class="navbar-text">
       Navbar text with an inline element
@@ -291,7 +292,7 @@ Navbars may contain bits of text with the help of `.navbar-text`. This class adj
 Mix and match with other components and utilities as needed.
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar w/ text</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
@@ -319,10 +320,18 @@ Mix and match with other components and utilities as needed.
 
 ## Color schemes
 
-Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Choose from `.navbar-light` for use with light background colors, or `.navbar-dark` for dark background colors. Then, customize with `.bg-*` utilities.
+{{< callout warning >}}
+**New dark navbars in v5.3.0 —** We've deprecated `.navbar-dark` in favor of the new `data-bs-theme="dark"`. Add `data-bs-theme="dark"` to the `.navbar` to enable a component-specific color mode. [Learn more about our color modes.]({{< docsref "/customize/color-modes" >}})
+
+---
+
+**New in v5.2.0  —** Navbar theming is now powered by CSS variables and `.navbar-light` has been deprecated. CSS variables are applied to `.navbar`, defaulting to the "light" appearance, and can be overridden with `.navbar-dark`.
+{{< /callout >}}
+
+Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `data-bs-theme="dark"` to the `.navbar` parent for dark background colors. Then, customize with `.bg-*` and additional utilities.
 
 <div class="bd-example">
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+  <nav class="navbar navbar-expand-lg bg-dark border-bottom border-body" data-bs-theme="dark">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Navbar</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
@@ -351,7 +360,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
     </div>
   </nav>
 
-  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+  <nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Navbar</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
@@ -380,7 +389,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
     </div>
   </nav>
 
-  <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
+  <nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;" data-bs-theme="light">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Navbar</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
@@ -411,15 +420,15 @@ Theming the navbar has never been easier thanks to the combination of theming cl
 </div>
 
 ```html
-<nav class="navbar navbar-dark bg-dark">
+<nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">
   <!-- Navbar content -->
 </nav>
 
-<nav class="navbar navbar-dark bg-primary">
+<nav class="navbar bg-primary" data-bs-theme="dark">
   <!-- Navbar content -->
 </nav>
 
-<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
+<nav class="navbar" style="background-color: #e3f2fd;" data-bs-theme="light">
   <!-- Navbar content -->
 </nav>
 ```
@@ -430,7 +439,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
 
 {{< example >}}
 <div class="container">
-  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <nav class="navbar navbar-expand-lg bg-body-tertiary">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Navbar</a>
     </div>
@@ -441,7 +450,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
 Use any of the responsive containers to change how wide the content in your navbar is presented.
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
   <div class="container-md">
     <a class="navbar-brand" href="#">Navbar</a>
   </div>
@@ -450,12 +459,12 @@ Use any of the responsive containers to change how wide the content in your navb
 
 ## Placement
 
-Use our [position utilities]({{< docsref "/utilities/position" >}}) to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.
+Use our [position utilities]({{< docsref "/utilities/position" >}}) to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, stickied to the top (scrolls with the page until it reaches the top, then stays there), or stickied to the bottom (scrolls with the page until it reaches the bottom, then stays there).
 
-Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully supported in every browser](https://caniuse.com/css-sticky)**.
+Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.
 
 {{< example >}}
-<nav class="navbar navbar-light bg-light">
+<nav class="navbar bg-body-tertiary">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Default</a>
   </div>
@@ -463,7 +472,7 @@ Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully suppo
 {{< /example >}}
 
 {{< example >}}
-<nav class="navbar fixed-top navbar-light bg-light">
+<nav class="navbar fixed-top bg-body-tertiary">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Fixed top</a>
   </div>
@@ -471,7 +480,7 @@ Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully suppo
 {{< /example >}}
 
 {{< example >}}
-<nav class="navbar fixed-bottom navbar-light bg-light">
+<nav class="navbar fixed-bottom bg-body-tertiary">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Fixed bottom</a>
   </div>
@@ -479,13 +488,21 @@ Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully suppo
 {{< /example >}}
 
 {{< example >}}
-<nav class="navbar sticky-top navbar-light bg-light">
+<nav class="navbar sticky-top bg-body-tertiary">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Sticky top</a>
   </div>
 </nav>
 {{< /example >}}
 
+{{< example >}}
+<nav class="navbar sticky-bottom bg-body-tertiary">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="#">Sticky bottom</a>
+  </div>
+</nav>
+{{< /example >}}
+
 ## Scrolling
 
 Add `.navbar-nav-scroll` to a `.navbar-nav` (or other navbar sub-component) to enable vertical scrolling within the toggleable contents of a collapsed navbar. By default, scrolling kicks in at `75vh` (or 75% of the viewport height), but you can override that with the local CSS custom property `--bs-navbar-height` or custom styles. At larger viewports when the navbar is expanded, content will appear as it does in a default navbar.
@@ -495,7 +512,7 @@ Please note that this behavior comes with a potential drawback of `overflow`—w
 Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-height: 100px;"`, with some extra margin utilities for optimum spacing.
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar scroll</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
@@ -510,10 +527,10 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-hei
           <a class="nav-link" href="#">Link</a>
         </li>
         <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
             Link
           </a>
-          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
+          <ul class="dropdown-menu">
             <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
             <li><hr class="dropdown-divider"></li>
@@ -521,7 +538,7 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-hei
           </ul>
         </li>
         <li class="nav-item">
-          <a class="nav-link disabled">Link</a>
+          <a class="nav-link disabled" aria-disabled="true">Link</a>
         </li>
       </ul>
       <form class="d-flex" role="search">
@@ -546,7 +563,7 @@ Navbar togglers are left-aligned by default, but should they follow a sibling el
 With no `.navbar-brand` shown at the smallest breakpoint:
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
   <div class="container-fluid">
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -561,7 +578,7 @@ With no `.navbar-brand` shown at the smallest breakpoint:
           <a class="nav-link" href="#">Link</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link disabled">Disabled</a>
+          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
         </li>
       </ul>
       <form class="d-flex" role="search">
@@ -576,7 +593,7 @@ With no `.navbar-brand` shown at the smallest breakpoint:
 With a brand name shown on the left and toggler on the right:
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
@@ -591,7 +608,7 @@ With a brand name shown on the left and toggler on the right:
           <a class="nav-link" href="#">Link</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link disabled">Disabled</a>
+          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
         </li>
       </ul>
       <form class="d-flex" role="search">
@@ -606,7 +623,7 @@ With a brand name shown on the left and toggler on the right:
 With a toggler on the left and brand name on the right:
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
   <div class="container-fluid">
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -621,7 +638,7 @@ With a toggler on the left and brand name on the right:
           <a class="nav-link" href="#">Link</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link disabled">Disabled</a>
+          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
         </li>
       </ul>
       <form class="d-flex" role="search">
@@ -638,10 +655,10 @@ With a toggler on the left and brand name on the right:
 Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the `.navbar` . Because our plugin works on the `id` and `data-bs-target` matching, that's easily done!
 
 {{< example >}}
-<div class="collapse" id="navbarToggleExternalContent">
+<div class="collapse" id="navbarToggleExternalContent" data-bs-theme="dark">
   <div class="bg-dark p-4">
-    <h5 class="text-white h4">Collapsed content</h5>
-    <span class="text-muted">Toggleable via the navbar brand.</span>
+    <h5 class="text-body-emphasis h4">Collapsed content</h5>
+    <span class="text-body-secondary">Toggleable via the navbar brand.</span>
   </div>
 </div>
 <nav class="navbar navbar-dark bg-dark">
@@ -657,21 +674,21 @@ When you do this, we recommend including additional JavaScript to move the focus
 
 ### Offcanvas
 
-Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin. We extend both the offcanvas default styles and use our `.navbar-expand-*` classes to create a dynamic and flexible navigation sidebar.
+Transform your expanding and collapsing navbar into an offcanvas drawer with the [offcanvas component]({{< docsref "/components/offcanvas" >}}). We extend both the offcanvas default styles and use our `.navbar-expand-*` classes to create a dynamic and flexible navigation sidebar.
 
 In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `.navbar-expand-*` class entirely.
 
 {{< example >}}
-<nav class="navbar navbar-light bg-light fixed-top">
+<nav class="navbar bg-body-tertiary fixed-top">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Offcanvas navbar</a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
+    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
       <div class="offcanvas-header">
         <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
-        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
       </div>
       <div class="offcanvas-body">
         <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
@@ -682,10 +699,10 @@ In the example below, to create an offcanvas navbar that is always collapsed acr
             <a class="nav-link" href="#">Link</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Dropdown
             </a>
-            <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
+            <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
               <li>
@@ -695,7 +712,7 @@ In the example below, to create an offcanvas navbar that is always collapsed acr
             </ul>
           </li>
         </ul>
-        <form class="d-flex" role="search">
+        <form class="d-flex mt-3" role="search">
           <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
           <button class="btn btn-outline-success" type="submit">Search</button>
         </form>
@@ -708,9 +725,9 @@ In the example below, to create an offcanvas navbar that is always collapsed acr
 To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `lg`, use `.navbar-expand-lg`.
 
 ```html
-<nav class="navbar navbar-light navbar-expand-lg bg-light fixed-top">
+<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
   <a class="navbar-brand" href="#">Offcanvas navbar</a>
-  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
+  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
   <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
@@ -719,15 +736,81 @@ To create an offcanvas navbar that expands into a normal navbar at a specific br
 </nav>
 ```
 
-## Sass
+When using offcanvas in a dark navbar, be aware that you may need to have a dark background on the offcanvas content to avoid the text becoming illegible. In the example below, we add `.navbar-dark` and `.bg-dark` to the `.navbar`, `.text-bg-dark` to the `.offcanvas`, `.dropdown-menu-dark` to `.dropdown-menu`, and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas.
+
+{{< example >}}
+<nav class="navbar navbar-dark bg-dark fixed-top">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
+      <div class="offcanvas-header">
+        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
+        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      </div>
+      <div class="offcanvas-body">
+        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="#">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Link</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Dropdown
+            </a>
+            <ul class="dropdown-menu dropdown-menu-dark">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li>
+                <hr class="dropdown-divider">
+              </li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
+          </li>
+        </ul>
+        <form class="d-flex mt-3" role="search">
+          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+          <button class="btn btn-success" type="submit">Search</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</nav>
+{{< /example >}}
+
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, navbars now use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="navbar-css-vars" file="scss/_navbar.scss" >}}
+
+Some additional CSS variables are also present on `.navbar-nav`:
+
+{{< scss-docs name="navbar-nav-css-vars" file="scss/_navbar.scss" >}}
+
+Customization through CSS variables can be seen on the `.navbar-dark` class where we override specific values without adding duplicate CSS selectors.
+
+{{< scss-docs name="navbar-dark-css-vars" file="scss/_navbar.scss" >}}
+
+### Sass variables
+
+Variables for all navbars:
+
 {{< scss-docs name="navbar-variables" file="scss/_variables.scss" >}}
 
-{{< scss-docs name="navbar-theme-variables" file="scss/_variables.scss" >}}
+Variables for the [dark navbar](#color-schemes):
+
+{{< scss-docs name="navbar-dark-variables" file="scss/_variables.scss" >}}
 
-### Loop
+### Sass loops
 
 [Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`.
 
diff --git a/site/content/docs/5.1/components/navs-tabs.md b/site/content/docs/5.3/components/navs-tabs.md
index 68e744b1a..5cf75e145 100644
--- a/site/content/docs/5.1/components/navs-tabs.md
+++ b/site/content/docs/5.3/components/navs-tabs.md
@@ -3,7 +3,7 @@ layout: docs
 title: Navs and tabs
 description: Documentation and examples for how to use Bootstrap's included navigation components.
 group: components
-aliases: "/docs/5.1/components/navs/"
+aliases: "/docs/5.3/components/navs/"
 toc: true
 ---
 
@@ -31,7 +31,7 @@ To convey the active state to assistive technologies, use the `aria-current` att
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link disabled">Disabled</a>
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
   </li>
 </ul>
 {{< /example >}}
@@ -43,7 +43,7 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
   <a class="nav-link active" aria-current="page" href="#">Active</a>
   <a class="nav-link" href="#">Link</a>
   <a class="nav-link" href="#">Link</a>
-  <a class="nav-link disabled">Disabled</a>
+  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
 </nav>
 {{< /example >}}
 
@@ -53,7 +53,7 @@ Change the style of `.nav`s component with modifiers and utilities. Mix and matc
 
 ### Horizontal alignment
 
-Change the horizontal alignment of your nav with [flexbox utilities]({{< docsref "/layout/grid#horizontal-alignment" >}}). By default, navs are left-aligned, but you can easily change them to center or right aligned.
+Change the horizontal alignment of your nav with [flexbox utilities]({{< docsref "/utilities/flex#justify-content" >}}). By default, navs are left-aligned, but you can easily change them to center or right-aligned.
 
 Centered with `.justify-content-center`:
 
@@ -69,7 +69,7 @@ Centered with `.justify-content-center`:
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link disabled">Disabled</a>
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
   </li>
 </ul>
 {{< /example >}}
@@ -88,7 +88,7 @@ Right-aligned with `.justify-content-end`:
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link disabled">Disabled</a>
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
   </li>
 </ul>
 {{< /example >}}
@@ -109,7 +109,7 @@ Stack your navigation by changing the flex item direction with the `.flex-column
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link disabled">Disabled</a>
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
   </li>
 </ul>
 {{< /example >}}
@@ -121,7 +121,7 @@ As always, vertical navigation is possible without `<ul>`s, too.
   <a class="nav-link active" aria-current="page" href="#">Active</a>
   <a class="nav-link" href="#">Link</a>
   <a class="nav-link" href="#">Link</a>
-  <a class="nav-link disabled">Disabled</a>
+  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
 </nav>
 {{< /example >}}
 
@@ -141,7 +141,7 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link disabled">Disabled</a>
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
   </li>
 </ul>
 {{< /example >}}
@@ -162,14 +162,35 @@ Take that same HTML, but use `.nav-pills` instead:
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link disabled">Disabled</a>
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+{{< /example >}}
+
+### Underline
+
+Take that same HTML, but use `.nav-underline` instead:
+
+{{< example >}}
+<ul class="nav nav-underline">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
   </li>
 </ul>
 {{< /example >}}
 
 ### Fill and justify
 
-Force your `.nav`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.
+Force your `.nav`'s contents to extend the full available width with one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.
 
 {{< example >}}
 <ul class="nav nav-pills nav-fill">
@@ -183,7 +204,7 @@ Force your `.nav`'s contents to extend the full available width one of two modif
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link disabled">Disabled</a>
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
   </li>
 </ul>
 {{< /example >}}
@@ -195,7 +216,7 @@ When using a `<nav>`-based navigation, you can safely omit `.nav-item` as only `
   <a class="nav-link active" aria-current="page" href="#">Active</a>
   <a class="nav-link" href="#">Much longer nav link</a>
   <a class="nav-link" href="#">Link</a>
-  <a class="nav-link disabled">Disabled</a>
+  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
 </nav>
 {{< /example >}}
 
@@ -213,7 +234,7 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link disabled">Disabled</a>
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
   </li>
 </ul>
 {{< /example >}}
@@ -225,7 +246,7 @@ Similar to the `.nav-fill` example using a `<nav>`-based navigation.
   <a class="nav-link active" aria-current="page" href="#">Active</a>
   <a class="nav-link" href="#">Much longer nav link</a>
   <a class="nav-link" href="#">Link</a>
-  <a class="nav-link disabled">Disabled</a>
+  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
 </nav>
 
 {{< /example >}}
@@ -238,7 +259,7 @@ If you need responsive nav variations, consider using a series of [flexbox utili
   <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
   <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
   <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
-  <a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
+  <a class="flex-sm-fill text-sm-center nav-link disabled" aria-disabled="true">Disabled</a>
 </nav>
 {{< /example >}}
 
@@ -246,7 +267,7 @@ If you need responsive nav variations, consider using a series of [flexbox utili
 
 If you're using navs to provide a navigation bar, be sure to add a `role="navigation"` to the most logical parent container of the `<ul>`, or wrap a `<nav>` element around the whole navigation. Do not add the role to the `<ul>` itself, as this would prevent it from being announced as an actual list by assistive technologies.
 
-Note that navigation bars, even if visually styled as tabs with the `.nav-tabs` class, should **not** be given `role="tablist"`, `role="tab"` or `role="tabpanel"` attributes. These are only appropriate for dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel). See [JavaScript behavior](#javascript-behavior) for dynamic tabbed interfaces in this section for an example. The `aria-current` attribute is not necessary on dynamic tabbed interfaces since our JavaScript handles the selected state by adding `aria-selected="true"` on the active tab.
+Note that navigation bars, even if visually styled as tabs with the `.nav-tabs` class, should **not** be given `role="tablist"`, `role="tab"` or `role="tabpanel"` attributes. These are only appropriate for dynamic tabbed interfaces, as described in the [ARIA Authoring Practices Guide tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/). See [JavaScript behavior](#javascript-behavior) for dynamic tabbed interfaces in this section for an example. The `aria-current` attribute is not necessary on dynamic tabbed interfaces since our JavaScript handles the selected state by adding `aria-selected="true"` on the active tab.
 
 ## Using dropdowns
 
@@ -273,7 +294,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link disabled">Disabled</a>
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
   </li>
 </ul>
 {{< /example >}}
@@ -299,46 +320,72 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link disabled">Disabled</a>
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
   </li>
 </ul>
 {{< /example >}}
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, navs now use local CSS variables on `.nav`, `.nav-tabs`, and `.nav-pills` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+On the `.nav` base class:
+
+{{< scss-docs name="nav-css-vars" file="scss/_nav.scss" >}}
+
+On the `.nav-tabs` modifier class:
+
+{{< scss-docs name="nav-tabs-css-vars" file="scss/_nav.scss" >}}
+
+On the `.nav-pills` modifier class:
+
+{{< scss-docs name="nav-pills-css-vars" file="scss/_nav.scss" >}}
+
+{{< added-in "5.3.0" >}}
+
+On the `.nav-underline` modifier class:
+
+{{< scss-docs name="nav-underline-css-vars" file="scss/_nav.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="nav-variables" file="scss/_variables.scss" >}}
 
 ## JavaScript behavior
 
 Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content.
 
-Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using `<button>` elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.
-
-Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab's trigger element is not immediately visible (as it's inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.
-
 <div class="bd-example">
   <ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
     <li class="nav-item" role="presentation">
-      <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
+      <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
     </li>
     <li class="nav-item" role="presentation">
-      <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
+      <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
     </li>
     <li class="nav-item" role="presentation">
-      <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
+      <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
+    </li>
+    <li class="nav-item" role="presentation">
+      <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
     </li>
   </ul>
   <div class="tab-content" id="myTabContent">
-    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
-      <p><strong>This is some placeholder content the Home tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+    <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
+      <p>This is some placeholder content the <strong>Home tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+    </div>
+    <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
+      <p>This is some placeholder content the <strong>Profile tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
     </div>
-    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
-      <p><strong>This is some placeholder content the Profile tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+    <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
+      <p>This is some placeholder content the <strong>Contact tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
     </div>
-    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
-      <p><strong>This is some placeholder content the Contact tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+    <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">
+      <p>This is some placeholder content the <strong>Disabled tab's</strong> associated content.</p>
     </div>
   </div>
 </div>
@@ -346,19 +393,23 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus,
 ```html
 <ul class="nav nav-tabs" id="myTab" role="tablist">
   <li class="nav-item" role="presentation">
-    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
+    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
   </li>
   <li class="nav-item" role="presentation">
-    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
+    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
   </li>
   <li class="nav-item" role="presentation">
-    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
+    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
   </li>
 </ul>
 <div class="tab-content" id="myTabContent">
-  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
-  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
-  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
+  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
+  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
+  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
+  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
 </div>
 ```
 
@@ -370,17 +421,21 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
       <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
       <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
       <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
+      <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
     </div>
   </nav>
   <div class="tab-content" id="nav-tabContent">
-    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
-      <p><strong>This is some placeholder content the Home tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
+      <p>This is some placeholder content the <strong>Home tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+    </div>
+    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
+      <p>This is some placeholder content the <strong>Profile tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
     </div>
-    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
-      <p><strong>This is some placeholder content the Profile tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">
+      <p>This is some placeholder content the <strong>Contact tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
     </div>
-    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
-      <p><strong>This is some placeholder content the Contact tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+    <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">
+      <p>This is some placeholder content the <strong>Disabled tab's</strong> associated content.</p>
     </div>
   </div>
 </div>
@@ -391,12 +446,14 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
     <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
     <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
     <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
+    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
   </div>
 </nav>
 <div class="tab-content" id="nav-tabContent">
-  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
-  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
-  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
+  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>
+  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
+  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
+  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
 </div>
 ```
 
@@ -413,16 +470,22 @@ The tabs plugin also works with pills.
     <li class="nav-item" role="presentation">
       <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
     </li>
+    <li class="nav-item" role="presentation">
+      <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
+    </li>
   </ul>
   <div class="tab-content" id="pills-tabContent">
-    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
-      <p><strong>This is some placeholder content the Home tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
+      <p>This is some placeholder content the <strong>Home tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+    </div>
+    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
+      <p>This is some placeholder content the <strong>Profile tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
     </div>
-    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
-      <p><strong>This is some placeholder content the Profile tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
+      <p>This is some placeholder content the <strong>Contact tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
     </div>
-    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
-      <p><strong>This is some placeholder content the Contact tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+    <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">
+      <p>This is some placeholder content the <strong>Disabled tab's</strong> associated content.</p>
     </div>
   </div>
 </div>
@@ -438,36 +501,44 @@ The tabs plugin also works with pills.
   <li class="nav-item" role="presentation">
     <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
   </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
+  </li>
 </ul>
 <div class="tab-content" id="pills-tabContent">
-  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
-  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
-  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
+  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">...</div>
+  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
+  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
+  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
 </div>
 ```
 
-And with vertical pills.
+And with vertical pills. Ideally, for vertical tabs, you should also add `aria-orientation="vertical"` to the tab list container.
 
 <div class="bd-example">
   <div class="d-flex align-items-start">
     <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
       <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
       <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
+      <button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</button>
       <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
       <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
     </div>
     <div class="tab-content" id="v-pills-tabContent">
-      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
-      <p><strong>This is some placeholder content the Home tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">
+        <p>This is some placeholder content the <strong>Home tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+      </div>
+      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">
+        <p>This is some placeholder content the <strong>Profile tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
       </div>
-      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
-      <p><strong>This is some placeholder content the Profile tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+      <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">
+        <p>This is some placeholder content the <strong>Disabled tab's</strong> associated content.</p>
       </div>
-      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
-      <p><strong>This is some placeholder content the Messages tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">
+        <p>This is some placeholder content the <strong>Messages tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
       </div>
-      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
-      <p><strong>This is some placeholder content the Settings tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">
+        <p>This is some placeholder content the <strong>Settings tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
       </div>
     </div>
   </div>
@@ -478,18 +549,34 @@ And with vertical pills.
   <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
     <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
     <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
+    <button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</button>
     <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
     <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
   </div>
   <div class="tab-content" id="v-pills-tabContent">
-    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
-    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
-    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
-    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
+    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">...</div>
+    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
+    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
+    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
+    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
   </div>
 </div>
 ```
 
+### Accessibility
+
+Dynamic tabbed interfaces, as described in the [ARIA Authoring Practices Guide tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality, and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using `<button>` elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.
+
+In line with the ARIA Authoring Practices pattern, only the currently active tab receives keyboard focus. When the JavaScript plugin is initialized, it will set `tabindex="-1"` on all inactive tab controls. Once the currently active tab has focus, the cursor keys activate the previous/next tab. The <kbd>Home</kbd> and <kbd>End</kbd> keys activate the first and last tabs, respectively. The plugin will change the [roving `tabindex`](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/) accordingly. However, note that the JavaScript plugin does not distinguish between horizontal and vertical tab lists when it comes to cursor key interactions: regardless of the tab list's orientation, both the up *and* left cursor go to the previous tab, and down *and* right cursor go to the next tab.
+
+{{< callout warning >}}
+In general, to facilitate keyboard navigation, it's recommended to make the tab panels themselves focusable as well, unless the first element containing meaningful content inside the tab panel is already focusable. The JavaScript plugin does not try to handle this aspect—where appropriate, you'll need to explicitly make your tab panels focusable by adding `tabindex="0"` in your markup.
+{{< /callout >}}
+
+{{< callout danger >}}
+The tab JavaScript plugin **does not** support tabbed interfaces that contain dropdown menus, as these cause both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab's trigger element is not immediately visible (as it's inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.
+{{< /callout >}}
+
 ### Using data attributes
 
 You can activate a tab or pill navigation without writing any JavaScript by simply specifying `data-bs-toggle="tab"` or `data-bs-toggle="pill"` on an element. Use these data attributes on `.nav-tabs` or `.nav-pills`.
@@ -513,10 +600,10 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
 
 <!-- Tab panes -->
 <div class="tab-content">
-  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
-  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
-  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
-  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
+  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
+  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
+  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
+  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
 </div>
 ```
 
@@ -525,11 +612,11 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
 Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
 
 ```js
-var triggerTabList = Array.prototype.slice.call(document.querySelectorAll('#myTab button'))
-triggerTabList.forEach(function (triggerEl) {
-  var tabTrigger = new bootstrap.Tab(triggerEl)
+const triggerTabList = document.querySelectorAll('#myTab button')
+triggerTabList.forEach(triggerEl => {
+  const tabTrigger = new bootstrap.Tab(triggerEl)
 
-  triggerEl.addEventListener('click', function (event) {
+  triggerEl.addEventListener('click', event => {
     event.preventDefault()
     tabTrigger.show()
   })
@@ -539,10 +626,10 @@ triggerTabList.forEach(function (triggerEl) {
 You can activate individual tabs in several ways:
 
 ```js
-var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
+const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
 bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
 
-var triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
+const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
 bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
 ```
 
@@ -552,86 +639,35 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a
 
 ```html
 <div class="tab-content">
-  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
-  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
-  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
-  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
+  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
+  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
+  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
+  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
 </div>
 ```
 
 ### Methods
 
 {{< callout danger >}}
-{{< partial "callout-danger-async-methods.md" >}}
+{{< partial "callouts/danger-async-methods.md" >}}
 {{< /callout >}}
 
-#### constructor
-
-Activates a tab element and content container. Tab should have either a `data-bs-target` or, if using a link, an `href` attribute, targeting a container node in the DOM.
-
-```html
-<ul class="nav nav-tabs" id="myTab" role="tablist">
-  <li class="nav-item" role="presentation">
-    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
-  </li>
-  <li class="nav-item" role="presentation">
-    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
-  </li>
-  <li class="nav-item" role="presentation">
-    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
-  </li>
-  <li class="nav-item" role="presentation">
-    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
-  </li>
-</ul>
-
-<div class="tab-content">
-  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
-  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
-  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
-  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
-</div>
-
-<script>
-  var firstTabEl = document.querySelector('#myTab li:last-child button')
-  var firstTab = new bootstrap.Tab(firstTabEl)
-
-  firstTab.show()
-</script>
-```
-
-#### show
-
-Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (i.e. before the `shown.bs.tab` event occurs).
+Activates your content as a tab element.
 
-```js
-  var someTabTriggerEl = document.querySelector('#someTabTrigger')
-  var tab = new bootstrap.Tab(someTabTriggerEl)
-
-  tab.show()
-```
-
-#### dispose
-
-Destroys an element's tab.
-
-#### getInstance
-
-*Static* method which allows you to get the tab instance associated with a DOM element
+You can create a tab instance with the constructor, for example:
 
 ```js
-var triggerEl = document.querySelector('#trigger')
-var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
+const bsTab = new bootstrap.Tab('#myTab')
 ```
 
-#### getOrCreateInstance
-
-*Static* method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn't initialized
-
-```js
-var triggerEl = document.querySelector('#trigger')
-var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
-```
+{{< bs-table >}}
+| Method | Description |
+| --- | --- |
+| `dispose` | Destroys an element's tab. |
+| `getInstance` | Static method which allows you to get the tab instance associated with a DOM element, you can use it like this: `bootstrap.Tab.getInstance(element)`. |
+| `getOrCreateInstance` | Static method which returns a tab instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Tab.getOrCreateInstance(element)`. |
+| `show` | Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (i.e. before the `shown.bs.tab` event occurs). |
+{{< /bs-table >}}
 
 ### Events
 
@@ -644,36 +680,18 @@ When showing a new tab, the events fire in the following order:
 
 If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.
 
-<table class="table">
-  <thead>
-    <tr>
-      <th style="width: 150px;">Event type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>show.bs.tab</code></td>
-      <td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
-    </tr>
-    <tr>
-      <td><code>shown.bs.tab</code></td>
-      <td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
-    </tr>
-    <tr>
-      <td><code>hide.bs.tab</code></td>
-      <td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the current active tab and the new soon-to-be-active tab, respectively.</td>
-    </tr>
-    <tr>
-      <td><code>hidden.bs.tab</code></td>
-      <td>This event fires after a new tab is shown (and thus the previous active tab is hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the previous active tab and the new active tab, respectively.</td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table >}}
+| Event type | Description |
+| --- | --- |
+| `hide.bs.tab` | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively. |
+| `hidden.bs.tab` | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively. |
+| `show.bs.tab` | This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
+| `shown.bs.tab` | This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
+{{< /bs-table >}}
 
 ```js
-var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
-tabEl.addEventListener('shown.bs.tab', function (event) {
+const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
+tabEl.addEventListener('shown.bs.tab', event => {
   event.target // newly activated tab
   event.relatedTarget // previous active tab
 })
diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.3/components/offcanvas.md
index fd18fe5c9..ac257df24 100644
--- a/site/content/docs/5.1/components/offcanvas.md
+++ b/site/content/docs/5.3/components/offcanvas.md
@@ -11,14 +11,14 @@ toc: true
 Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.
 
 - Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they are separate plugins.
-- Similarly, some [source Sass](#sass) variables for offcanvas's styles and dimensions are inherited from the modal's variables.
+- Similarly, some [source Sass](#sass-variables) variables for offcanvas's styles and dimensions are inherited from the modal's variables.
 - When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas.
 - Similar to modals, only one offcanvas can be shown at a time.
 
 **Heads up!** Given how CSS handles animations, you cannot use `margin` or `translate` on an `.offcanvas` element. Instead, use the class as an independent wrapping element.
 
 {{< callout info >}}
-{{< partial "callout-info-prefersreducedmotion.md" >}}
+{{< partial "callouts/info-prefersreducedmotion.md" >}}
 {{< /callout >}}
 
 ## Examples
@@ -27,11 +27,11 @@ Offcanvas is a sidebar component that can be toggled via JavaScript to appear fr
 
 Below is an offcanvas example that is shown by default (via `.show` on `.offcanvas`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.
 
-{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}}
-<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
+{{< example class="bd-example-offcanvas p-0 bg-body-tertiary overflow-hidden" >}}
+<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
-    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
   </div>
   <div class="offcanvas-body">
     Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
@@ -59,17 +59,17 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ
 <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
-    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
   </div>
   <div class="offcanvas-body">
     <div class="">
       Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
     </div>
     <div class="dropdown mt-3">
-      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
+      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
         Dropdown button
       </button>
-      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+      <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#">Action</a></li>
         <li><a class="dropdown-item" href="#">Another action</a></li>
         <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -79,93 +79,166 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ
 </div>
 {{< /example >}}
 
-## Placement
+### Body scrolling
 
-There's no default placement for offcanvas components, so you must add one of the modifier classes below;
+Scrolling the `<body>` element is disabled when an offcanvas and its backdrop are visible. Use the `data-bs-scroll` attribute to enable `<body>` scrolling.
 
-- `.offcanvas-start` places offcanvas on the left of the viewport (shown above)
-- `.offcanvas-end` places offcanvas on the right of the viewport
-- `.offcanvas-top` places offcanvas on the top of the viewport
-- `.offcanvas-bottom` places offcanvas on the bottom of the viewport
+{{< example >}}
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
 
-Try the top, right, and bottom examples out below.
+<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with body scrolling</h5>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">
+    <p>Try scrolling the rest of the page to see this option in action.</p>
+  </div>
+</div>
+{{< /example >}}
+
+### Body scrolling and backdrop
+
+You can also enable `<body>` scrolling with a visible backdrop.
 
 {{< example >}}
-<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
 
-<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
+<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
   <div class="offcanvas-header">
-    <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
-    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
   </div>
   <div class="offcanvas-body">
-    ...
+    <p>Try scrolling the rest of the page to see this option in action.</p>
   </div>
 </div>
 {{< /example >}}
 
+### Static backdrop
+
+When backdrop is set to static, the offcanvas will not close when clicking outside of it.
+
 {{< example >}}
-<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
+  Toggle static offcanvas
+</button>
 
-<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
+<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
   <div class="offcanvas-header">
-    <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
-    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
   </div>
   <div class="offcanvas-body">
-    ...
+    <div>
+      I will not close if you click outside of me.
+    </div>
   </div>
 </div>
 {{< /example >}}
 
-{{< example >}}
-<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
+## Dark offcanvas
 
-<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
+{{< deprecated-in "5.3.0" >}} {{< added-in "5.2.0" >}}
+
+Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`.
+
+{{< callout warning >}}
+**Heads up!** Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself.
+{{< /callout >}}
+
+{{< example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" >}}
+<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
   <div class="offcanvas-header">
-    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
-    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
+    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
   </div>
-  <div class="offcanvas-body small">
-    ...
+  <div class="offcanvas-body">
+    <p>Place offcanvas content here.</p>
   </div>
 </div>
 {{< /example >}}
 
-## Backdrop
+## Responsive
+
+{{< added-in "5.2.0" >}}
 
-Scrolling the `<body>` element is disabled when an offcanvas and its backdrop are visible. Use the `data-bs-scroll` attribute to toggle `<body>` scrolling and `data-bs-backdrop` to toggle the backdrop.
+Responsive offcanvas classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, `.offcanvas-lg` hides content in an offcanvas below the `lg` breakpoint, but shows the content above the `lg` breakpoint.
 
 {{< example >}}
-<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
-<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
-<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
+<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>
 
-<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
+<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>
+
+<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
   <div class="offcanvas-header">
-    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
-    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
   </div>
   <div class="offcanvas-body">
-    <p>Try scrolling the rest of the page to see this option in action.</p>
+    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
   </div>
 </div>
-<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
+{{< /example >}}
+
+Responsive offcanvas classes are available across for each breakpoint.
+
+- `.offcanvas`
+- `.offcanvas-sm`
+- `.offcanvas-md`
+- `.offcanvas-lg`
+- `.offcanvas-xl`
+- `.offcanvas-xxl`
+
+## Placement
+
+There's no default placement for offcanvas components, so you must add one of the modifier classes below.
+
+- `.offcanvas-start` places offcanvas on the left of the viewport (shown above)
+- `.offcanvas-end` places offcanvas on the right of the viewport
+- `.offcanvas-top` places offcanvas on the top of the viewport
+- `.offcanvas-bottom` places offcanvas on the bottom of the viewport
+
+Try the top, right, and bottom examples out below.
+
+{{< example >}}
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
+
+<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
   <div class="offcanvas-header">
-    <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
-    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
   </div>
   <div class="offcanvas-body">
-    <p>.....</p>
+    ...
   </div>
 </div>
-<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
+{{< /example >}}
+
+{{< example >}}
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
+
+<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
   <div class="offcanvas-header">
-    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
-    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
   </div>
   <div class="offcanvas-body">
-    <p>Try scrolling the rest of the page to see this option in action.</p>
+    ...
+  </div>
+</div>
+{{< /example >}}
+
+{{< example >}}
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
+
+<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body small">
+    ...
   </div>
 </div>
 {{< /example >}}
@@ -174,10 +247,18 @@ Scrolling the `<body>` element is disabled when an offcanvas and its backdrop ar
 
 Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-labelledby="..."`—referencing the offcanvas title—to `.offcanvas`. Note that you don’t need to add `role="dialog"` since we already add it via JavaScript.
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, offcanvas now uses local CSS variables on `.offcanvas` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="offcanvas-css-vars" file="scss/_offcanvas.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="offcanvas-variables" file="scss/_variables.scss" >}}
 
 ## Usage
@@ -204,7 +285,7 @@ Add `data-bs-toggle="offcanvas"` and a `data-bs-target` or `href` to the element
 {{% js-dismiss "offcanvas" %}}
 
 {{< callout warning >}}
-While both ways to dismiss an offcanvas are supported, keep in mind that dismissing from outside an offcanvas does not match [the WAI-ARIA modal dialog design pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). Do this at your own risk.
+While both ways to dismiss an offcanvas are supported, keep in mind that dismissing from outside an offcanvas does not match the [ARIA Authoring Practices Guide dialog (modal) pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/). Do this at your own risk.
 {{< /callout >}}
 
 ### Via JavaScript
@@ -212,28 +293,28 @@ While both ways to dismiss an offcanvas are supported, keep in mind that dismiss
 Enable manually with:
 
 ```js
-var offcanvasElementList = Array.prototype.slice.call(document.querySelectorAll('.offcanvas'))
-var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
-  return new bootstrap.Offcanvas(offcanvasEl)
-})
+const offcanvasElementList = document.querySelectorAll('.offcanvas')
+const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))
 ```
 
 ### Options
 
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-backdrop=""`.
+{{< markdown >}}
+{{< partial "js-data-attributes.md" >}}
+{{< /markdown >}}
 
 {{< bs-table "table" >}}
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| `backdrop` | boolean | `true` | Apply a backdrop on body while offcanvas is open |
-| `keyboard` | boolean | `true` | Closes the offcanvas when escape key is pressed |
-| `scroll` | boolean | `false` | Allow body scrolling while offcanvas is open |
+| `backdrop` | boolean or the string `static` | `true` | Apply a backdrop on body while offcanvas is open. Alternatively, specify `static` for a backdrop which doesn't close the offcanvas when clicked. |
+| `keyboard` | boolean | `true` | Closes the offcanvas when escape key is pressed. |
+| `scroll` | boolean | `false` | Allow body scrolling while offcanvas is open. |
 {{< /bs-table >}}
 
 ### Methods
 
 {{< callout danger >}}
-{{< partial "callout-danger-async-methods.md" >}}
+{{< partial "callouts/danger-async-methods.md" >}}
 {{< /callout >}}
 
 Activates your content as an offcanvas element. Accepts an optional options `object`.
@@ -241,18 +322,18 @@ Activates your content as an offcanvas element. Accepts an optional options `obj
 You can create an offcanvas instance with the constructor, for example:
 
 ```js
-var myOffcanvas = document.getElementById('myOffcanvas')
-var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
+const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
 ```
 
 {{< bs-table "table" >}}
 | Method | Description |
 | --- | --- |
+| `dispose` | Destroys an element's offcanvas. |
+| `getInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element. |
+| `getOrCreateInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn't initialized. |
+| `hide` | Hides an offcanvas element. **Returns to the caller before the offcanvas element has actually been hidden** (i.e. before the `hidden.bs.offcanvas` event occurs). |
+| `show` | Shows an offcanvas element. **Returns to the caller before the offcanvas element has actually been shown** (i.e. before the `shown.bs.offcanvas` event occurs). |
 | `toggle` | Toggles an offcanvas element to shown or hidden. **Returns to the caller before the offcanvas element has actually been shown or hidden** (i.e. before the `shown.bs.offcanvas` or `hidden.bs.offcanvas` event occurs). |
-| `show` | Shows an offcanvas element. **Returns to the caller before the offcanvas element has actually been shown** (i.e. before the `shown.bs.offcanvas` event occurs).|
-| `hide` | Hides an offcanvas element. **Returns to the caller before the offcanvas element has actually been hidden** (i.e. before the `hidden.bs.offcanvas` event occurs).|
-| `getInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element |
-| `getOrCreateInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn't initialized |
 {{< /bs-table >}}
 
 ### Events
@@ -262,15 +343,16 @@ Bootstrap's offcanvas class exposes a few events for hooking into offcanvas func
 {{< bs-table "table" >}}
 | Event type | Description |
 | --- | --- |
-| `show.bs.offcanvas` | This event fires immediately when the `show` instance method is called. |
-| `shown.bs.offcanvas` | This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete). |
 | `hide.bs.offcanvas` | This event is fired immediately when the `hide` method has been called. |
 | `hidden.bs.offcanvas` | This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete). |
+| `hidePrevented.bs.offcanvas` | This event is fired when the offcanvas is shown, its backdrop is `static` and a click outside of the offcanvas is performed. The event is also fired when the escape key is pressed and the `keyboard` option is set to `false`. |
+| `show.bs.offcanvas` | This event fires immediately when the `show` instance method is called. |
+| `shown.bs.offcanvas` | This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete). |
 {{< /bs-table >}}
 
 ```js
-var myOffcanvas = document.getElementById('myOffcanvas')
-myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
+const myOffcanvas = document.getElementById('myOffcanvas')
+myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
   // do something...
 })
 ```
diff --git a/site/content/docs/5.1/components/pagination.md b/site/content/docs/5.3/components/pagination.md
index 7e70a77e1..725140576 100644
--- a/site/content/docs/5.1/components/pagination.md
+++ b/site/content/docs/5.3/components/pagination.md
@@ -122,7 +122,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
 
 ## Alignment
 
-Change the alignment of pagination components with [flexbox utilities]({{< docsref "/utilities/flex" >}}).
+Change the alignment of pagination components with [flexbox utilities]({{< docsref "/utilities/flex" >}}). For example, with `.justify-content-center`:
 
 {{< example >}}
 <nav aria-label="Page navigation example">
@@ -140,6 +140,8 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr
 </nav>
 {{< /example >}}
 
+Or with `.justify-content-end`:
+
 {{< example >}}
 <nav aria-label="Page navigation example">
   <ul class="pagination justify-content-end">
@@ -156,12 +158,20 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr
 </nav>
 {{< /example >}}
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, pagination now uses local CSS variables on `.pagination` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="pagination-css-vars" file="scss/_pagination.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="pagination-variables" file="scss/_variables.scss" >}}
 
-### Mixins
+### Sass mixins
 
 {{< scss-docs name="pagination-mixin" file="scss/mixins/_pagination.scss" >}}
diff --git a/site/content/docs/5.1/components/placeholders.md b/site/content/docs/5.3/components/placeholders.md
index 7b380b603..4014b1e9c 100644
--- a/site/content/docs/5.1/components/placeholders.md
+++ b/site/content/docs/5.3/components/placeholders.md
@@ -4,6 +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:
+  version: "5.1"
 ---
 
 ## About
@@ -37,7 +39,7 @@ In the example below, we take a typical card component and recreate it with plac
       <span class="placeholder col-6"></span>
       <span class="placeholder col-8"></span>
     </p>
-    <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
+    <a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
   </div>
 </div>
 </div>
@@ -66,7 +68,7 @@ In the example below, we take a typical card component and recreate it with plac
       <span class="placeholder col-6"></span>
       <span class="placeholder col-8"></span>
     </p>
-    <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
+    <a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
   </div>
 </div>
 ```
@@ -82,7 +84,7 @@ We apply additional styling to `.btn`s via `::before` to ensure the `height` is
   <span class="placeholder col-6"></span>
 </p>
 
-<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>
+<a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a>
 {{< /example >}}
 
 {{< callout info >}}
@@ -125,7 +127,7 @@ The size of `.placeholder`s are based on the typographic style of the parent ele
 
 ### Animation
 
-Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being _actively_ loaded.
+Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being *actively* loaded.
 
 {{< example >}}
 <p class="placeholder-glow">
@@ -137,8 +139,8 @@ Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better c
 </p>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
 
 {{< scss-docs name="placeholders" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.3/components/popovers.md b/site/content/docs/5.3/components/popovers.md
new file mode 100644
index 000000000..ae4237688
--- /dev/null
+++ b/site/content/docs/5.3/components/popovers.md
@@ -0,0 +1,280 @@
+---
+layout: docs
+title: Popovers
+description: Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
+group: components
+toc: true
+---
+
+## Overview
+
+Things to know when using the popover plugin:
+
+- 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.
+- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
+- Triggering popovers on hidden elements will not work.
+- Popovers for `.disabled` or `disabled` elements must be triggered on a wrapper element.
+- When triggered from anchors that wrap across multiple lines, popovers will be centered between the anchors' overall width. Use `.text-nowrap` on your `<a>`s to avoid this behavior.
+- Popovers must be hidden before their corresponding elements have been removed from the DOM.
+- Popovers can be triggered thanks to an element inside a shadow DOM.
+
+{{< callout info >}}
+{{< partial "callouts/info-sanitizer.md" >}}
+{{< /callout >}}
+
+{{< callout info >}}
+{{< partial "callouts/info-prefersreducedmotion.md" >}}
+{{< /callout >}}
+
+Keep reading to see how popovers work with some examples.
+
+## Examples
+
+### Enable popovers
+
+As mentioned above, you must initialize popovers before they can be used. One way to initialize all popovers on a page would be to select them by their `data-bs-toggle` attribute, like so:
+
+```js
+const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
+const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
+```
+
+### Live demo
+
+We use JavaScript similar to the snippet above to render the following live popover. Titles are set via `data-bs-title` and body content is set via `data-bs-content`.
+
+{{< callout warning >}}
+{{< partial "callouts/warning-data-bs-title-vs-title.md" >}}
+{{< /callout >}}
+
+{{< example stackblitz_add_js="true" >}}
+<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
+{{< /example >}}
+
+### Four directions
+
+Four options are available: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL. Set `data-bs-placement` to change the direction.
+
+{{< example stackblitz_add_js="true" >}}
+<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
+  Popover on top
+</button>
+<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
+  Popover on right
+</button>
+<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
+  Popover on bottom
+</button>
+<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
+  Popover on left
+</button>
+{{< /example >}}
+
+### Custom `container`
+
+When you have some styles on a parent element that interfere with a popover, you'll want to specify a custom `container` so that the popover's HTML appears within that element instead. This is common in responsive tables, input groups, and the like.
+
+```js
+const popover = new bootstrap.Popover('.example-popover', {
+  container: 'body'
+})
+```
+
+Another situation where you'll want to set an explicit custom `container` are popovers inside a [modal dialog]({{< docsref "/components/modal" >}}), to make sure that the popover itself is appended to the modal. This is particularly important for popovers that contain interactive elements – modal dialogs will trap focus, so unless the popover is a child element of the modal, users won't be able to focus or activate these interactive elements.
+
+```js
+const popover = new bootstrap.Popover('.example-popover', {
+  container: '.modal-body'
+})
+```
+
+### Custom popovers
+
+{{< added-in "5.2.0" >}}
+
+You can customize the appearance of popovers using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-popover"` to scope our custom appearance and use it to override some of the local CSS variables.
+
+{{< scss-docs name="custom-popovers" file="site/assets/scss/_component-examples.scss" >}}
+
+{{< example class="custom-popover-demo" stackblitz_add_js="true" >}}
+<button type="button" class="btn btn-secondary"
+        data-bs-toggle="popover" data-bs-placement="right"
+        data-bs-custom-class="custom-popover"
+        data-bs-title="Custom popover"
+        data-bs-content="This popover is themed via CSS variables.">
+  Custom popover
+</button>
+{{< /example >}}
+
+### Dismiss on next click
+
+Use the `focus` trigger to dismiss popovers on the user's next click of an element other than the toggle element.
+
+{{< callout danger >}}
+**Dismissing on next click requires specific HTML for proper cross-browser and cross-platform behavior.** You can only use `<a>` elements, not `<button>`s, and you must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).
+{{< /callout >}}
+
+{{< example stackblitz_add_js="true" >}}
+<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
+{{< /example >}}
+
+```js
+const popover = new bootstrap.Popover('.popover-dismiss', {
+  trigger: 'focus'
+})
+```
+
+### Disabled elements
+
+Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`.
+
+For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element.
+
+{{< example stackblitz_add_js="true" >}}
+<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
+  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
+</span>
+{{< /example >}}
+
+## CSS
+
+### Variables
+
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap’s evolving CSS variables approach, popovers now use local CSS variables on `.popover` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="popover-css-vars" file="scss/_popover.scss" >}}
+
+### Sass variables
+
+{{< scss-docs name="popover-variables" file="scss/_variables.scss" >}}
+
+## Usage
+
+Enable popovers via JavaScript:
+
+```js
+const exampleEl = document.getElementById('example')
+const popover = new bootstrap.Popover(exampleEl, options)
+```
+
+{{< callout warning >}}
+**Keep popovers accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce popovers in this situation. Additionally, do not rely solely on `hover` as the trigger for your popovers as this will make them impossible to trigger for keyboard users.
+
+Avoid adding an excessive amount of content in popovers with the `html` option. Once popovers are displayed, their content is tied to the trigger element with the `aria-describedby` attribute, causing all of the popover's content to be announced to assistive technology users as one long, uninterrupted stream.
+
+Popovers do not manage keyboard focus order, and their placement can be random in the DOM, so be careful when adding interactive elements (like forms or links), as it may lead to an illogical focus order or make the popover content itself completely unreachable for keyboard users. In cases where you must use these elements, consider using a modal dialog instead.
+{{< /callout >}}
+
+### Options
+
+{{< markdown >}}
+{{< partial "js-data-attributes.md" >}}
+{{< /markdown >}}
+
+{{< callout warning >}}
+Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
+{{< /callout >}}
+
+{{< bs-table "table" >}}
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `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 -&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 }`. |
+| `fallbackPlacements` | string, 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). |
+| `html` | boolean | `false` | Allow HTML in the popover. If true, HTML tags in the popover's `title` will be rendered in the popover. If false, `innerText` property will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
+| `offset` | number, string, function | `[0, 8]` | Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
+| `placement` | string, function | `'right'` | How to position the popover: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the popover. When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the popover instance. |
+| `popperConfig` | null, object, function | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |
+| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
+| `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
+| `selector` | string, false | `false` | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to also apply popovers to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. |
+| `template` | string | `'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-header`. The popover's `content` will be injected into the `.popover-body`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="tooltip"`. |
+| `title` | string, element, function | `''` | The popover title. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
+| `trigger` | string | `'click'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the popover will be triggered programmatically via the `.popover('show')`, `.popover('hide')` and `.popover('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in popovers that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
+{{< /bs-table >}}
+
+{{< callout info >}}
+#### Data attributes for individual popovers
+
+Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.
+{{< /callout >}}
+
+#### Using function with `popperConfig`
+
+```js
+const popover = new bootstrap.Popover(element, {
+  popperConfig(defaultBsPopperConfig) {
+    // const newPopperConfig = {...}
+    // use defaultBsPopperConfig if needed...
+    // return newPopperConfig
+  }
+})
+```
+
+### Methods
+
+{{< callout danger >}}
+{{< partial "callouts/danger-async-methods.md" >}}
+{{< /callout >}}
+
+{{< bs-table "table" >}}
+| Method | Description |
+| --- | --- |
+| `disable` | Removes the ability for an element's popover to be shown. The popover will only be able to be shown if it is re-enabled. |
+| `dispose` | Hides and destroys an element's popover (Removes stored data on the DOM element). Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. |
+| `enable` | Gives an element's popover the ability to be shown. **Popovers are enabled by default.** |
+| `getInstance` | _Static_ method which allows you to get the popover instance associated with a DOM element. |
+| `getOrCreateInstance` | _Static_ method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn't initialized. |
+| `hide` | Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover. |
+| `setContent` | Gives a way to change the popover's content after its initialization. |
+| `show` | Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose title and content are both zero-length are never displayed. |
+| `toggle` | Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover. |
+| `toggleEnabled` | Toggles the ability for an element's popover to be shown or hidden. |
+| `update` | Updates the position of an element's popover. |
+{{< /bs-table >}}
+
+
+```js
+// getOrCreateInstance example
+const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance
+
+// setContent example
+popover.setContent({
+  '.popover-header': 'another title',
+  '.popover-body': 'another content'
+})
+
+```
+
+{{< callout info >}}
+The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the popover template, and each related property-value can be `string` | `element` | `function` | `null`
+{{< /callout >}}
+
+### Events
+
+{{< bs-table >}}
+| Event | Description |
+| --- | --- |
+| `hide.bs.popover` | This event is fired immediately when the `hide` instance method has been called. |
+| `hidden.bs.popover` | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). |
+| `inserted.bs.popover` | This event is fired after the `show.bs.popover` event when the popover template has been added to the DOM. |
+| `show.bs.popover` | This event fires immediately when the `show` instance method is called. |
+| `shown.bs.popover` | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). |
+{{< /bs-table >}}
+
+```js
+const myPopoverTrigger = document.getElementById('myPopover')
+myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
+  // do something...
+})
+```
diff --git a/site/content/docs/5.3/components/progress.md b/site/content/docs/5.3/components/progress.md
new file mode 100644
index 000000000..73f131589
--- /dev/null
+++ b/site/content/docs/5.3/components/progress.md
@@ -0,0 +1,202 @@
+---
+layout: docs
+title: Progress
+description: Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
+group: components
+toc: true
+---
+
+{{< callout info >}}
+**New markup in v5.3.0 —** We've deprecated the previous HTML structure for progress bars and replaced it with a more accessible one. The previous structure will continue to work until v6. [See what's changed in our migration guide.]({{< docsref "/migration#improved-markup-for-progress-bars" >}})
+{{< /callout >}}
+
+## How it works
+
+Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them.
+
+- We use the `.progress` as a wrapper to indicate the max value of the progress bar.
+- The `.progress` wrapper also requires a `role="progressbar"` and `aria` attributes to make it accessible, including an accessible name (using `aria-label`, `aria-labelledby`, or similar).
+- We use the inner `.progress-bar` purely for the visual bar and label.
+- The `.progress-bar` requires an inline style, utility class, or custom CSS to set its width.
+- We provide a special `.progress-stacked` class to create multiple/stacked progress bars.
+
+Put that all together, and you have the following examples.
+
+{{< example >}}
+<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar" style="width: 0%"></div>
+</div>
+<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar" style="width: 25%"></div>
+</div>
+<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar" style="width: 50%"></div>
+</div>
+<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar" style="width: 75%"></div>
+</div>
+<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar" style="width: 100%"></div>
+</div>
+{{< /example >}}
+
+## Bar sizing
+
+### Width
+
+Bootstrap provides a handful of [utilities for setting width]({{< docsref "/utilities/sizing" >}}). Depending on your needs, these may help with quickly configuring the width of the `.progress-bar`.
+
+{{< example >}}
+<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar w-75"></div>
+</div>
+{{< /example >}}
+
+### Height
+
+You only set a `height` value on the `.progress` container, so if you change that value, the inner `.progress-bar` will automatically resize accordingly.
+
+{{< example >}}
+<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
+  <div class="progress-bar" style="width: 25%"></div>
+</div>
+<div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px">
+  <div class="progress-bar" style="width: 25%"></div>
+</div>
+{{< /example >}}
+
+## Labels
+
+Add labels to your progress bars by placing text within the `.progress-bar`.
+
+{{< example >}}
+<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar" style="width: 25%">25%</div>
+</div>
+{{< /example >}}
+
+Note that by default, the content inside the `.progress-bar` is controlled with `overflow: hidden`, so it doesn't bleed out of the bar. If your progress bar is shorter than its label, the content will be capped and may become unreadable. To change this behavior, you can use `.overflow-visible` from the [overflow utilities]({{< docsref "/utilities/overflow" >}}), but make sure to also define an explicit [text color]({{< docsref "/utilities/colors#colors" >}}) so the text remains readable. Be aware though that currently this approach does not take into account [color modes]({{< docsref "/customize/color-modes" >}}).
+
+{{< example >}}
+<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
+</div>
+{{< /example >}}
+
+## Backgrounds
+
+Use background utility classes to change the appearance of individual progress bars.
+
+{{< example >}}
+<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar bg-success" style="width: 25%"></div>
+</div>
+<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar bg-info" style="width: 50%"></div>
+</div>
+<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar bg-warning" style="width: 75%"></div>
+</div>
+<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar bg-danger" style="width: 100%"></div>
+</div>
+{{< /example >}}
+
+{{< callout info >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
+{{< /callout >}}
+
+If you're adding labels to progress bars with a custom background color, make sure to also set an appropriate [text color]({{< docsref "/utilities/colors#colors" >}}), so the labels remain readable and have sufficient contrast.
+
+{{< example >}}
+<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar bg-success" style="width: 25%">25%</div>
+</div>
+<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar bg-info text-dark" style="width: 50%">50%</div>
+</div>
+<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
+</div>
+<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar bg-danger" style="width: 100%">100%</div>
+</div>
+{{< /example >}}
+
+Alternatively, you can use the new combined [color and background]({{< docsref "/helpers/color-background" >}}) helper classes.
+
+{{< example >}}
+<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar text-bg-warning" style="width: 75%">75%</div>
+</div>
+{{< /example >}}
+
+## Multiple bars
+
+You can include multiple progress components inside a container with `.progress-stacked` to create a single stacked progress bar. Note that in this case, the styling to set the visual width of the progress bar *must* be applied to the `.progress` elements, rather than the `.progress-bar`s.
+
+{{< example >}}
+<div class="progress-stacked">
+  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
+    <div class="progress-bar"></div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
+    <div class="progress-bar bg-success"></div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
+    <div class="progress-bar bg-info"></div>
+  </div>
+</div>
+{{< /example >}}
+
+## Striped
+
+Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color.
+
+{{< example >}}
+<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar progress-bar-striped" style="width: 10%"></div>
+</div>
+<div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar progress-bar-striped bg-success" style="width: 25%"></div>
+</div>
+<div class="progress" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar progress-bar-striped bg-info" style="width: 50%"></div>
+</div>
+<div class="progress" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar progress-bar-striped bg-warning" style="width: 75%"></div>
+</div>
+<div class="progress" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
+</div>
+{{< /example >}}
+
+## Animated stripes
+
+The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations.
+
+{{< example >}}
+<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
+</div>
+{{< /example >}}
+
+## CSS
+
+### Variables
+
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, progress bars now use local CSS variables on `.progress` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="progress-css-vars" file="scss/_progress.scss" >}}
+
+### Sass variables
+
+{{< scss-docs name="progress-variables" file="scss/_variables.scss" >}}
+
+### Keyframes
+
+Used for creating the CSS animations for `.progress-bar-animated`. Included in `scss/_progress-bar.scss`.
+
+{{< scss-docs name="progress-keyframes" file="scss/_progress.scss" >}}
diff --git a/site/content/docs/5.3/components/scrollspy.md b/site/content/docs/5.3/components/scrollspy.md
new file mode 100644
index 000000000..d1abf75e3
--- /dev/null
+++ b/site/content/docs/5.3/components/scrollspy.md
@@ -0,0 +1,427 @@
+---
+layout: docs
+title: Scrollspy
+description: Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
+group: components
+toc: true
+---
+
+## How it works
+
+Scrollspy toggles the `.active` class on anchor (`<a>`) elements when the element with the `id` referenced by the anchor's `href` is scrolled into view. Scrollspy is best used in conjunction with a Bootstrap [nav component]({{< docsref "/components/navs-tabs" >}}) or [list group]({{< docsref "/components/list-group" >}}), but it will also work with any anchor elements in the current page. Here's how it works.
+
+- To start, scrollspy requires two things: a navigation, list group, or a simple set of links, plus a scrollable container. The scrollable container can be the `<body>` or a custom element with a set `height` and `overflow-y: scroll`.
+
+- On the scrollable container, add `data-bs-spy="scroll"` and `data-bs-target="#navId"` where `navId` is the unique `id` of the associated navigation. If there is no focusable element inside the element, be sure to also include a `tabindex="0"` to ensure keyboard access.
+
+- As you scroll the "spied" container, an `.active` class is added and removed from anchor links within the associated navigation. Links must have resolvable `id` targets, otherwise they're ignored. For example, a `<a href="#home">home</a>` must correspond to something in the DOM like `<div id="home"></div>`
+
+- Target elements that are not visible will be ignored. See the [Non-visible elements](#non-visible-elements) section below.
+
+## Examples
+
+### Navbar
+
+Scroll the area below the navbar and watch the active class change. Open the dropdown menu and watch the dropdown items be highlighted as well.
+
+<div class="bd-example">
+  <nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3 rounded-2">
+    <a class="navbar-brand" href="#">Navbar</a>
+    <ul class="nav nav-pills">
+      <li class="nav-item">
+        <a class="nav-link" href="#scrollspyHeading1">First</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#scrollspyHeading2">Second</a>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
+        <ul class="dropdown-menu">
+          <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
+          <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
+          <li><hr class="dropdown-divider"></li>
+          <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
+  <div class="scrollspy-example bg-body-tertiary p-3 rounded-2" data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
+    <h4 id="scrollspyHeading1">First heading</h4>
+    <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+    <h4 id="scrollspyHeading2">Second heading</h4>
+    <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+    <h4 id="scrollspyHeading3">Third heading</h4>
+    <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+    <h4 id="scrollspyHeading4">Fourth heading</h4>
+    <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+    <h4 id="scrollspyHeading5">Fifth heading</h4>
+    <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+  </div>
+</div>
+
+```html
+<nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3">
+  <a class="navbar-brand" href="#">Navbar</a>
+  <ul class="nav nav-pills">
+    <li class="nav-item">
+      <a class="nav-link" href="#scrollspyHeading1">First</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#scrollspyHeading2">Second</a>
+    </li>
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
+      <ul class="dropdown-menu">
+        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
+        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
+        <li><hr class="dropdown-divider"></li>
+        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
+      </ul>
+    </li>
+  </ul>
+</nav>
+<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">
+  <h4 id="scrollspyHeading1">First heading</h4>
+  <p>...</p>
+  <h4 id="scrollspyHeading2">Second heading</h4>
+  <p>...</p>
+  <h4 id="scrollspyHeading3">Third heading</h4>
+  <p>...</p>
+  <h4 id="scrollspyHeading4">Fourth heading</h4>
+  <p>...</p>
+  <h4 id="scrollspyHeading5">Fifth heading</h4>
+  <p>...</p>
+</div>
+```
+
+### Nested nav
+
+Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its parents will also be `.active`. Scroll the area next to the navbar and watch the active class change.
+
+<div class="bd-example">
+  <div class="row">
+    <div class="col-4">
+      <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
+        <nav class="nav nav-pills flex-column">
+          <a class="nav-link" href="#item-1">Item 1</a>
+          <nav class="nav nav-pills flex-column">
+            <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
+            <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
+          </nav>
+          <a class="nav-link" href="#item-2">Item 2</a>
+          <a class="nav-link" href="#item-3">Item 3</a>
+          <nav class="nav nav-pills flex-column">
+            <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
+            <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
+          </nav>
+        </nav>
+      </nav>
+    </div>
+    <div class="col-8">
+      <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
+        <div id="item-1">
+          <h4>Item 1</h4>
+          <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+          <p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
+        </div>
+        <div id="item-1-1">
+          <h5>Item 1-1</h5>
+          <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+          <p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
+        </div>
+        <div id="item-1-2">
+          <h5>Item 1-2</h5>
+          <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+          <p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
+        </div>
+        <div id="item-2">
+          <h4>Item 2</h4>
+          <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+          <p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
+        </div>
+        <div id="item-3">
+          <h4>Item 3</h4>
+          <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+          <p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
+        </div>
+        <div id="item-3-1">
+          <h5>Item 3-1</h5>
+          <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+          <p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
+        </div>
+        <div id="item-3-2">
+          <h5>Item 3-2</h5>
+          <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+          <p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+```html
+<div class="row">
+  <div class="col-4">
+    <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
+      <nav class="nav nav-pills flex-column">
+        <a class="nav-link" href="#item-1">Item 1</a>
+        <nav class="nav nav-pills flex-column">
+          <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
+          <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
+        </nav>
+        <a class="nav-link" href="#item-2">Item 2</a>
+        <a class="nav-link" href="#item-3">Item 3</a>
+        <nav class="nav nav-pills flex-column">
+          <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
+          <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
+        </nav>
+      </nav>
+    </nav>
+  </div>
+
+  <div class="col-8">
+    <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
+      <div id="item-1">
+        <h4>Item 1</h4>
+        <p>...</p>
+      </div>
+      <div id="item-1-1">
+        <h5>Item 1-1</h5>
+        <p>...</p>
+      </div>
+      <div id="item-1-2">
+        <h5>Item 1-2</h5>
+        <p>...</p>
+      </div>
+      <div id="item-2">
+        <h4>Item 2</h4>
+        <p>...</p>
+      </div>
+      <div id="item-3">
+        <h4>Item 3</h4>
+        <p>...</p>
+      </div>
+      <div id="item-3-1">
+        <h5>Item 3-1</h5>
+        <p>...</p>
+      </div>
+      <div id="item-3-2">
+        <h5>Item 3-2</h5>
+        <p>...</p>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+### List group
+
+Scrollspy also works with `.list-group`s. Scroll the area next to the list group and watch the active class change.
+
+<div class="bd-example">
+  <div class="row">
+    <div class="col-4">
+      <div id="list-example" class="list-group">
+        <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
+        <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
+        <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
+        <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
+      </div>
+    </div>
+    <div class="col-8">
+      <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
+        <h4 id="list-item-1">Item 1</h4>
+        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+        <h4 id="list-item-2">Item 2</h4>
+        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+        <h4 id="list-item-3">Item 3</h4>
+        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+        <h4 id="list-item-4">Item 4</h4>
+        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+```html
+<div class="row">
+  <div class="col-4">
+    <div id="list-example" class="list-group">
+      <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
+      <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
+      <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
+      <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
+    </div>
+  </div>
+  <div class="col-8">
+    <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
+      <h4 id="list-item-1">Item 1</h4>
+      <p>...</p>
+      <h4 id="list-item-2">Item 2</h4>
+      <p>...</p>
+      <h4 id="list-item-3">Item 3</h4>
+      <p>...</p>
+      <h4 id="list-item-4">Item 4</h4>
+      <p>...</p>
+    </div>
+  </div>
+</div>
+```
+
+### Simple anchors
+
+Scrollspy is not limited to nav components and list groups, so it will work on any `<a>` anchor elements in the current document. Scroll the area and watch the `.active` class change.
+
+<div class="bd-example">
+  <div class="row">
+    <div class="col-4">
+      <div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
+        <a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
+        <a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
+        <a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
+        <a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
+        <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
+      </div>
+    </div>
+    <div class="col-8">
+      <div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
+        <h4 id="simple-list-item-1">Item 1</h4>
+        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+        <h4 id="simple-list-item-2">Item 2</h4>
+        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+        <h4 id="simple-list-item-3">Item 3</h4>
+        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+        <h4 id="simple-list-item-4">Item 4</h4>
+        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+        <h4 id="simple-list-item-5">Item 5</h4>
+        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+```html
+<div class="row">
+  <div class="col-4">
+    <div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
+      <a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
+      <a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
+      <a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
+      <a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
+      <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
+    </div>
+  </div>
+  <div class="col-8">
+    <div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
+      <h4 id="simple-list-item-1">Item 1</h4>
+      <p>...</p>
+      <h4 id="simple-list-item-2">Item 2</h4>
+      <p>...</p>
+      <h4 id="simple-list-item-3">Item 3</h4>
+      <p>...</p>
+      <h4 id="simple-list-item-4">Item 4</h4>
+      <p>...</p>
+      <h4 id="simple-list-item-5">Item 5</h4>
+      <p>...</p>
+    </div>
+  </div>
+</div>
+```
+
+## Non-visible elements
+
+Target elements that aren’t visible will be ignored and their corresponding nav items won't receive an `.active` class. Scrollspy instances initialized in a non-visible wrapper will ignore all target elements. Use the `refresh` method to check for observable elements once the wrapper becomes visible.
+
+```js
+document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
+  el.addEventListener('shown.bs.tab', () => {
+    const target = el.getAttribute('data-bs-target')
+    const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
+    bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
+  })
+})
+```
+
+## Usage
+
+### Via data attributes
+
+To easily add scrollspy behavior to your topbar navigation, add `data-bs-spy="scroll"` to the element you want to spy on (most typically this would be the `<body>`). Then add the `data-bs-target` attribute with the `id` or class name of the parent element of any Bootstrap `.nav` component.
+
+```html
+<body data-bs-spy="scroll" data-bs-target="#navbar-example">
+  ...
+  <div id="navbar-example">
+    <ul class="nav nav-tabs" role="tablist">
+      ...
+    </ul>
+  </div>
+  ...
+</body>
+```
+
+### Via JavaScript
+
+```js
+const scrollSpy = new bootstrap.ScrollSpy(document.body, {
+  target: '#navbar-example'
+})
+```
+
+### Options
+
+{{< markdown >}}
+{{< partial "js-data-attributes.md" >}}
+{{< /markdown >}}
+
+{{< bs-table "table" >}}
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `rootMargin` | string | `0px 0px -25%` | Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) valid units, when calculating scroll position. |
+| `smoothScroll` | boolean | `false` | Enables smooth scrolling when a user clicks on a link that refers to ScrollSpy observables. |
+| `target` | string, DOM element | `null` | Specifies element to apply Scrollspy plugin. |
+| `threshold` | array | `[0.1, 0.5, 1]` | `IntersectionObserver` [threshold](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#threshold) valid input, when calculating scroll position. |
+
+{{< /bs-table >}}
+
+{{< callout warning >}}
+**Deprecated Options**
+
+Up until v5.1.3 we were using `offset` & `method` options, which are now deprecated and replaced by `rootMargin`.
+To keep backwards compatibility, we will continue to parse a given `offset` to `rootMargin`, but this feature will be removed in **v6**.
+{{< /callout >}}
+
+### Methods
+
+{{< bs-table "table" >}}
+| Method | Description |
+| --- | --- |
+| `dispose` | Destroys an element's scrollspy. (Removes stored data on the DOM element) |
+| `getInstance` | *Static* method to get the scrollspy instance associated with a DOM element. |
+| `getOrCreateInstance` | *Static* method to get the scrollspy instance associated with a DOM element, or to create a new one in case it wasn't initialized. |
+| `refresh` | When adding or removing elements in the DOM, you'll need to call the refresh method. |
+{{< /bs-table >}}
+
+Here's an example using the refresh method:
+
+```js
+const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
+dataSpyList.forEach(dataSpyEl => {
+  bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
+})
+```
+
+### Events
+
+{{< bs-table "table" >}}
+| Event | Description |
+| --- | --- |
+| `activate.bs.scrollspy` | This event fires on the scroll element whenever an anchor is activated by the scrollspy. |
+{{< /bs-table >}}
+
+```js
+const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
+firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
+  // do something...
+})
+```
diff --git a/site/content/docs/5.1/components/spinners.md b/site/content/docs/5.3/components/spinners.md
index ef7efaf58..977257dd0 100644
--- a/site/content/docs/5.1/components/spinners.md
+++ b/site/content/docs/5.3/components/spinners.md
@@ -13,7 +13,7 @@ Bootstrap "spinners" can be used to show the loading state in your projects. The
 For accessibility purposes, each loader here includes `role="status"` and a nested `<span class="visually-hidden">Loading...</span>`.
 
 {{< callout info >}}
-{{< partial "callout-info-prefersreducedmotion.md" >}}
+{{< partial "callouts/info-prefersreducedmotion.md" >}}
 {{< /callout >}}
 
 ## Border spinner
@@ -96,8 +96,8 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
 
 {{< example >}}
 <div class="d-flex align-items-center">
-  <strong>Loading...</strong>
-  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
+  <strong role="status">Loading...</strong>
+  <div class="spinner-border ms-auto" aria-hidden="true"></div>
 </div>
 {{< /example >}}
 
@@ -151,30 +151,48 @@ Use spinners within buttons to indicate an action is currently processing or tak
 
 {{< example >}}
 <button class="btn btn-primary" type="button" disabled>
-  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-  <span class="visually-hidden">Loading...</span>
+  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+  <span class="visually-hidden" role="status">Loading...</span>
 </button>
 <button class="btn btn-primary" type="button" disabled>
-  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-  Loading...
+  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+  <span role="status">Loading...</span>
 </button>
 {{< /example >}}
 
 {{< example >}}
 <button class="btn btn-primary" type="button" disabled>
-  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
-  <span class="visually-hidden">Loading...</span>
+  <span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
+  <span class="visually-hidden" role="status">Loading...</span>
 </button>
 <button class="btn btn-primary" type="button" disabled>
-  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
-  Loading...
+  <span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
+  <span role="status">Loading...</span>
 </button>
 {{< /example >}}
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, spinners now use local CSS variables on `.spinner-border` and `.spinner-grow` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+Border spinner variables:
+
+{{< scss-docs name="spinner-border-css-vars" file="scss/_spinners.scss" >}}
+
+Growing spinner variables:
+
+{{< scss-docs name="spinner-grow-css-vars" file="scss/_spinners.scss" >}}
+
+For both spinners, small spinner modifier classes are used to update the values of these CSS variables as needed. For example, the `.spinner-border-sm` class does the following:
+
+{{< scss-docs name="spinner-border-sm-css-vars" file="scss/_spinners.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="spinner-variables" file="scss/_variables.scss" >}}
 
 ### Keyframes
@@ -187,9 +205,7 @@ Used for creating the CSS animations for our spinners. Included in `scss/_spinne
 
 
 [color]:   {{< docsref "/utilities/colors" >}}
-[display]: {{< docsref "/utilities/display" >}}
 [flex]:    {{< docsref "/utilities/flex" >}}
 [float]:   {{< docsref "/utilities/float" >}}
 [margin]:  {{< docsref "/utilities/spacing" >}}
-[sizing]:  {{< docsref "/utilities/sizing" >}}
 [text]:    {{< docsref "/utilities/text" >}}
diff --git a/site/content/docs/5.1/components/toasts.md b/site/content/docs/5.3/components/toasts.md
index 10093b6bc..4beae7dc8 100644
--- a/site/content/docs/5.1/components/toasts.md
+++ b/site/content/docs/5.3/components/toasts.md
@@ -16,7 +16,7 @@ Things to know when using the toast plugin:
 - Toasts will automatically hide if you do not specify `autohide: false`.
 
 {{< callout info >}}
-{{< partial "callout-info-prefersreducedmotion.md" >}}
+{{< partial "callouts/info-prefersreducedmotion.md" >}}
 {{< /callout >}}
 
 ## Examples
@@ -27,7 +27,7 @@ To encourage extensible and predictable toasts, we recommend a header and body.
 
 Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.
 
-{{< example class="bg-light" >}}
+{{< example >}}
 <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
     {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
@@ -49,7 +49,7 @@ Previously, our scripts dynamically added the `.hide` class to completely hide a
 
 Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.
 
-<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
+<div class="toast-container position-fixed bottom-0 end-0 p-3">
   <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header">
       {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
@@ -70,7 +70,7 @@ Click the button below to show a toast (positioned with our utilities in the low
 ```html
 <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
 
-<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
+<div class="toast-container position-fixed bottom-0 end-0 p-3">
   <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header">
       <img src="..." class="rounded me-2" alt="...">
@@ -87,17 +87,7 @@ Click the button below to show a toast (positioned with our utilities in the low
 
 We use the following JavaScript to trigger our live toast demo:
 
-```js
-var toastTrigger = document.getElementById('liveToastBtn')
-var toastLiveExample = document.getElementById('liveToast')
-if (toastTrigger) {
-  toastTrigger.addEventListener('click', function () {
-    var toast = new bootstrap.Toast(toastLiveExample)
-
-    toast.show()
-  })
-}
-```
+{{< js-docs name="live-toast" file="site/assets/js/partials/snippets.js" >}}
 
 ### Translucent
 
@@ -108,7 +98,7 @@ Toasts are slightly translucent to blend in with what's below them.
   <div class="toast-header">
     {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
     <strong class="me-auto">Bootstrap</strong>
-    <small class="text-muted">11 mins ago</small>
+    <small class="text-body-secondary">11 mins ago</small>
     <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
   </div>
   <div class="toast-body">
@@ -121,13 +111,13 @@ Toasts are slightly translucent to blend in with what's below them.
 
 You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
 
-{{< example class="bg-light" >}}
-<div class="toast-container">
+{{< example >}}
+<div class="toast-container position-static">
   <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header">
       {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
       <strong class="me-auto">Bootstrap</strong>
-      <small class="text-muted">just now</small>
+      <small class="text-body-secondary">just now</small>
       <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body">
@@ -139,7 +129,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
     <div class="toast-header">
       {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
       <strong class="me-auto">Bootstrap</strong>
-      <small class="text-muted">2 seconds ago</small>
+      <small class="text-body-secondary">2 seconds ago</small>
       <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body">
@@ -153,12 +143,12 @@ You can stack toasts by wrapping them in a toast container, which will verticall
 
 Customize your toasts by removing sub-components, tweaking them with [utilities]({{< docsref "/utilities/api" >}}), or by adding your own markup. Here we've created a simpler toast by removing the default `.toast-header`, adding a custom hide icon from [Bootstrap Icons]({{< param icons >}}), and using some [flexbox utilities]({{< docsref "/utilities/flex" >}}) to adjust the layout.
 
-{{< example class="bg-light" >}}
+{{< example >}}
 <div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="d-flex">
     <div class="toast-body">
-    Hello, world! This is a toast message.
-   </div>
+      Hello, world! This is a toast message.
+    </div>
     <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
   </div>
 </div>
@@ -166,7 +156,7 @@ Customize your toasts by removing sub-components, tweaking them with [utilities]
 
 Alternatively, you can also add additional controls and components to toasts.
 
-{{< example class="bg-light" >}}
+{{< example >}}
 <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-body">
     Hello, world! This is a toast message.
@@ -180,10 +170,10 @@ Alternatively, you can also add additional controls and components to toasts.
 
 ### Color schemes
 
-Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.bg-primary` and `.text-white` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
+Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-primary` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
 
-{{< example class="bg-light" >}}
-<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
+{{< example >}}
+<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="d-flex">
     <div class="toast-body">
       Hello, world! This is a toast message.
@@ -197,7 +187,7 @@ Building on the above example, you can create different toast color schemes with
 
 Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, put the positioning styles right on the `.toast`.
 
-{{< example >}}
+{{< example stackblitz_add_js="true" >}}
 <form>
   <div class="mb-3">
     <label for="selectToastPlacement">Toast placement</label>
@@ -215,8 +205,8 @@ Place toasts with custom CSS as you need them. The top right is often used for n
     </select>
   </div>
 </form>
-<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
-  <div class="toast-container position-absolute p-3" id="toastPlacement">
+<div aria-live="polite" aria-atomic="true" class="bg-body-secondary position-relative bd-example-toasts rounded-3">
+  <div class="toast-container p-3" id="toastPlacement">
     <div class="toast">
       <div class="toast-header">
         {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
@@ -233,20 +223,20 @@ Place toasts with custom CSS as you need them. The top right is often used for n
 
 For systems that generate more notifications, consider using a wrapping element so they can easily stack.
 
-{{< example class="bg-dark bd-example-toasts p-0" >}}
+{{< example class="bd-example-toasts p-0" >}}
 <div aria-live="polite" aria-atomic="true" class="position-relative">
   <!-- Position it: -->
   <!-- - `.toast-container` for spacing between toasts -->
-  <!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
+  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
   <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
-  <div class="toast-container position-absolute top-0 end-0 p-3">
+  <div class="toast-container top-0 end-0 p-3">
 
     <!-- Then put toasts within -->
     <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
       <div class="toast-header">
         {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
         <strong class="me-auto">Bootstrap</strong>
-        <small class="text-muted">just now</small>
+        <small class="text-body-secondary">just now</small>
         <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
       </div>
       <div class="toast-body">
@@ -258,7 +248,7 @@ For systems that generate more notifications, consider using a wrapping element
       <div class="toast-header">
         {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
         <strong class="me-auto">Bootstrap</strong>
-        <small class="text-muted">2 seconds ago</small>
+        <small class="text-body-secondary">2 seconds ago</small>
         <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
       </div>
       <div class="toast-body">
@@ -271,7 +261,7 @@ For systems that generate more notifications, consider using a wrapping element
 
 You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
 
-{{< example class="bg-dark bd-example-toasts d-flex" >}}
+{{< example class="bd-example-toasts d-flex" >}}
 <!-- Flexbox container for aligning the toasts -->
 <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
 
@@ -308,7 +298,7 @@ As the content you're displaying changes, be sure to update the [`delay` timeout
 
 When using `autohide: false`, you must add a close button to allow users to dismiss the toast.
 
-{{< example class="bg-light" >}}
+{{< example >}}
 <div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
   <div class="toast-header">
     {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
@@ -324,10 +314,18 @@ When using `autohide: false`, you must add a close button to allow users to dism
 
 While technically it's possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts. Even if you give the toast a long [`delay` timeout](#options), keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don't receive focus when they are displayed). If you absolutely must have further controls, we recommend using a toast with `autohide: false`.
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, toasts now use local CSS variables on `.toast` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="toast-css-vars" file="scss/_toasts.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="toast-variables" file="scss/_variables.scss" >}}
 
 ## Usage
@@ -335,10 +333,8 @@ While technically it's possible to add focusable/actionable controls (such as ad
 Initialize toasts via JavaScript:
 
 ```js
-var toastElList = Array.prototype.slice.call(document.querySelectorAll('.toast'))
-var toastList = toastElList.map(function (toastEl) {
-  return new bootstrap.Toast(toastEl, option)
-})
+const toastElList = document.querySelectorAll('.toast')
+const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))
 ```
 
 ### Triggers
@@ -347,122 +343,49 @@ var toastList = toastElList.map(function (toastEl) {
 
 ### Options
 
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`.
-
-<table class="table">
-  <thead>
-    <tr>
-      <th style="width: 100px;">Name</th>
-      <th style="width: 100px;">Type</th>
-      <th style="width: 50px;">Default</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>animation</code></td>
-      <td>boolean</td>
-      <td><code>true</code></td>
-      <td>Apply a CSS fade transition to the toast</td>
-    </tr>
-    <tr>
-      <td><code>autohide</code></td>
-      <td>boolean</td>
-      <td><code>true</code></td>
-      <td>Auto hide the toast</td>
-    </tr>
-    <tr>
-      <td><code>delay</code></td>
-      <td>number</td>
-      <td>
-        <code>5000</code>
-      </td>
-      <td>Delay hiding the toast (ms)</td>
-    </tr>
-  </tbody>
-</table>
+{{< markdown >}}
+{{< partial "js-data-attributes.md" >}}
+{{< /markdown >}}
+
+{{< bs-table "table" >}}
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `animation` | boolean | `true` | Apply a CSS fade transition to the toast. |
+| `autohide` | boolean | `true` | Automatically hide the toast after the delay. |
+| `delay` | number | `5000` | Delay in milliseconds before hiding the toast. |
+{{< /bs-table >}}
 
 ### Methods
 
 {{< callout danger >}}
-{{< partial "callout-danger-async-methods.md" >}}
+{{< partial "callouts/danger-async-methods.md" >}}
 {{< /callout >}}
 
-#### show
-
-Reveals an element's toast. **Returns to the caller before the toast has actually been shown** (i.e. before the `shown.bs.toast` event occurs).
-You have to manually call this method, instead your toast won't show.
-
-```js
-toast.show()
-```
-
-#### hide
-
-Hides an element's toast. **Returns to the caller before the toast has actually been hidden** (i.e. before the `hidden.bs.toast` event occurs). You have to manually call this method if you made `autohide` to `false`.
-
-```js
-toast.hide()
-```
-
-#### dispose
-
-Hides an element's toast. Your toast will remain on the DOM but won't show anymore.
-
-```js
-toast.dispose()
-```
-
-#### getInstance
-
-*Static* method which allows you to get the toast instance associated with a DOM element
-
-```js
-var myToastEl = document.getElementById('myToastEl')
-var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
-```
-
-#### getOrCreateInstance
-
-*Static* method which allows you to get the toast instance associated with a DOM element, or create a new one in case it wasn't initialized
-
-```js
-var myToastEl = document.getElementById('myToastEl')
-var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance
-```
+{{< bs-table "table" >}}
+| Method | Description |
+| --- | --- |
+| `dispose` | Hides an element's toast. Your toast will remain on the DOM but won't show anymore. |
+| `getInstance` | *Static* method which allows you to get the toast instance associated with a DOM element. <br> For example: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)` Returns a Bootstrap toast instance. |
+| `getOrCreateInstance` | *Static* method which allows you to get the toast instance associated with a DOM element, or create a new one, in case it wasn't initialized. <br>`const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)` Returns a Bootstrap toast instance. |
+| `hide` | Hides an element's toast. **Returns to the caller before the toast has actually been hidden** (i.e. before the `hidden.bs.toast` event occurs). You have to manually call this method if you made `autohide` to `false`. |
+| `isShown` | Returns a boolean according to toast's visibility state. |
+| `show` | Reveals an element's toast. **Returns to the caller before the toast has actually been shown** (i.e. before the `shown.bs.toast` event occurs). You have to manually call this method, instead your toast won't show. |
+{{< /bs-table >}}
 
 ### Events
 
-<table class="table">
-  <thead>
-    <tr>
-      <th style="width: 150px;">Event type</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>show.bs.toast</code></td>
-      <td>This event fires immediately when the <code>show</code> instance method is called.</td>
-    </tr>
-    <tr>
-      <td><code>shown.bs.toast</code></td>
-      <td>This event is fired when the toast has been made visible to the user.</td>
-    </tr>
-    <tr>
-      <td><code>hide.bs.toast</code></td>
-      <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
-    </tr>
-    <tr>
-      <td><code>hidden.bs.toast</code></td>
-      <td>This event is fired when the toast has finished being hidden from the user.</td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table "table" >}}
+| Event | Description |
+| --- | --- |
+| `hide.bs.toast` | This event is fired immediately when the `hide` instance method has been called. |
+| `hidden.bs.toast` | This event is fired when the toast has finished being hidden from the user. |
+| `show.bs.toast` | This event fires immediately when the `show` instance method is called. |
+| `shown.bs.toast` | This event is fired when the toast has been made visible to the user. |
+{{< /bs-table >}}
 
 ```js
-var myToastEl = document.getElementById('myToast')
-myToastEl.addEventListener('hidden.bs.toast', function () {
+const myToastEl = document.getElementById('myToast')
+myToastEl.addEventListener('hidden.bs.toast', () => {
   // do something...
 })
 ```
diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md
new file mode 100644
index 000000000..57bd73f20
--- /dev/null
+++ b/site/content/docs/5.3/components/tooltips.md
@@ -0,0 +1,292 @@
+---
+layout: docs
+title: Tooltips
+description: Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.
+group: components
+toc: true
+---
+
+## Overview
+
+Things to know when using the tooltip plugin:
+
+- 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).
+- Triggering tooltips on hidden elements will not work.
+- Tooltips for `.disabled` or `disabled` elements must be triggered on a wrapper element.
+- When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use `white-space: nowrap;` on your `<a>`s to avoid this behavior.
+- Tooltips must be hidden before their corresponding elements have been removed from the DOM.
+- Tooltips can be triggered thanks to an element inside a shadow DOM.
+
+Got all that? Great, let's see how they work with some examples.
+
+{{< callout info >}}
+{{< partial "callouts/info-sanitizer.md" >}}
+{{< /callout >}}
+
+{{< callout info >}}
+{{< partial "callouts/info-prefersreducedmotion.md" >}}
+{{< /callout >}}
+
+## Examples
+
+### Enable tooltips
+
+As mentioned above, you must initialize tooltips before they can be used. One way to initialize all tooltips on a page would be to select them by their `data-bs-toggle` attribute, like so:
+
+```js
+const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
+```
+
+### Tooltips on links
+
+Hover over the links below to see tooltips:
+
+{{< example class="tooltip-demo" stackblitz_add_js="true" >}}
+<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.</p>
+{{< /example >}}
+
+{{< callout warning >}}
+{{< partial "callouts/warning-data-bs-title-vs-title.md" >}}
+{{< /callout >}}
+
+### Custom tooltips
+
+{{< added-in "5.2.0" >}}
+
+You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable.
+
+{{< scss-docs name="custom-tooltip" file="site/assets/scss/_component-examples.scss" >}}
+
+
+{{< example class="tooltip-demo" stackblitz_add_js="true" >}}
+<button type="button" class="btn btn-secondary"
+        data-bs-toggle="tooltip" data-bs-placement="top"
+        data-bs-custom-class="custom-tooltip"
+        data-bs-title="This top tooltip is themed via CSS variables.">
+  Custom tooltip
+</button>
+{{< /example >}}
+
+### Directions
+
+Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL.
+
+<div class="bd-example tooltip-demo">
+  <div class="bd-example-tooltips">
+    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">Tooltip on top</button>
+    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">Tooltip on right</button>
+    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">Tooltip on bottom</button>
+    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">Tooltip on left</button>
+    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
+  </div>
+</div>
+
+```html
+<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
+  Tooltip on top
+</button>
+<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
+  Tooltip on right
+</button>
+<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
+  Tooltip on bottom
+</button>
+<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
+  Tooltip on left
+</button>
+```
+
+And with custom HTML added:
+
+```html
+<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
+  Tooltip with HTML
+</button>
+```
+
+With an SVG:
+
+<div class="bd-example tooltip-demo">
+  <a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip">
+    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">
+      <rect width="100%" height="100%" fill="#563d7c"/>
+      <circle cx="50" cy="50" r="30" fill="#007bff"/>
+    </svg>
+  </a>
+</div>
+
+## CSS
+
+### Variables
+
+{{< added-in "5.2.0" >}}
+
+As part of Bootstrap’s evolving CSS variables approach, tooltips now use local CSS variables on `.tooltip` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="tooltip-css-vars" file="scss/_tooltip.scss" >}}
+
+### Sass variables
+
+{{< scss-docs name="tooltip-variables" file="scss/_variables.scss" >}}
+
+## Usage
+
+The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. Trigger the tooltip via JavaScript:
+
+```js
+const exampleEl = document.getElementById('example')
+const tooltip = new bootstrap.Tooltip(exampleEl, options)
+```
+
+{{< callout warning >}}
+Tooltips automatically attempt to change positions when a parent container has `overflow: auto` or `overflow: scroll`, but still keeps the original placement's positioning. Set the [`boundary` option](https://popper.js.org/docs/v2/modifiers/flip/#boundary) (for the flip modifier using the `popperConfig` option) to any HTMLElement to override the default value, `'clippingParents'`, such as `document.body`:
+
+```js
+const tooltip = new bootstrap.Tooltip('#example', {
+  boundary: document.body // or document.querySelector('#boundary')
+})
+```
+{{< /callout >}}
+
+### Markup
+
+The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
+
+{{< callout warning >}}
+**Keep tooltips accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltips as this will make them impossible to trigger for keyboard users.
+{{< /callout >}}
+
+```html
+<!-- HTML to write -->
+<a href="#" data-bs-toggle="tooltip" data-bs-title="Some tooltip text!">Hover over me</a>
+
+<!-- Generated markup by the plugin -->
+<div class="tooltip bs-tooltip-auto" role="tooltip">
+  <div class="tooltip-arrow"></div>
+  <div class="tooltip-inner">
+    Some tooltip text!
+  </div>
+</div>
+```
+
+### Disabled elements
+
+Elements with the `disabled` attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`.
+
+{{< example class="tooltip-demo" stackblitz_add_js="true" >}}
+<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Disabled tooltip">
+  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
+</span>
+{{< /example >}}
+
+### Options
+
+{{< markdown >}}
+{{< partial "js-data-attributes.md" >}}
+{{< /markdown >}}
+
+{{< callout warning >}}
+Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
+{{< /callout >}}
+
+
+{{< bs-table "table" >}}
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `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 -&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). |
+| `html` | boolean | `false` | Allow HTML in the tooltip. If true, HTML tags in the tooltip's `title` will be rendered in the tooltip. If false, `innerText` property will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
+| `offset` | array, string, function | `[0, 6]` | Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
+| `placement` | string, function | `'top'` | How to position the tooltip: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the tooltip. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the tooltip instance. |
+| `popperConfig` | null, object, function | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |
+| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
+| `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
+| `selector` | string, false | `false` | If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. |
+| `template` | string | `'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'` | Base HTML to use when creating the tooltip. The tooltip's `title` will be injected into the `.tooltip-inner`. `.tooltip-arrow` will become the tooltip's arrow. The outermost wrapper element should have the `.tooltip` class and `role="tooltip"`. |
+| `title` | string, element, function | `''` | The tooltip title. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
+| `trigger` | string | `'hover focus'` | How tooltip is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the tooltip will be triggered programmatically via the `.tooltip('show')`, `.tooltip('hide')` and `.tooltip('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
+{{< /bs-table >}}
+
+{{< callout info >}}
+#### Data attributes for individual tooltips
+
+Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.
+{{< /callout >}}
+
+#### Using function with `popperConfig`
+
+```js
+const tooltip = new bootstrap.Tooltip(element, {
+  popperConfig(defaultBsPopperConfig) {
+    // const newPopperConfig = {...}
+    // use defaultBsPopperConfig if needed...
+    // return newPopperConfig
+  }
+})
+```
+
+### Methods
+
+{{< callout danger >}}
+{{< partial "callouts/danger-async-methods.md" >}}
+{{< /callout >}}
+
+{{< bs-table "table" >}}
+| Method | Description |
+| --- | --- |
+| `disable` | Removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled. |
+| `dispose` | Hides and destroys an element's tooltip (Removes stored data on the DOM element). Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. |
+| `enable` | Gives an element's tooltip the ability to be shown. **Tooltips are enabled by default.** |
+| `getInstance` | *Static* method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn't initialized. |
+| `getOrCreateInstance` | *Static* method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn't initialized. |
+| `hide` | Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. |
+| `setContent` | Gives a way to change the tooltip's content after its initialization. |
+| `show` | Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed. |
+| `toggle` | Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. |
+| `toggleEnabled` | Toggles the ability for an element's tooltip to be shown or hidden. |
+| `update` | Updates the position of an element's tooltip. |
+{{< /bs-table >}}
+
+```js
+const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance
+
+// setContent example
+tooltip.setContent({ '.tooltip-inner': 'another title' })
+
+```
+
+{{< callout info >}}
+The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the tooltip template, and each related property-value can be `string` | `element` | `function` | `null`
+{{< /callout >}}
+
+### Events
+
+{{< bs-table >}}
+| Event | Description |
+| --- | --- |
+| `hide.bs.tooltip` | This event is fired immediately when the `hide` instance method has been called. |
+| `hidden.bs.tooltip` | This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). |
+| `inserted.bs.tooltip` | This event is fired after the `show.bs.tooltip` event when the tooltip template has been added to the DOM. |
+| `show.bs.tooltip` | This event fires immediately when the `show` instance method is called. |
+| `shown.bs.tooltip` | This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). |
+{{< /bs-table >}}
+
+```js
+const myTooltipEl = document.getElementById('myTooltip')
+const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)
+
+myTooltipEl.addEventListener('hidden.bs.tooltip', () => {
+  // do something...
+})
+
+tooltip.hide()
+```
diff --git a/site/content/docs/5.1/content/figures.md b/site/content/docs/5.3/content/figures.md
index 29a38d723..985113709 100644
--- a/site/content/docs/5.1/content/figures.md
+++ b/site/content/docs/5.3/content/figures.md
@@ -26,8 +26,8 @@ Aligning the figure's caption is easy with our [text utilities]({{< docsref "/ut
 </figure>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
 
 {{< scss-docs name="figure-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.1/content/images.md b/site/content/docs/5.3/content/images.md
index b55e7a2b8..02795617f 100644
--- a/site/content/docs/5.1/content/images.md
+++ b/site/content/docs/5.3/content/images.md
@@ -54,9 +54,9 @@ If you are using the `<picture>` element to specify multiple `<source>` elements
 </picture>
 ```
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
 
 Variables are available for image thumbnails.
 
diff --git a/site/content/docs/5.1/content/reboot.md b/site/content/docs/5.3/content/reboot.md
index 63f892de2..1400e8c55 100644
--- a/site/content/docs/5.1/content/reboot.md
+++ b/site/content/docs/5.3/content/reboot.md
@@ -3,7 +3,7 @@ layout: docs
 title: Reboot
 description: Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.
 group: content
-aliases: "/docs/5.1/content/"
+aliases: "/docs/5.3/content/"
 toc: true
 ---
 
@@ -20,9 +20,25 @@ Here are our guidelines and reasons for choosing what to override in Reboot:
 
 ## CSS variables
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.1.1</small>
+{{< added-in "5.2.0" >}}
 
-With v5.1.1, we standardized our required `@import`s across all our CSS bundles (including `bootstrap.css`, `bootstrap-reboot.css`, and `bootstrap-grid.css` to include `_root.scss` . This adds `:root` level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately Bootstrap 5 will continue to see more CSS variables added over time.
+With v5.1.1, we standardized our required `@import`s across all our CSS bundles (including `bootstrap.css`, `bootstrap-reboot.css`, and `bootstrap-grid.css`) to include `_root.scss`. This adds `:root` level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately Bootstrap 5 will continue to see more [CSS variables]({{< docsref "/customize/css-variables" >}}) added over time, in order to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don't use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to fully implement.**
+
+For example, consider these `:root` CSS variables for common `<body>` styles:
+
+{{< scss-docs name="root-body-variables" file="scss/_root.scss" >}}
+
+In practice, those variables are then applied in Reboot like so:
+
+{{< scss-docs name="reboot-body-rules" file="scss/_reboot.scss" >}}
+
+Which allows you to make real-time customizations however you like:
+
+```html
+<body style="--bs-body-color: #333;">
+  <!-- ... -->
+</body>
+```
 
 ## Page defaults
 
@@ -47,91 +63,81 @@ $font-family-sans-serif:
   "Segoe UI",
   // Android
   Roboto,
-  // Basic web fallback
-  "Helvetica Neue", Arial,
+  // older macOS and iOS
+  "Helvetica Neue",
   // Linux
   "Noto Sans",
   "Liberation Sans",
+  // Basic web fallback
+  Arial,
   // Sans serif fallback
   sans-serif,
   // Emoji fonts
   "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 ```
 
-Note that because the font stack includes emoji fonts, many common symbol/dingbat unicode characters will be rendered as multi-colored pictographs. Their appearance will vary, depending on the style used in the browser/platform's native emoji font, and they won't be affected by any CSS `color` styles.
+Note that because the font stack includes emoji fonts, many common symbol/dingbat Unicode characters will be rendered as multicolored pictographs. Their appearance will vary, depending on the style used in the browser/platform's native emoji font, and they won't be affected by any CSS `color` styles.
 
 This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap.
 
-## CSS variables
+## Headings
 
-As Bootstrap 5 continues to mature, more and more styles will be built with [CSS variables]({{< docsref "/customize/css-variables" >}}) as a means to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don't use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to fully implement.**
+All heading elements—`<h1>`—`<h6>` have their `margin-top` removed, `margin-bottom: .5rem` set, and `line-height` tightened. While headings inherit their `color` by default, you can also override it via optional CSS variable, `--bs-heading-color`.
 
-For example, consider these `:root` CSS variables for common `<body>` styles:
+{{< bs-table "table" >}}
+| Heading | Example |
+| --- | --- |
+| `<h1></h1>` | <span class="h1">h1. Bootstrap heading</span> |
+| `<h2></h2>` | <span class="h2">h2. Bootstrap heading</span> |
+| `<h3></h3>` | <span class="h3">h3. Bootstrap heading</span> |
+| `<h4></h4>` | <span class="h4">h4. Bootstrap heading</span> |
+| `<h5></h5>` | <span class="h5">h5. Bootstrap heading</span> |
+| `<h6></h6>` | <span class="h6">h6. Bootstrap heading</span> |
+{{< /bs-table >}}
 
-{{< scss-docs name="root-body-variables" file="scss/_root.scss" >}}
+## Paragraphs
 
-In practice, those variables are then applied in Reboot like so:
+All `<p>` elements have their `margin-top` removed and `margin-bottom: 1rem` set for easy spacing.
 
-{{< scss-docs name="reboot-body-rules" file="scss/_reboot.scss" >}}
+{{< example >}}
+<p>This is an example paragraph.</p>
+{{< /example >}}
 
-Which allows you to make real-time customizations however you like:
+## Links
 
-```html
-<body style="--bs-body-color: #333;">
-  <!-- ... -->
-</body>
-```
+Links have a default `color` and underline applied. While links change on `:hover`, they don't change based on whether someone `:visited` the link. They also receive no special `:focus` styles.
 
-## Headings and paragraphs
+{{< example >}}
+<a href="#">This is an example link</a>
+{{< /example >}}
 
-All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing.
+As of v5.3.x, link `color` is set using `rgba()` and new `-rgb` CSS variables, allowing for easy customization of link color opacity. Change the link color opacity with the `--bs-link-opacity` CSS variable:
+
+{{< example >}}
+<a href="#" style="--bs-link-opacity: .5">This is an example link</a>
+{{< /example >}}
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>Heading</th>
-      <th>Example</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        {{< markdown >}}`<h1></h1>`{{< /markdown >}}
-      </td>
-      <td><span class="h1">h1. Bootstrap heading</span></td>
-    </tr>
-    <tr>
-      <td>
-        {{< markdown >}}`<h2></h2>`{{< /markdown >}}
-      </td>
-      <td><span class="h2">h2. Bootstrap heading</span></td>
-    </tr>
-    <tr>
-      <td>
-        {{< markdown >}}`<h3></h3>`{{< /markdown >}}
-      </td>
-      <td><span class="h3">h3. Bootstrap heading</span></td>
-    </tr>
-    <tr>
-      <td>
-        {{< markdown >}}`<h4></h4>`{{< /markdown >}}
-      </td>
-      <td><span class="h4">h4. Bootstrap heading</span></td>
-    </tr>
-    <tr>
-      <td>
-        {{< markdown >}}`<h5></h5>`{{< /markdown >}}
-      </td>
-      <td><span class="h5">h5. Bootstrap heading</span></td>
-    </tr>
-    <tr>
-      <td>
-        {{< markdown >}}`<h6></h6>`{{< /markdown >}}
-      </td>
-      <td><span class="h6">h6. Bootstrap heading</span></td>
-    </tr>
-  </tbody>
-</table>
+
+Placeholder links—those without an `href`—are targeted with a more specific selector and have their `color` and `text-decoration` reset to their default values.
+
+{{< example >}}
+<a>This is a placeholder link</a>
+{{< /example >}}
+
+## Horizontal rules
+
+The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are styled via `border-top`, have a default `opacity: .25`, and automatically inherit their `border-color` via `color`, including when `color` is set via the parent. They can be modified with text, border, and opacity utilities.
+
+{{< example >}}
+<hr>
+
+<div class="text-success">
+  <hr>
+</div>
+
+<hr class="border border-danger border-2 opacity-50">
+<hr class="border border-primary border-3 opacity-75">
+{{< /example >}}
 
 ## Lists
 
@@ -199,7 +205,7 @@ Use the `<kbd>` to indicate input that is typically entered via keyboard.
 
 {{< example >}}
 To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
-To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
+To edit settings, press <kbd><kbd>Ctrl</kbd> + <kbd>,</kbd></kbd>
 {{< /example >}}
 
 ## Sample output
@@ -214,41 +220,41 @@ For indicating sample output from a program use the `<samp>` tag.
 
 Tables are slightly adjusted to style `<caption>`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{< docsref "/content/tables" >}}).
 
-<div class="bd-example">
-  <table>
-    <caption>
-      This is an example table, and this is its caption to describe the contents.
-    </caption>
-    <thead>
-      <tr>
-        <th>Table heading</th>
-        <th>Table heading</th>
-        <th>Table heading</th>
-        <th>Table heading</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>Table cell</td>
-        <td>Table cell</td>
-        <td>Table cell</td>
-        <td>Table cell</td>
-      </tr>
-      <tr>
-        <td>Table cell</td>
-        <td>Table cell</td>
-        <td>Table cell</td>
-        <td>Table cell</td>
-      </tr>
-      <tr>
-        <td>Table cell</td>
-        <td>Table cell</td>
-        <td>Table cell</td>
-        <td>Table cell</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+{{< example >}}
+<table>
+  <caption>
+    This is an example table, and this is its caption to describe the contents.
+  </caption>
+  <thead>
+    <tr>
+      <th>Table heading</th>
+      <th>Table heading</th>
+      <th>Table heading</th>
+      <th>Table heading</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+    </tr>
+    <tr>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+    </tr>
+    <tr>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+    </tr>
+  </tbody>
+</table>
+{{< /example >}}
 
 ## Forms
 
@@ -263,6 +269,10 @@ Various form elements have been rebooted for simpler base styles. Here are some
 
 These changes, and more, are demonstrated below.
 
+{{< callout warning >}}
+{{< partial "callouts/warning-input-support.md" >}}
+{{< /callout >}}
+
 <form class="bd-example">
   <fieldset>
     <legend>Example legend</legend>
@@ -385,10 +395,6 @@ These changes, and more, are demonstrated below.
   </fieldset>
 </form>
 
-{{< callout warning >}}
-{{< partial "callout-warning-input-support.md" >}}
-{{< /callout >}}
-
 ### Pointers on buttons
 
 Reboot includes an enhancement for `role="button"` to change the default cursor to `pointer`. Add this attribute to elements to help indicate elements are interactive. This role isn't necessary for `<button>` elements, which get their own `cursor` change.
@@ -405,8 +411,8 @@ The `<address>` element is updated to reset the browser default `font-style` fro
 
 <div class="bd-example">
   <address>
-    <strong>Twitter, Inc.</strong><br>
-    1355 Market St, Suite 900<br>
+    <strong>ACME Corporation</strong><br>
+    1123 Fictional St,<br>
     San Francisco, CA 94103<br>
     <abbr title="Phone">P:</abbr> (123) 456-7890
   </address>
@@ -460,10 +466,8 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o
 <input type="text" hidden>
 ```
 
-{{< callout warning >}}
-##### jQuery incompatibility
-
-`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
+{{< callout info >}}
+Since `[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods, we don't specifically endorse `[hidden]` over other techniques for managing the `display` of elements.
 {{< /callout >}}
 
 To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{< docsref "/utilities/visibility" >}}) instead.
diff --git a/site/content/docs/5.1/content/tables.md b/site/content/docs/5.3/content/tables.md
index c1f6293b4..3d3583c37 100644
--- a/site/content/docs/5.1/content/tables.md
+++ b/site/content/docs/5.3/content/tables.md
@@ -18,6 +18,10 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot
 
 Use contextual classes to color tables, table rows or individual cells.
 
+{{< callout info >}}
+**Heads up!** Because of the more complicated CSS used to generate our table variants, they most likely won't see color mode adaptive styling until v6.
+{{< /callout >}}
+
 <div class="bd-example">
   <table class="table">
     <thead>
@@ -69,7 +73,7 @@ Use contextual classes to color tables, table rows or individual cells.
 {{< /highlight >}}
 
 {{< callout info >}}
-{{< partial "callout-warning-color-assistive-technologies.md" >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
 {{< /callout >}}
 
 ## Accented tables
@@ -80,12 +84,22 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`
 
 {{< table class="table table-striped" >}}
 
+### Striped columns
+
+Use `.table-striped-columns` to add zebra-striping to any table column.
+
+{{< table class="table table-striped-columns" >}}
+
 These classes can also be added to table variants:
 
 {{< table class="table table-dark table-striped" >}}
 
+{{< table class="table table-dark table-striped-columns" >}}
+
 {{< table class="table table-success table-striped" >}}
 
+{{< table class="table table-success table-striped-columns" >}}
+
 ### Hoverable rows
 
 Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
@@ -94,7 +108,7 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
 
 {{< table class="table table-dark table-hover" >}}
 
-These hoverable rows can also be combined with the striped variant:
+These hoverable rows can also be combined with the striped rows variant:
 
 {{< table class="table table-striped table-hover" >}}
 
@@ -210,11 +224,11 @@ Highlight a table row or cell by adding a `.table-active` class.
 
 ## How do the variants and accented tables work?
 
-For the accented tables ([striped rows](#striped-rows), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants):
+For the accented tables ([striped rows](#striped-rows), [striped columns](#striped-columns), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants):
 
 - We start by setting the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds.
-- Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);` to layer on top of any specified `background-color`. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is unset by default, we don't have a default box shadow.
-- When either `.table-striped`, `.table-hover` or `.table-active` classes are added, the `--bs-table-accent-bg` is set to a semitransparent color to colorize the background.
+- Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));` to layer on top of any specified `background-color`. It uses custom cascade to override the `box-shadow`, regardless the CSS specificity. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is set to `transparent` by default, we don't have a default box shadow.
+- When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, either `--bs-table-bg-type` or `--bs-table-bg-state` (by default set to `initial`) are set to a semitransparent color (`--bs-table-striped-bg`, `--bs-table-active-bg` or `--bs-table-hover-bg`) to colorize the background and override default `--bs-table-accent-bg`.
 - For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color.
 - Text and border colors are generated the same way, and their colors are inherited by default.
 
@@ -250,6 +264,42 @@ Add `.table-sm` to make any `.table` more compact by cutting all cell `padding`
 
 {{< table class="table table-dark table-sm" >}}
 
+## Table group dividers
+
+Add a thicker border, darker between table groups—`<thead>`, `<tbody>`, and `<tfoot>`—with `.table-group-divider`. Customize the color by changing the `border-top-color` (which we don't currently provide a utility class for at this time).
+
+{{< example >}}
+<table class="table">
+  <thead>
+    <tr>
+      <th scope="col">#</th>
+      <th scope="col">First</th>
+      <th scope="col">Last</th>
+      <th scope="col">Handle</th>
+    </tr>
+  </thead>
+  <tbody class="table-group-divider">
+    <tr>
+      <th scope="row">1</th>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <th scope="row">2</th>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <th scope="row">3</th>
+      <td colspan="2">Larry the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+</table>
+{{< /example >}}
+
 ## Vertical alignment
 
 Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed.
@@ -377,7 +427,7 @@ Border styles, active styles, and table variants are not inherited by nested tab
 </div>
 
 ```html
-<table class="table table-striped">
+<table class="table table-striped table-bordered">
   <thead>
     ...
   </thead>
@@ -499,7 +549,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
 
 <div class="bd-example">
 <table class="table">
-  <thead class="table-light">
+  <thead>
     <tr>
       <th scope="col">#</th>
       <th scope="col">First</th>
@@ -773,17 +823,17 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
 {{< /tables.inline >}}
 {{< /highlight >}}
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
 
 {{< scss-docs name="table-variables" file="scss/_variables.scss" >}}
 
-### Loop
+### Sass loops
 
 {{< scss-docs name="table-loop" file="scss/_variables.scss" >}}
 
 ### Customizing
 
 - The factor variables (`$table-striped-bg-factor`, `$table-active-bg-factor` & `$table-hover-bg-factor`) are used to determine the contrast in table variants.
-- Apart from the light & dark table variants, theme colors are lightened by the `$table-bg-level` variable.
+- Apart from the light & dark table variants, theme colors are lightened by the `$table-bg-scale` variable.
diff --git a/site/content/docs/5.1/content/typography.md b/site/content/docs/5.3/content/typography.md
index 44c65252d..ca0f4e985 100644
--- a/site/content/docs/5.1/content/typography.md
+++ b/site/content/docs/5.3/content/typography.md
@@ -22,52 +22,16 @@ These styles can be found within `_reboot.scss`, and the global variables are de
 
 All HTML headings, `<h1>` through `<h6>`, are available.
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>Heading</th>
-      <th>Example</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        {{< markdown >}}`<h1></h1>`{{< /markdown >}}
-      </td>
-      <td><span class="h1">h1. Bootstrap heading</span></td>
-    </tr>
-    <tr>
-      <td>
-        {{< markdown >}}`<h2></h2>`{{< /markdown >}}
-      </td>
-      <td><span class="h2">h2. Bootstrap heading</span></td>
-    </tr>
-    <tr>
-      <td>
-        {{< markdown >}}`<h3></h3>`{{< /markdown >}}
-      </td>
-      <td><span class="h3">h3. Bootstrap heading</span></td>
-    </tr>
-    <tr>
-      <td>
-        {{< markdown >}}`<h4></h4>`{{< /markdown >}}
-      </td>
-      <td><span class="h4">h4. Bootstrap heading</span></td>
-    </tr>
-    <tr>
-      <td>
-        {{< markdown >}}`<h5></h5>`{{< /markdown >}}
-      </td>
-      <td><span class="h5">h5. Bootstrap heading</span></td>
-    </tr>
-    <tr>
-      <td>
-        {{< markdown >}}`<h6></h6>`{{< /markdown >}}
-      </td>
-      <td><span class="h6">h6. Bootstrap heading</span></td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table >}}
+| Heading | Example |
+| --- | --- |
+| `<h1></h1>` | <span class="h1">h1. Bootstrap heading</span> |
+| `<h2></h2>` | <span class="h2">h2. Bootstrap heading</span> |
+| `<h3></h3>` | <span class="h3">h3. Bootstrap heading</span> |
+| `<h4></h4>` | <span class="h4">h4. Bootstrap heading</span> |
+| `<h5></h5>` | <span class="h5">h5. Bootstrap heading</span> |
+| `<h6></h6>` | <span class="h6">h6. Bootstrap heading</span> |
+{{< /bs-table >}}
 
 ```html
 <h1>h1. Bootstrap heading</h1>
@@ -96,7 +60,7 @@ Use the included utility classes to recreate the small secondary heading text fr
 {{< example >}}
 <h3>
   Fancy display heading
-  <small class="text-muted">With faded secondary text</small>
+  <small class="text-body-secondary">With faded secondary text</small>
 </h3>
 {{< /example >}}
 
@@ -124,6 +88,8 @@ Traditional heading elements are designed to work best in the meat of your page
 
 Display headings are configured via the `$display-font-sizes` Sass map and two variables, `$display-font-weight` and `$display-line-height`.
 
+Display headings are customizable via two variables, `$display-font-family` and `$display-font-style`.
+
 {{< scss-docs name="display-headings" file="scss/_variables.scss" >}}
 
 ## Lead
@@ -303,9 +269,9 @@ Align terms and descriptions horizontally by using our grid system's predefined
 
 In Bootstrap 5, we've enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]({{< docsref "/getting-started/rfs" >}}) to find out how this works.
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
 
 Headings have some dedicated variables for sizing and spacing.
 
@@ -315,6 +281,6 @@ Miscellaneous typography elements covered here and in [Reboot]({{< docsref "/con
 
 {{< scss-docs name="type-variables" file="scss/_variables.scss" >}}
 
-### Mixins
+### Sass mixins
 
 There are no dedicated mixins for typography, but Bootstrap does use [Responsive Font Sizing (RFS)]({{< docsref "/getting-started/rfs" >}}).
diff --git a/site/content/docs/5.3/customize/color-modes.md b/site/content/docs/5.3/customize/color-modes.md
new file mode 100644
index 000000000..ea6db2890
--- /dev/null
+++ b/site/content/docs/5.3/customize/color-modes.md
@@ -0,0 +1,259 @@
+---
+layout: docs
+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:
+  version: "5.3"
+---
+
+{{< callout >}}
+**Try it yourself!** Download the source code and working demo for using Bootstrap with Stylelint, and the color modes from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/color-modes). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/color-modes?file=index.html).
+{{< /callout >}}
+
+## Dark mode
+
+**Bootstrap now supports color modes, starting with dark mode!** With v5.3.0 you can implement your own color mode toggler (see below for an example from Bootstrap's docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the `<html>` element, or on specific components and elements, thanks to the `data-bs-theme` attribute.
+
+Alternatively, you can also switch to a media query implementation thanks to our color mode mixin—see [the usage section for details](#building-with-sass). Heads up though—this eliminates your ability to change themes on a per-component basis as shown below.
+
+## Example
+
+For example, to change the color mode of a dropdown menu, add `data-bs-theme="light"` or `data-bs-theme="dark"` to the parent `.dropdown`. Now, no matter the global color mode, these dropdowns will display with the specified theme value.
+
+{{< example class="d-flex justify-content-between" >}}
+<div class="dropdown" data-bs-theme="light">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
+    Default dropdown
+  </button>
+  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
+    <li><a class="dropdown-item active" href="#">Action</a></li>
+    <li><a class="dropdown-item" href="#">Action</a></li>
+    <li><a class="dropdown-item" href="#">Another action</a></li>
+    <li><a class="dropdown-item" href="#">Something else here</a></li>
+    <li><hr class="dropdown-divider"></li>
+    <li><a class="dropdown-item" href="#">Separated link</a></li>
+  </ul>
+</div>
+
+<div class="dropdown" data-bs-theme="dark">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
+    Dark dropdown
+  </button>
+  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
+    <li><a class="dropdown-item active" href="#">Action</a></li>
+    <li><a class="dropdown-item" href="#">Action</a></li>
+    <li><a class="dropdown-item" href="#">Another action</a></li>
+    <li><a class="dropdown-item" href="#">Something else here</a></li>
+    <li><hr class="dropdown-divider"></li>
+    <li><a class="dropdown-item" href="#">Separated link</a></li>
+  </ul>
+</div>
+{{< /example >}}
+
+## How it works
+
+- As shown above, color mode styles are controlled by the `data-bs-theme` attribute. This attribute can be applied to the `<html>` element, or to any other element or Bootstrap component. If applied to the `<html>` element, it will apply to everything. If applied to a component or element, it will be scoped to that specific component or element.
+
+- For each color mode you wish to support, you'll need to add new overrides for the shared global CSS variables. We do this already in our `_root.scss` stylesheet for dark mode, with light mode being the default values. In writing color mode specific styles, use the mixin:
+
+  ```scss
+  // Color mode variables in _root.scss
+  @include color-mode(dark) {
+    // CSS variable overrides here...
+  }
+  ```
+
+- We use a custom `_variables-dark.scss` to power those shared global CSS variable overrides for dark mode. This file isn't required for your own custom color modes, but it's required for our dark mode for two reasons. First, it's better to have a single place to reset global colors. Second, some Sass variables had to be overridden for background images embedded in our CSS for accordions, form components, and more.
+
+## Usage
+
+### Enable dark mode
+
+Enable the built in dark color mode across your entire project by adding the `data-bs-theme="dark"` attribute to the `<html>` element. This will apply the dark color mode to all components and elements, other than those with a specific `data-bs-theme` attribute applied. Building on the [quick start template]({{< docsref "/getting-started/introduction#quick-start" >}}):
+
+```html
+<!doctype html>
+<html lang="en" data-bs-theme="dark">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Bootstrap demo</title>
+    <link href="{{< param "cdn.css" >}}" rel="stylesheet" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+    <script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
+  </body>
+</html>
+```
+
+Bootstrap does not yet ship with a built-in color mode picker, but you can use the one from our own documentation if you like. [Learn more in the JavaScript section.](#javascript)
+
+### Building with Sass
+
+Our new dark mode option is available to use for all users of Bootstrap, but it's controlled via data attributes instead of media queries and does not automatically toggle your project's color mode. You can disable our dark mode entirely via Sass by changing `$enable-dark-mode` to `false`.
+
+We use a custom Sass mixin, `color-mode()`, to help you control _how_ color modes are applied. By default, we use a `data` attribute approach, allowing you to create more user-friendly experiences where your visitors can choose to have an automatic dark mode or control their preference (like in our own docs here). This is also an easy and scalable way to add different themes and more custom color modes beyond light and dark.
+
+In case you want to use media queries and only make color modes automatic, you can change the mixin's default type via Sass variable. Consider the following snippet and its compiled CSS output.
+
+```scss
+$color-mode-type: data;
+
+@include color-mode(dark) {
+  .element {
+    color: var(--bs-primary-text-emphasis);
+    background-color: var(--bs-primary-bg-subtle);
+  }
+}
+```
+
+Outputs to:
+
+```css
+[data-bs-theme=dark] .element {
+  color: var(--bs-primary-text-emphasis);
+  background-color: var(--bs-primary-bg-subtle);
+}
+```
+
+And when setting to `media-query`:
+
+```scss
+$color-mode-type: media-query;
+
+@include color-mode(dark) {
+  .element {
+    color: var(--bs-primary-text-emphasis);
+    background-color: var(--bs-primary-bg-subtle);
+  }
+}
+```
+
+Outputs to:
+
+```css
+@media (prefers-color-scheme: dark) {
+  .element {
+    color: var(--bs-primary-text-emphasis);
+    background-color: var(--bs-primary-bg-subtle);
+  }
+}
+```
+
+## Custom color modes
+
+While the primary use case for color modes is light and dark mode, custom color modes are also possible. Create your own `data-bs-theme` selector with a custom value as the name of your color mode, then modify our Sass and CSS variables as needed. We opted to create a separate `_variables-dark.scss` stylesheet to house Bootstrap's dark mode specific Sass variables, but that's not required for you.
+
+For example, you can create a "blue theme" with the selector `data-bs-theme="blue"`. In your custom Sass or CSS file, add the new selector and override any global or component CSS variables as needed. If you're using Sass, you can also use Sass's functions within your CSS variable overrides.
+
+{{< scss-docs name="custom-color-mode" file="site/assets/scss/_content.scss" >}}
+
+<div class="bd-example text-body bg-body" data-bs-theme="blue">
+  <div class="h4">Example blue theme</div>
+  <p>Some paragraph text to show how the blue theme might look with written copy.</p>
+
+  <hr class="my-4">
+
+  <div class="dropdown">
+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonCustom" data-bs-toggle="dropdown" aria-expanded="false">
+      Dropdown button
+    </button>
+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonCustom">
+      <li><a class="dropdown-item active" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item" href="#">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </div>
+</div>
+
+```html
+<div data-bs-theme="blue">
+  ...
+</div>
+```
+
+## JavaScript
+
+To allow visitors or users to toggle color modes, you'll need to create a toggle element to control the `data-bs-theme` attribute on the root element, `<html>`. We've built a toggler in our documentation that initially defers to a user's current system color mode, but provides an option to override that and pick a specific color mode.
+
+Here's a look at the JavaScript that powers it. Feel free to inspect our own documentation navbar to see how it's implemented using HTML and CSS from our own components. It is suggested to include the JavaScript at the top of your page to reduce potential screen flickering during reloading of your site. Note that if you decide to use media queries for your color modes, your JavaScript may need to be modified or removed if you prefer an implicit control.
+
+{{< example lang="js" show_preview="false" >}}
+{{< js.inline >}}
+{{- readFile (path.Join "site/static/docs" .Site.Params.docs_version "assets/js/color-modes.js") -}}
+{{< /js.inline >}}
+{{< /example >}}
+
+## Adding theme colors
+
+Adding a new color in `$theme-colors` is not enough for some of our components like [alerts]({{< docsref "/components/alerts" >}}) and [list groups]({{< docsref "/components/list-group" >}}). New colors must also be defined in `$theme-colors-text`, `$theme-colors-bg-subtle`, and `$theme-colors-border-subtle` for light theme; but also in `$theme-colors-text-dark`, `$theme-colors-bg-subtle-dark`, and `$theme-colors-border-subtle-dark` for dark theme.
+
+This is a manual process because Sass cannot generate its own Sass variables from an existing variable or map. In future versions of Bootstrap, we'll revisit this setup to reduce the duplication.
+
+```scss
+// Required
+@import "functions";
+@import "variables";
+@import "variables-dark";
+
+// Add a custom color to $theme-colors
+$custom-colors: (
+  "custom-color": #712cf9
+);
+$theme-colors: map-merge($theme-colors, $custom-colors);
+
+@import "maps";
+@import "mixins";
+@import "utilities";
+
+// Add a custom color to new theme maps
+
+// Light mode
+$custom-colors-text: ("custom-color": #712cf9);
+$custom-colors-bg-subtle: ("custom-color": #e1d2fe);
+$custom-colors-border-subtle: ("custom-color": #bfa1fc);
+
+$theme-colors-text: map-merge($theme-colors-text, $custom-colors-text);
+$theme-colors-bg-subtle: map-merge($theme-colors-bg-subtle, $custom-colors-bg-subtle);
+$theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colors-border-subtle);
+
+// Dark mode
+$custom-colors-text-dark: ("custom-color": #e1d2f2);
+$custom-colors-bg-subtle-dark: ("custom-color": #8951fa);
+$custom-colors-border-subtle-dark: ("custom-color": #e1d2f2);
+
+$theme-colors-text-dark: map-merge($theme-colors-text-dark, $custom-colors-text-dark);
+$theme-colors-bg-subtle-dark: map-merge($theme-colors-bg-subtle-dark, $custom-colors-bg-subtle-dark);
+$theme-colors-border-subtle-dark: map-merge($theme-colors-border-subtle-dark, $custom-colors-border-subtle-dark);
+
+// Remainder of Bootstrap imports
+@import "root";
+@import "reboot";
+// etc
+```
+
+## CSS
+
+### Variables
+
+Dozens of root level CSS variables are repeated as overrides for dark mode. These are scoped to the color mode selector, which defaults to `data-bs-theme` but [can be configured](#building-with-sass) to use a `prefers-color-scheme` media query. Use these variables as a guideline for generating your own new color modes.
+
+{{< scss-docs name="root-dark-mode-vars" file="scss/_root.scss" >}}
+
+### Sass variables
+
+CSS variables for our dark color mode are partially generated from dark mode specific Sass variables in `_variables-dark.scss`. This also includes some custom overrides for changing the colors of embedded SVGs used throughout our components.
+
+{{< scss-docs name="sass-dark-mode-vars" file="scss/_variables-dark.scss" >}}
+
+### Sass mixins
+
+Styles for dark mode, and any custom color modes you create, can be scoped appropriately to the `data-bs-theme` attribute selector or media query with the customizable `color-mode()` mixin. See the [Sass usage section](#building-with-sass) for more details.
+
+{{< scss-docs name="color-mode-mixin" file="scss/mixins/_color-mode.scss" >}}
diff --git a/site/content/docs/5.3/customize/color.md b/site/content/docs/5.3/customize/color.md
new file mode 100644
index 000000000..d42c63615
--- /dev/null
+++ b/site/content/docs/5.3/customize/color.md
@@ -0,0 +1,512 @@
+---
+layout: docs
+title: Color
+description: Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
+group: customize
+toc: true
+---
+
+## Colors
+
+{{< added-in "5.3.0" >}}
+
+Bootstrap's color palette has continued to expand and become more nuanced in v5.3.0. We've added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.
+
+Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.
+
+{{< callout warning>}}
+**Heads up!** There's some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6.
+{{< /callout >}}
+
+<div class="table-responsive">
+  <table class="table table-swatches">
+    <thead>
+      <tr>
+        <th style="width: 340px;">Description</th>
+        <th style="width: 200px;" class="ps-0">Swatch</th>
+        <th>Variables</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="2">
+          {{< markdown >}}**Body —** Default foreground (color) and background, including components.{{< /markdown >}}
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2" style="background-color: var(--bs-body-color);">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-body-color`<br>`--bs-body-color-rgb`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-body-bg`<br>`--bs-body-bg-rgb`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td rowspan="2">
+          {{< markdown >}}**Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.{{< /markdown >}}
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2" style="background-color: var(--bs-secondary-color);">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-secondary-color`<br>`--bs-secondary-color-rgb`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2 border" style="background-color: var(--bs-secondary-bg);">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-secondary-bg`<br>`--bs-secondary-bg-rgb`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td rowspan="2">
+          {{< markdown >}}**Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.{{< /markdown >}}
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-color);">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-tertiary-color`<br>`--bs-tertiary-color-rgb`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2 border" style="background-color: var(--bs-tertiary-bg);">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-tertiary-bg`<br>`--bs-tertiary-bg-rgb`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          {{< markdown >}}**Emphasis —** For higher contrast text. Not applicable for backgrounds.{{< /markdown >}}
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2" style="background-color: var(--bs-emphasis-color);">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-emphasis-color`<br>`--bs-emphasis-color-rgb`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          {{< markdown >}}**Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}}
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2" style="background-color: var(--bs-border-color);">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-border-color`<br>`--bs-border-color-rgb`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td rowspan="4">
+          {{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}}
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2 bg-primary">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-primary`<br>`--bs-primary-rgb`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-primary-text-emphasis`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td rowspan="4">
+          {{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}}
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2 bg-success">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-success`<br>`--bs-success-rgb`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-success-bg-subtle)">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="border: 5px var(--bs-success-border-subtle) solid">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-success-text-emphasis`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td rowspan="4">
+          {{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}}
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2 bg-danger">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-danger`<br>`--bs-danger-rgb`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-danger-bg-subtle)">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="border: 5px var(--bs-danger-border-subtle) solid">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-danger-text-emphasis`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td rowspan="4">
+          {{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}}
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2 bg-warning">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-warning`<br>`--bs-warning-rgb`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-warning-bg-subtle)">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="border: 5px var(--bs-warning-border-subtle) solid">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-warning-text-emphasis`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td rowspan="4">
+          {{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}}
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2 bg-info">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-info`<br>`--bs-info-rgb`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-info-bg-subtle)">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="border: 5px var(--bs-info-border-subtle) solid">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-info-text-emphasis`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td rowspan="4">
+          {{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}}
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2 bg-light">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-light`<br>`--bs-light-rgb`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-light-bg-subtle)">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="border: 5px var(--bs-light-border-subtle) solid">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-light-text-emphasis`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td rowspan="4">
+          {{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}}
+        </td>
+        <td class="ps-0">
+          <div class="p-3 rounded-2 bg-dark">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-dark`<br>`--bs-dark-rgb`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-dark-bg-subtle)">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="p-3 rounded-2" style="border: 5px var(--bs-dark-border-subtle) solid">&nbsp;</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div>
+        </td>
+        <td>
+          {{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### Using the new colors
+
+These new colors are accessible via CSS variables and utility classes—like `--bs-primary-bg-subtle` and `.bg-primary-subtle`—allowing you to compose your own CSS rules with the variables, or to quickly apply styles via classes. The utilities are built with the color's associated CSS variables, and since we customize those CSS variables for dark mode, they are also adaptive to color mode by default.
+
+{{< example >}}
+<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
+  Example element with utilities
+</div>
+{{< /example >}}
+
+### Theme colors
+
+We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap's `scss/_variables.scss` file.
+
+<div class="row">
+  {{< theme-colors.inline >}}
+  {{- range (index $.Site.Data "theme-colors") }}
+    <div class="col-md-4">
+      <div class="p-3 mb-3 text-bg-{{ .name }} rounded-3">{{ .name | title }}</div>
+    </div>
+  {{ end -}}
+  {{< /theme-colors.inline >}}
+</div>
+
+All these colors are available as a Sass map, `$theme-colors`.
+
+{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}}
+
+Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors.
+
+### All colors
+
+All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don't create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).
+
+Be sure to monitor contrast ratios as you customize colors. As shown below, we've added three contrast ratios to each of the main colors—one for the swatch's current colors, one for against white, and one for against black.
+
+<div class="row font-monospace">
+  {{< theme-colors.inline >}}
+  {{- range $color := $.Site.Data.colors }}
+    {{- if (and (not (eq $color.name "white")) (not (eq $color.name "gray")) (not (eq $color.name "gray-dark"))) }}
+    <div class="col-md-4 mb-3">
+      <div class="p-3 mb-2 position-relative swatch-{{ $color.name }}">
+        <strong class="d-block">${{ $color.name }}</strong>
+        {{ $color.hex }}
+      </div>
+      {{ range (seq 100 100 900) }}
+      <div class="p-3 bd-{{ $color.name }}-{{ . }}">${{ $color.name }}-{{ . }}</div>
+      {{ end }}
+    </div>
+    {{ end -}}
+  {{ end -}}
+
+  <div class="col-md-4 mb-3">
+    <div class="p-3 mb-2 position-relative swatch-gray-500">
+      <strong class="d-block">$gray-500</strong>
+      #adb5bd
+    </div>
+  {{- range $.Site.Data.grays }}
+    <div class="p-3 bd-gray-{{ .name }}">$gray-{{ .name }}</div>
+  {{ end -}}
+  </div>
+  {{< /theme-colors.inline >}}
+
+  <div class="col-md-4 mb-3">
+    <div class="p-3 mb-2 bd-black text-white">
+      <strong class="d-block">$black</strong>
+      #000
+    </div>
+    <div class="p-3 mb-2 bd-white border">
+      <strong class="d-block">$white</strong>
+      #fff
+    </div>
+  </div>
+</div>
+
+### Notes on Sass
+
+Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., `$blue-500`) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass's `mix()` color function.
+
+Using `mix()` is not the same as `lighten()` and `darken()`—the former blends the specified color with white or black, while the latter only adjusts the lightness value of each color. The result is a much more complete suite of colors, as [shown in this CodePen demo](https://codepen.io/emdeoh/pen/zYOQOPB).
+
+Our `tint-color()` and `shade-color()` functions use `mix()` alongside our `$theme-color-interval` variable, which specifies a stepped percentage value for each mixed color we produce. See the `scss/_functions.scss` and `scss/_variables.scss` files for the full source code.
+
+## Color Sass maps
+
+Bootstrap's source Sass files include three maps to help you quickly and easily loop over a list of colors and their hex values.
+
+- `$colors` lists all our available base (`500`) colors
+- `$theme-colors` lists all semantically named theme colors (shown below)
+- `$grays` lists all tints and shades of gray
+
+Within `scss/_variables.scss`, you'll find Bootstrap's color variables and Sass map. Here's an example of the `$colors` Sass map:
+
+{{< scss-docs name="colors-map" file="scss/_variables.scss" >}}
+
+Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map.
+
+### Example
+
+Here's how you can use these in your Sass:
+
+```scss
+.alpha { color: $purple; }
+.beta {
+  color: $yellow-300;
+  background-color: $indigo-900;
+}
+```
+
+[Color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utility classes are also available for setting `color` and `background-color` using the `500` color values.
+
+## Generating utilities
+
+{{< added-in "5.1.0" >}}
+
+Bootstrap doesn't include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]({{< docsref "/utilities/api" >}}) and our extended Sass maps added in v5.1.0.
+
+1. To start, make sure you've imported our functions, variables, mixins, and utilities.
+2. Use our `map-merge-multiple()` function to quickly merge multiple Sass maps together in a new map.
+3. Merge this new combined map to extend any utility with a `{color}-{level}` class name.
+
+Here's an example that generates text color utilities (e.g., `.text-purple-500`) using the above steps.
+
+```scss
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+
+$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "color": map-merge(
+      map-get($utilities, "color"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "color"), "values"),
+          (
+            $all-colors
+          ),
+        ),
+      ),
+    ),
+  )
+);
+
+@import "bootstrap/scss/utilities/api";
+```
+
+This will generate new `.text-{color}-{level}` utilities for every color and level. You can do the same for any other utility and property as well.
diff --git a/site/content/docs/5.1/customize/components.md b/site/content/docs/5.3/customize/components.md
index b512a9036..262c8d8c6 100644
--- a/site/content/docs/5.1/customize/components.md
+++ b/site/content/docs/5.3/customize/components.md
@@ -34,7 +34,7 @@ Should you modify your `$grid-breakpoints`, your changes will apply to all the l
 
 {{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
 
-For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).
+For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]({{< docsref "/layout/grid#css" >}}).
 
 ## Creating your own
 
diff --git a/site/content/docs/5.3/customize/css-variables.md b/site/content/docs/5.3/customize/css-variables.md
new file mode 100644
index 000000000..ffb40c0c4
--- /dev/null
+++ b/site/content/docs/5.3/customize/css-variables.md
@@ -0,0 +1,93 @@
+---
+layout: docs
+title: CSS variables
+description: Use Bootstrap's CSS custom properties for fast and forward-looking design and development.
+group: customize
+toc: true
+---
+
+Bootstrap includes many [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in its compiled CSS for real-time customization without the need to recompile Sass. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser's inspector, a code sandbox, or general prototyping.
+
+**All our custom properties are prefixed with `bs-`** to avoid conflicts with third party CSS.
+
+## Root variables
+
+Here are the variables we include (note that the `:root` is required) that can be accessed anywhere Bootstrap's CSS is loaded. They're located in our `_root.scss` file and included in our compiled dist files.
+
+### Default
+
+These CSS variables are available everywhere, regardless of color mode.
+
+```css
+{{< root.inline >}}
+{{- $css := readFile "dist/css/bootstrap.css" -}}
+{{- $match := findRE `:root,\n\[data-bs-theme=light\] {([^}]*)}` $css 1 -}}
+
+{{- if (eq (len $match) 0) -}}
+{{- errorf "Got no matches for :root in %q!" $.Page.Path -}}
+{{- end -}}
+
+{{- index $match 0 -}}
+
+{{< /root.inline >}}
+```
+
+### Dark mode
+
+These variables are scoped to our built-in dark mode.
+
+```css
+{{< root.inline >}}
+{{- $css := readFile "dist/css/bootstrap.css" -}}
+{{- $match := findRE `\[data-bs-theme=dark\] {([^}]*)}` $css 1 -}}
+{{- if (eq (len $match) 0) -}}
+{{- errorf "Got no matches for [data-bs-theme=dark] in %q!" $.Page.Path -}}
+{{- end -}}
+{{- index $match 0 -}}
+{{< /root.inline >}}
+```
+
+## Component variables
+
+Bootstrap 5 is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation.
+
+Have a look at our table documentation for some [insight into how we're using CSS variables]({{< docsref "/content/tables#how-do-the-variants-and-accented-tables-work" >}}). Our [navbars also use CSS variables]({{< docsref "/components/navbar#css" >}}) as of v5.2.0. We're also using CSS variables across our grids—primarily for gutters the [new opt-in CSS grid]({{< docsref "/layout/css-grid" >}})—with more component usage coming in the future.
+
+Whenever possible, we'll assign CSS variables at the base component level (e.g., `.navbar` for navbar and its sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates.
+
+## Prefix
+
+Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that's required on every CSS variable.
+
+Customize the prefix via the `$prefix` Sass variable. By default, it's set to `bs-` (note the trailing dash).
+
+## Examples
+
+CSS variables offer similar flexibility to Sass's variables, but without the need for compilation before being served to the browser. For example, here we're resetting our page's font and link styles with CSS variables.
+
+```css
+body {
+  font: 1rem/1.5 var(--bs-font-sans-serif);
+}
+a {
+  color: var(--bs-blue);
+}
+```
+
+## Focus variables
+
+{{< added-in "5.3.0" >}}
+
+Bootstrap provides custom `:focus` styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all `:focus` styles.
+
+In our Sass, we set default values that can be customized before compiling.
+
+{{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}}
+
+Those variables are then reassigned to `:root` level CSS variables that can be customized in real-time, including with options for `x` and `y` offsets (which default to their fallback value of `0`).
+
+{{< scss-docs name="root-focus-variables" file="scss/_root.scss" >}}
+
+## Grid breakpoints
+
+While we include our grid breakpoints as CSS variables (except for `xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the meantime, you can use these variables in other CSS situations, as well as in your JavaScript.
diff --git a/site/content/docs/5.1/customize/optimize.md b/site/content/docs/5.3/customize/optimize.md
index fc61728ce..fc65628d5 100644
--- a/site/content/docs/5.1/customize/optimize.md
+++ b/site/content/docs/5.3/customize/optimize.md
@@ -19,8 +19,9 @@ If you're not using a component, comment it out or delete it entirely. For examp
 
 Bootstrap's JavaScript includes every component in our primary dist files (`bootstrap.js` and `bootstrap.min.js`), and even our primary dependency (Popper) with our bundle files (`bootstrap.bundle.js` and `bootstrap.bundle.min.js`). While you're customizing via Sass, be sure to remove related JavaScript.
 
-For instance, assuming you're using your own JavaScript bundler like Webpack or Rollup, you'd only import the JavaScript you plan on using. In the example below, we show how to just include our modal JavaScript:
+For instance, assuming you're using your own JavaScript bundler like Webpack, Parcel, or Vite, you'd only import the JavaScript you plan on using. In the example below, we show how to just include our modal JavaScript:
 
+<!-- eslint-skip -->
 ```js
 // Import just what we need
 
@@ -41,13 +42,11 @@ import 'bootstrap/js/dist/modal';
 This way, you're not including any JavaScript you don't intend to use for components like buttons, carousels, and tooltips. If you're importing dropdowns, tooltips or popovers, be sure to list the Popper dependency in your `package.json` file.
 
 {{< callout info >}}
-### Default Exports
-
-Files in `bootstrap/js/dist` use the **default export**, so if you want to use one of them you have to do the following:
+**Heads up!** Files in `bootstrap/js/dist` use the **default export**. To use them, do the following:
 
+<!-- eslint-skip -->
 ```js
 import Modal from 'bootstrap/js/dist/modal'
-
 const modal = new Modal(document.getElementById('myModal'))
 ```
 {{< /callout >}}
@@ -75,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://developers.google.com/web/tools/lighthouse/) 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.
 
@@ -83,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
 
diff --git a/site/content/docs/5.1/customize/options.md b/site/content/docs/5.3/customize/options.md
index 99aa258db..b5c4fc392 100644
--- a/site/content/docs/5.1/customize/options.md
+++ b/site/content/docs/5.3/customize/options.md
@@ -9,10 +9,11 @@ Customize Bootstrap with our built-in custom variables file and easily toggle gl
 
 You can find and customize these variables for key global options in Bootstrap's `scss/_variables.scss` file.
 
-{{< bs-table "table text-start" >}}
+{{< bs-table "table table-options" >}}
 | Variable                       | Values                             | Description                                                                            |
 | ------------------------------ | ---------------------------------- | -------------------------------------------------------------------------------------- |
 | `$spacer`                      | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{< docsref "/utilities/spacing" >}}). |
+| `$enable-dark-mode`            | `true` (default) or `false`        | Enables built-in [dark mode support]({{< docsref "/customize/color-modes#dark-mode" >}}) across the project and its components. |
 | `$enable-rounded`              | `true` (default) or `false`        | Enables predefined `border-radius` styles on various components. |
 | `$enable-shadows`              | `true` or `false` (default)        | Enables predefined decorative `box-shadow` styles on various components. Does not affect `box-shadow`s used for focus states. |
 | `$enable-gradients`            | `true` or `false` (default)        | Enables predefined gradients via `background-image` styles on various components. |
diff --git a/site/content/docs/5.1/customize/overview.md b/site/content/docs/5.3/customize/overview.md
index 03b4bff33..ed890acd0 100644
--- a/site/content/docs/5.1/customize/overview.md
+++ b/site/content/docs/5.3/customize/overview.md
@@ -4,7 +4,7 @@ title: Customize
 description: Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more.
 group: customize
 toc: false
-aliases: "/docs/5.1/customize/"
+aliases: "/docs/5.3/customize/"
 sections:
   - title: Sass
     description: Utilize our source Sass files to take advantage of variables, maps, mixins, and functions.
@@ -12,6 +12,8 @@ sections:
     description: Customize Bootstrap with built-in variables to easily toggle global CSS preferences.
   - title: Color
     description: Learn about and customize the color systems that support the entire toolkit.
+  - title: Color modes
+    description: Explore our default light mode and the new dark mode, or create custom color modes yourself.
   - title: Components
     description: Learn how we build nearly all our components responsively and with base and modifier classes.
   - title: CSS variables
@@ -40,12 +42,12 @@ As you familiarize yourself with Bootstrap, continue exploring this section for
 Several Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. **For organizations with more strict <abbr title="Content Security Policy">CSP</abbr> configurations**, we've documented all instances of our embedded SVGs (all of which are applied via `background-image`) so you can more thoroughly review your options.
 
 - [Accordion]({{< docsref "/components/accordion" >}})
+- [Carousel controls]({{< docsref "/components/carousel#with-controls" >}})
 - [Close button]({{< docsref "/components/close-button" >}}) (used in alerts and modals)
 - [Form checkboxes and radio buttons]({{< docsref "/forms/checks-radios" >}})
 - [Form switches]({{< docsref "/forms/checks-radios#switches" >}})
 - [Form validation icons]({{< docsref "/forms/validation#server-side" >}})
-- [Select menus]({{< docsref "/forms/select" >}})
-- [Carousel controls]({{< docsref "/components/carousel#with-controls" >}})
 - [Navbar toggle buttons]({{< docsref "/components/navbar#responsive-behaviors" >}})
+- [Select menus]({{< docsref "/forms/select" >}})
 
-Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include replacing the URLs with locally hosted assets, removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary.
+Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include [replacing the URLs with locally hosted assets]({{< docsref "/getting-started/webpack#extracting-svg-files" >}}), removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary.
diff --git a/site/content/docs/5.1/customize/sass.md b/site/content/docs/5.3/customize/sass.md
index 53562e1f9..b585aecbb 100644
--- a/site/content/docs/5.1/customize/sass.md
+++ b/site/content/docs/5.3/customize/sass.md
@@ -14,23 +14,25 @@ Whenever possible, avoid modifying Bootstrap's core files. For Sass, that means
 
 ```text
 your-project/
-├── scss
+├── scss/
 │   └── custom.scss
 └── node_modules/
-    └── bootstrap
-        ├── js
-        └── scss
+│   └── bootstrap/
+│       ├── js/
+│       └── scss/
+└── index.html
 ```
 
-If you've downloaded our source files and aren't using a package manager, you'll want to manually setup something similar to that structure, keeping Bootstrap's source files separate from your own.
+If you've downloaded our source files and aren't using a package manager, you'll want to manually create something similar to that structure, keeping Bootstrap's source files separate from your own.
 
 ```text
 your-project/
-├── scss
+├── scss/
 │   └── custom.scss
-└── bootstrap/
-    ├── js
-    └── scss
+├── bootstrap/
+│   ├── js/
+│   └── scss/
+└── index.html
 ```
 
 ## Importing
@@ -57,8 +59,9 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
 
 // 2. Include any default variable overrides here
 
-// 3. Include remainder of required Bootstrap stylesheets
+// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
 @import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/variables-dark";
 
 // 4. Include any default map overrides here
 
@@ -84,6 +87,45 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
 
 With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `bootstrap.scss` file as your starting point.
 
+## Compiling
+
+In order to use your custom Sass code as CSS in the browser, you need a Sass compiler. Sass ships as a CLI package, but you can also compile it with other build tools like [Gulp](https://gulpjs.com/) or [Webpack](https://webpack.js.org/), or with a GUI applications. Some IDEs also have Sass compilers built in or as downloadable extensions.
+
+We like to use the CLI to compile our Sass, but you can use whichever method you prefer. From the command line, run the following:
+
+```shell
+# Install Sass globally
+npm install -g sass
+
+# Watch your custom Sass for changes and compile it to CSS
+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).
+
+{{< 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).
+{{< /callout >}}
+
+## Including
+
+Once your CSS is compiled, you can include it in your HTML files. Inside your `index.html` you'll want to include your compiled CSS file. Be sure to update the path to your compiled CSS file if you've changed it.
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Custom Bootstrap</title>
+    <link href="/css/custom.css" rel="stylesheet">
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+  </body>
+</html>
+```
+
 ## Variable defaults
 
 Every Sass variable in Bootstrap includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap.
@@ -104,6 +146,7 @@ $body-color: #111;
 
 // Required
 @import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/variables-dark";
 @import "../node_modules/bootstrap/scss/maps";
 @import "../node_modules/bootstrap/scss/mixins";
 @import "../node_modules/bootstrap/scss/root";
@@ -117,7 +160,7 @@ $body-color: #111;
 Repeat as necessary for any variable in Bootstrap, including the global options below.
 
 {{< callout info >}}
-{{< partial "callout-info-npm-starter.md" >}}
+{{< partial "callouts/info-npm-starter.md" >}}
 {{< /callout >}}
 
 ## Maps and loops
@@ -160,18 +203,20 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
 
 ### Remove from map
 
-To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aware you must insert it between our requirements and options:
+To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aware you must insert `$theme-colors` between our requirements just after its definition in `variables` and before its usage in `maps`:
 
 ```scss
 // Required
 @import "../node_modules/bootstrap/scss/functions";
 @import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/variables-dark";
+
+$theme-colors: map-remove($theme-colors, "info", "light", "dark");
+
 @import "../node_modules/bootstrap/scss/maps";
 @import "../node_modules/bootstrap/scss/mixins";
 @import "../node_modules/bootstrap/scss/root";
 
-$theme-colors: map-remove($theme-colors, "info", "light", "dark");
-
 // Optional
 @import "../node_modules/bootstrap/scss/reboot";
 @import "../node_modules/bootstrap/scss/type";
@@ -199,6 +244,8 @@ Next to the [Sass maps]({{< docsref "/customize/color#color-sass-maps" >}}) we h
 
 You can lighten or darken colors with Bootstrap's `tint-color()` and `shade-color()` functions. These functions will mix colors with black or white, unlike Sass' native `lighten()` and `darken()` functions which will change the lightness by a fixed amount, which often doesn't lead to the desired effect.
 
+`shift-color()` combines these two functions by shading the color if the weight is positive and tinting the color if the weight is negative.
+
 {{< scss-docs name="color-functions" file="scss/_functions.scss" >}}
 
 In practice, you'd call the function and pass in the color and weight parameters.
@@ -211,13 +258,18 @@ In practice, you'd call the function and pass in the color and weight parameters
 .custom-element-2 {
   color: shade-color($danger, 30%);
 }
+
+.custom-element-3 {
+  color: shift-color($success, 40%);
+  background-color: shift-color($success, -60%);
+}
 ```
 
 ### Color contrast
 
-In order to meet [WCAG 2.0 accessibility standards for color contrast](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html), authors **must** provide [a contrast ratio of at least 4.5:1](https://www.w3.org/WAI/WCAG20/quickref/20160105/Overview.php#visual-audio-contrast-contrast), with very few exceptions.
+In order to meet the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG/) contrast requirements, authors **must** provide a minimum [text color contrast of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and a minimum [non-text color contrast of 3:1](https://www.w3.org/TR/WCAG/#non-text-contrast), with very few exceptions.
 
-An additional function we include in Bootstrap is the color contrast function, `color-contrast`. It utilizes the [WCAG 2.0 algorithm](https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests) for calculating contrast thresholds based on [relative luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance) in a `sRGB` colorspace to automatically return a light (`#fff`), dark (`#212529`) or black (`#000`) contrast color based on the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes.
+To help with this, we included the `color-contrast` function in Bootstrap. It uses the [WCAG contrast ratio algorithm](https://www.w3.org/TR/WCAG/#dfn-contrast-ratio) for calculating contrast thresholds based on [relative luminance](https://www.w3.org/TR/WCAG/#dfn-relative-luminance) in an `sRGB` color space to automatically return a light (`#fff`), dark (`#212529`) or black (`#000`) contrast color based on the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes.
 
 For example, to generate color swatches from our `$theme-colors` map:
 
@@ -293,18 +345,18 @@ Our `scss/mixins/` directory has a ton of mixins that power parts of Bootstrap a
 
 ### Color schemes
 
-A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes.
+A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light` and `dark` color schemes. See [the color modes documentation]({{< docsref "/customize/color-modes" >}}) for information on our color mode mixin.
 
 {{< scss-docs name="mixin-color-scheme" file="scss/mixins/_color-scheme.scss" >}}
 
 ```scss
 .custom-element {
-  @include color-scheme(dark) {
-    // Insert dark mode styles here
+  @include color-scheme(light) {
+    // Insert light mode styles here
   }
 
-  @include color-scheme(custom-named-scheme) {
-    // Insert custom color scheme styles here
+  @include color-scheme(dark) {
+    // Insert dark mode styles here
   }
 }
 ```
diff --git a/site/content/docs/5.3/docsref.md b/site/content/docs/5.3/docsref.md
new file mode 100644
index 000000000..5a16470c5
--- /dev/null
+++ b/site/content/docs/5.3/docsref.md
@@ -0,0 +1,50 @@
+---
+layout: docs
+title: Docs reference
+description: Examples of Bootstrap's documentation-specific components and styles.
+aliases: "/docsref/"
+toc: true
+robots: noindex,follow
+sitemap:
+  disable: true
+---
+
+## Buttons
+
+<button class="btn btn-bd-primary">Primary button</button>
+<button class="btn btn-bd-accent">Accent button</button>
+<button class="btn btn-bd-light">Light button</button>
+
+## Callouts
+
+{{< callout >}}
+  Default callout
+{{< /callout >}}
+
+{{< callout warning >}}
+  Warning callout
+{{< /callout >}}
+
+{{< callout danger >}}
+  Danger callout
+{{< /callout >}}
+
+## Code example
+
+```scss
+.test {
+  --color: blue;
+}
+```
+
+<div class="bd-example">
+  The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
+</div>
+
+{{< example >}}
+<div class="test">This is a test.</div>
+{{< /example >}}
+
+{{< scss-docs name="variable-gradient" file="scss/_variables.scss" >}}
+
+{{< js-docs name="live-toast" file="site/assets/js/partials/snippets.js" >}}
diff --git a/site/content/docs/5.3/examples/_index.md b/site/content/docs/5.3/examples/_index.md
new file mode 100644
index 000000000..75ea52010
--- /dev/null
+++ b/site/content/docs/5.3/examples/_index.md
@@ -0,0 +1,6 @@
+---
+layout: single
+title: Examples
+description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
+aliases: "/examples/"
+---
diff --git a/site/content/docs/5.1/examples/album-rtl/index.html b/site/content/docs/5.3/examples/album-rtl/index.html
index 3408056bc..bae47373a 100644
--- a/site/content/docs/5.1/examples/album-rtl/index.html
+++ b/site/content/docs/5.3/examples/album-rtl/index.html
@@ -4,16 +4,16 @@ title: مثال الألبوم
 direction: rtl
 ---
 
-<header>
-  <div class="collapse bg-dark" id="navbarHeader">
+<header data-bs-theme="dark">
+  <div class="collapse text-bg-dark" id="navbarHeader">
     <div class="container">
       <div class="row">
         <div class="col-sm-8 col-md-7 py-4">
-          <h4 class="text-white">حول</h4>
-          <p class="text-muted">أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p>
+          <h4>حول</h4>
+          <p class="text-body-secondary">أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p>
         </div>
         <div class="col-sm-4 offset-md-1 py-4">
-          <h4 class="text-white">تواصل معي</h4>
+          <h4>تواصل معي</h4>
           <ul class="list-unstyled">
             <li><a href="#" class="text-white">تابعني على تويتر</a></li>
             <li><a href="#" class="text-white">شاركني الإعجاب في فيسبوك</a></li>
@@ -42,7 +42,7 @@ direction: rtl
     <div class="row py-lg-5">
       <div class="col-lg-6 col-md-8 mx-auto">
         <h1 class="fw-light">مثال الألبوم</h1>
-        <p class="lead text-muted">وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.</p>
+        <p class="lead text-body-secondary">وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.</p>
         <p>
           <a href="#" class="btn btn-primary my-2">الدعوة الرئيسية للعمل</a>
           <a href="#" class="btn btn-secondary my-2">عمل ثانوي</a>
@@ -51,7 +51,7 @@ direction: rtl
     </div>
   </section>
 
-  <div class="album py-5 bg-light">
+  <div class="album py-5 bg-body-tertiary">
     <div class="container">
 
       <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
@@ -65,7 +65,7 @@ direction: rtl
                   <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
-                <small class="text-muted">9 دقائق</small>
+                <small class="text-body-secondary">9 دقائق</small>
               </div>
             </div>
           </div>
@@ -80,7 +80,7 @@ direction: rtl
                   <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
-                <small class="text-muted">9 دقائق</small>
+                <small class="text-body-secondary">9 دقائق</small>
               </div>
             </div>
           </div>
@@ -95,7 +95,7 @@ direction: rtl
                   <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
-                <small class="text-muted">9 دقائق</small>
+                <small class="text-body-secondary">9 دقائق</small>
               </div>
             </div>
           </div>
@@ -111,7 +111,7 @@ direction: rtl
                   <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
-                <small class="text-muted">9 دقائق</small>
+                <small class="text-body-secondary">9 دقائق</small>
               </div>
             </div>
           </div>
@@ -126,7 +126,7 @@ direction: rtl
                   <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
-                <small class="text-muted">9 دقائق</small>
+                <small class="text-body-secondary">9 دقائق</small>
               </div>
             </div>
           </div>
@@ -141,7 +141,7 @@ direction: rtl
                   <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
-                <small class="text-muted">9 دقائق</small>
+                <small class="text-body-secondary">9 دقائق</small>
               </div>
             </div>
           </div>
@@ -157,7 +157,7 @@ direction: rtl
                   <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
-                <small class="text-muted">9 دقائق</small>
+                <small class="text-body-secondary">9 دقائق</small>
               </div>
             </div>
           </div>
@@ -172,7 +172,7 @@ direction: rtl
                   <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
-                <small class="text-muted">9 دقائق</small>
+                <small class="text-body-secondary">9 دقائق</small>
               </div>
             </div>
           </div>
@@ -187,7 +187,7 @@ direction: rtl
                   <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
-                <small class="text-muted">9 دقائق</small>
+                <small class="text-body-secondary">9 دقائق</small>
               </div>
             </div>
           </div>
@@ -198,7 +198,7 @@ direction: rtl
 
 </main>
 
-<footer class="text-muted py-5">
+<footer class="text-body-secondary py-5">
   <div class="container">
     <p class="float-end mb-1">
       <a href="#">عد إلى الأعلى</a>
diff --git a/site/content/docs/5.1/examples/album/index.html b/site/content/docs/5.3/examples/album/index.html
index 2d25d726a..54b2c5bde 100644
--- a/site/content/docs/5.1/examples/album/index.html
+++ b/site/content/docs/5.3/examples/album/index.html
@@ -3,16 +3,16 @@ layout: examples
 title: Album example
 ---
 
-<header>
-  <div class="collapse bg-dark" id="navbarHeader">
+<header data-bs-theme="dark">
+  <div class="collapse text-bg-dark" id="navbarHeader">
     <div class="container">
       <div class="row">
         <div class="col-sm-8 col-md-7 py-4">
-          <h4 class="text-white">About</h4>
-          <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
+          <h4>About</h4>
+          <p class="text-body-secondary">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
         </div>
         <div class="col-sm-4 offset-md-1 py-4">
-          <h4 class="text-white">Contact</h4>
+          <h4>Contact</h4>
           <ul class="list-unstyled">
             <li><a href="#" class="text-white">Follow on Twitter</a></li>
             <li><a href="#" class="text-white">Like on Facebook</a></li>
@@ -41,7 +41,7 @@ title: Album example
     <div class="row py-lg-5">
       <div class="col-lg-6 col-md-8 mx-auto">
         <h1 class="fw-light">Album example</h1>
-        <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
+        <p class="lead text-body-secondary">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
         <p>
           <a href="#" class="btn btn-primary my-2">Main call to action</a>
           <a href="#" class="btn btn-secondary my-2">Secondary action</a>
@@ -50,7 +50,7 @@ title: Album example
     </div>
   </section>
 
-  <div class="album py-5 bg-light">
+  <div class="album py-5 bg-body-tertiary">
     <div class="container">
 
       <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
@@ -64,7 +64,7 @@ title: Album example
                   <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                 </div>
-                <small class="text-muted">9 mins</small>
+                <small class="text-body-secondary">9 mins</small>
               </div>
             </div>
           </div>
@@ -79,7 +79,7 @@ title: Album example
                   <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                 </div>
-                <small class="text-muted">9 mins</small>
+                <small class="text-body-secondary">9 mins</small>
               </div>
             </div>
           </div>
@@ -94,7 +94,7 @@ title: Album example
                   <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                 </div>
-                <small class="text-muted">9 mins</small>
+                <small class="text-body-secondary">9 mins</small>
               </div>
             </div>
           </div>
@@ -110,7 +110,7 @@ title: Album example
                   <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                 </div>
-                <small class="text-muted">9 mins</small>
+                <small class="text-body-secondary">9 mins</small>
               </div>
             </div>
           </div>
@@ -125,7 +125,7 @@ title: Album example
                   <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                 </div>
-                <small class="text-muted">9 mins</small>
+                <small class="text-body-secondary">9 mins</small>
               </div>
             </div>
           </div>
@@ -140,7 +140,7 @@ title: Album example
                   <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                 </div>
-                <small class="text-muted">9 mins</small>
+                <small class="text-body-secondary">9 mins</small>
               </div>
             </div>
           </div>
@@ -156,7 +156,7 @@ title: Album example
                   <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                 </div>
-                <small class="text-muted">9 mins</small>
+                <small class="text-body-secondary">9 mins</small>
               </div>
             </div>
           </div>
@@ -171,7 +171,7 @@ title: Album example
                   <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                 </div>
-                <small class="text-muted">9 mins</small>
+                <small class="text-body-secondary">9 mins</small>
               </div>
             </div>
           </div>
@@ -186,7 +186,7 @@ title: Album example
                   <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                 </div>
-                <small class="text-muted">9 mins</small>
+                <small class="text-body-secondary">9 mins</small>
               </div>
             </div>
           </div>
@@ -197,7 +197,7 @@ title: Album example
 
 </main>
 
-<footer class="text-muted py-5">
+<footer class="text-body-secondary py-5">
   <div class="container">
     <p class="float-end mb-1">
       <a href="#">Back to top</a>
diff --git a/site/content/docs/5.3/examples/badges/badges.css b/site/content/docs/5.3/examples/badges/badges.css
new file mode 100644
index 000000000..b6ce0f5b8
--- /dev/null
+++ b/site/content/docs/5.3/examples/badges/badges.css
@@ -0,0 +1,3 @@
+.badge > a {
+  color: inherit;
+}
diff --git a/site/content/docs/5.3/examples/badges/index.html b/site/content/docs/5.3/examples/badges/index.html
new file mode 100644
index 000000000..ad9dfbce1
--- /dev/null
+++ b/site/content/docs/5.3/examples/badges/index.html
@@ -0,0 +1,149 @@
+---
+layout: examples
+title: Badges
+extra_css:
+  - "badges.css"
+body_class: ""
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+  <symbol id="x-circle-fill" viewBox="0 0 16 16">
+    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
+  </symbol>
+</svg>
+
+<div class="d-flex gap-2 justify-content-center py-5">
+  <span class="badge text-bg-primary rounded-pill">Primary</span>
+  <span class="badge text-bg-secondary rounded-pill">Secondary</span>
+  <span class="badge text-bg-success rounded-pill">Success</span>
+  <span class="badge text-bg-danger rounded-pill">Danger</span>
+  <span class="badge text-bg-warning rounded-pill">Warning</span>
+  <span class="badge text-bg-info rounded-pill">Info</span>
+  <span class="badge text-bg-light rounded-pill">Light</span>
+  <span class="badge text-bg-dark rounded-pill">Dark</span>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="d-flex gap-2 justify-content-center py-5">
+  <span class="badge bg-primary-subtle text-primary-emphasis rounded-pill">Primary</span>
+  <span class="badge bg-secondary-subtle text-secondary-emphasis rounded-pill">Secondary</span>
+  <span class="badge bg-success-subtle text-success-emphasis rounded-pill">Success</span>
+  <span class="badge bg-danger-subtle text-danger-emphasis rounded-pill">Danger</span>
+  <span class="badge bg-warning-subtle text-warning-emphasis rounded-pill">Warning</span>
+  <span class="badge bg-info-subtle text-info-emphasis rounded-pill">Info</span>
+  <span class="badge bg-light-subtle text-light-emphasis rounded-pill">Light</span>
+  <span class="badge bg-dark-subtle text-dark-emphasis rounded-pill">Dark</span>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="d-flex gap-2 justify-content-center py-5">
+  <span class="badge bg-primary-subtle border border-primary-subtle text-primary-emphasis rounded-pill">Primary</span>
+  <span class="badge bg-secondary-subtle border border-secondary-subtle text-secondary-emphasis rounded-pill">Secondary</span>
+  <span class="badge bg-success-subtle border border-success-subtle text-success-emphasis rounded-pill">Success</span>
+  <span class="badge bg-danger-subtle border border-danger-subtle text-danger-emphasis rounded-pill">Danger</span>
+  <span class="badge bg-warning-subtle border border-warning-subtle text-warning-emphasis rounded-pill">Warning</span>
+  <span class="badge bg-info-subtle border border-info-subtle text-info-emphasis rounded-pill">Info</span>
+  <span class="badge bg-light-subtle border border-light-subtle text-light-emphasis rounded-pill">Light</span>
+  <span class="badge bg-dark-subtle border border-dark-subtle text-dark-emphasis rounded-pill">Dark</span>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="d-flex gap-2 justify-content-center py-5">
+  <span class="badge d-flex align-items-center p-1 pe-2 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Primary
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Secondary
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Success
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Danger
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Warning
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Info
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-light-subtle border border-dark-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Light
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Dark
+  </span>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="d-flex gap-2 justify-content-center py-5">
+  <span class="badge d-flex p-2 align-items-center text-bg-primary rounded-pill">
+    <span class="px-1">Primary</span>
+    <a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+  </span>
+  <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle rounded-pill">
+    <span class="px-1">Primary</span>
+    <a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+  </span>
+  <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
+    <span class="px-1">Primary</span>
+    <a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+  </span>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="d-flex gap-2 justify-content-center py-5">
+  <span class="badge d-flex align-items-center p-1 pe-2 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Primary
+    <span class="vr mx-2"></span>
+    <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Secondary
+    <span class="vr mx-2"></span>
+    <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Success
+    <span class="vr mx-2"></span>
+    <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Danger
+    <span class="vr mx-2"></span>
+    <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Warning
+    <span class="vr mx-2"></span>
+    <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Info
+    <span class="vr mx-2"></span>
+    <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-light-emphasis bg-light-subtle border border-dark-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Light
+    <span class="vr mx-2"></span>
+    <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Dark
+    <span class="vr mx-2"></span>
+    <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
+  </span>
+</div>
diff --git a/site/content/docs/5.1/examples/blog-rtl/index.html b/site/content/docs/5.3/examples/blog-rtl/index.html
index 3ce0978f3..666b748cb 100644
--- a/site/content/docs/5.1/examples/blog-rtl/index.html
+++ b/site/content/docs/5.3/examples/blog-rtl/index.html
@@ -5,17 +5,29 @@ direction: rtl
 extra_css:
   - "https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap"
   - "../blog/blog.rtl.css"
-include_js: false
 ---
 
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+  <symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
+    <circle cx="12" cy="12" r="10"/>
+    <path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/>
+  </symbol>
+  <symbol id="cart" viewBox="0 0 16 16">
+    <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+  </symbol>
+  <symbol id="chevron-right" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+  </symbol>
+</svg>
+
 <div class="container">
-  <header class="blog-header py-3">
+  <header class="border-bottom lh-1 py-3">
     <div class="row flex-nowrap justify-content-between align-items-center">
       <div class="col-4 pt-1">
         <a class="link-secondary" href="#">الإشتراك في النشرة البريدية</a>
       </div>
       <div class="col-4 text-center">
-        <a class="blog-header-logo text-dark" href="#">كبير</a>
+        <a class="blog-header-logo text-body-emphasis text-decoration-none" href="#">كبير</a>
       </div>
       <div class="col-4 d-flex justify-content-end align-items-center">
         <a class="link-secondary" href="#" aria-label="بحث">
@@ -26,30 +38,30 @@ include_js: false
     </div>
   </header>
 
-  <div class="nav-scroller py-1 mb-2">
-    <nav class="nav d-flex justify-content-between">
-      <a class="p-2 link-secondary" href="#">العالم</a>
-      <a class="p-2 link-secondary" href="#">الولايات المتحدة</a>
-      <a class="p-2 link-secondary" href="#">التقنية</a>
-      <a class="p-2 link-secondary" href="#">التصميم</a>
-      <a class="p-2 link-secondary" href="#">الحضارة</a>
-      <a class="p-2 link-secondary" href="#">المال والأعمال</a>
-      <a class="p-2 link-secondary" href="#">السياسة</a>
-      <a class="p-2 link-secondary" href="#">الرأي العام</a>
-      <a class="p-2 link-secondary" href="#">العلوم</a>
-      <a class="p-2 link-secondary" href="#">الصحة</a>
-      <a class="p-2 link-secondary" href="#">الموضة</a>
-      <a class="p-2 link-secondary" href="#">السفر</a>
+  <div class="nav-scroller py-1 mb-3 border-bottom">
+    <nav class="nav nav-underline justify-content-between">
+      <a class="nav-item nav-link link-body-emphasis active" href="#">العالم</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">الولايات المتحدة</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">التقنية</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">التصميم</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">الحضارة</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">المال والأعمال</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">السياسة</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">الرأي العام</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">العلوم</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">الصحة</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">الموضة</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">السفر</a>
     </nav>
   </div>
 </div>
 
 <main class="container">
-  <div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
-    <div class="col-md-6 px-0">
+  <div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary">
+    <div class="col-lg-6 px-0">
       <h1 class="display-4 fst-italic">عنوان تدوينة مميزة أطول</h1>
       <p class="lead my-3">عدة أسطر نصية متعددة تعبر عن التدوية، وذلك لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه التدوينة.</p>
-      <p class="lead mb-0"><a href="#" class="text-white fw-bold">أكمل القراءة...</a></p>
+      <p class="lead mb-0"><a href="#" class="text-body-emphasis fw-bold">أكمل القراءة...</a></p>
     </div>
   </div>
 
@@ -57,11 +69,14 @@ include_js: false
     <div class="col-md-6">
       <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
         <div class="col p-4 d-flex flex-column position-static">
-          <strong class="d-inline-block mb-2 text-primary">العالم</strong>
+          <strong class="d-inline-block mb-2 text-primary-emphasis">العالم</strong>
           <h3 class="mb-0">مشاركة مميزة</h3>
-          <div class="mb-1 text-muted">نوفمبر 12</div>
+          <div class="mb-1 text-body-secondary">نوفمبر 12</div>
           <p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
-          <a href="#" class="stretched-link">أكمل القراءة</a>
+          <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
+            أكمل القراءة
+            <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+          </a>
         </div>
         <div class="col-auto d-none d-lg-block">
           {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}}
@@ -71,11 +86,14 @@ include_js: false
     <div class="col-md-6">
       <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
         <div class="col p-4 d-flex flex-column position-static">
-          <strong class="d-inline-block mb-2 text-success">التصميم</strong>
+          <strong class="d-inline-block mb-2 text-success-emphasis">التصميم</strong>
           <h3 class="mb-0">عنوان الوظيفة</h3>
-          <div class="mb-1 text-muted">نوفمبر 11</div>
+          <div class="mb-1 text-body-secondary">نوفمبر 11</div>
           <p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
-          <a href="#" class="stretched-link">أكمل القراءة</a>
+          <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
+            أكمل القراءة
+            <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+          </a>
         </div>
         <div class="col-auto d-none d-lg-block">
           {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}}
@@ -84,20 +102,20 @@ include_js: false
     </div>
   </div>
 
-  <div class="row">
+  <div class="row g-5">
     <div class="col-md-8">
       <h3 class="pb-4 mb-4 fst-italic border-bottom">
         من Firehose
       </h3>
 
       <article class="blog-post">
-        <h2 class="blog-post-title">مثال على تدوينة</h2>
+        <h2 class="display-5 link-body-emphasis mb-1">مثال على تدوينة</h2>
         <p class="blog-post-meta">1 يناير 2021 بواسطة <a href="#"> Mark </a></p>
 
         <p>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد مدعومة بشكل كامل.</p>
         <hr>
         <p>يشكِّل تأمين الغذاء في المستقبل قضية تؤرِّق حكومات العالَم والعلماء على حدٍّ سواء. فخلال القرن العشرين ازداد عدد سكان الأرض أربعة أضعاف، وتشير التقديرات إلى أن العدد سوف يصل إلى عشرة مليارات إنسان بحلول عام 2050م. وسوف تمثل هذه الزيادة الهائلة تحدياً كبيراً وضغطاً متصاعداً على قدرة الإنتاج الزراعي. الأمر الذي كان ولا بد من أن يدفع إلى تطوير تقنيات مبتكرة في تصنيع الغذاء غير الزراعة، منها تقنية مستقبلية تقوم على تصنيع الغذاء من الهواء.</p>
-        <blockquote>
+        <blockquote class="blockquote">
           <p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه، كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية</p>
         </blockquote>
         <p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه. كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية، وللمقارنة فإن هذه النسبة من الانبعاثات هي أكبر مما ينتجه قطاع النقل بكل ما فيه من سيارات وشاحنات وطائرات وقطارات.</p>
@@ -126,7 +144,7 @@ include_js: false
       </article>
 
       <article class="blog-post">
-        <h2 class="blog-post-title">تدوينة أخرى</h2>
+        <h2 class="display-5 link-body-emphasis mb-1">تدوينة أخرى</h2>
         <p class="blog-post-meta">23 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p>
 
         <p>في الوقت الحالي، تدرس عدَّة شركات هذه الميكروبات بشكل أعمق، وتستزرعها من أجل الحصول على الغذاء. ففي عام 2019م، أعلن باحثون في شركة (Air Protein) الأمريكية نجاحهم في تحويل ثاني أكسيد الكربون الموجود في الهواء إلى لحوم صناعية مصنوعة من البروتين، التي لا تتطلَّب أي أرض زراعية، بل هي معتمدة بشكل أساسي على الهواء.</p>
@@ -138,7 +156,7 @@ include_js: false
       </article>
 
       <article class="blog-post">
-        <h2 class="blog-post-title">ميزة جديدة</h2>
+        <h2 class="display-5 link-body-emphasis mb-1">ميزة جديدة</h2>
         <p class="blog-post-meta">14 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p>
 
         <p>كما أن الشركة الفنلندية (Solar Foods) طوَّرت تقنية لإنتاج البروتين من الهواء، حيث تبدأ العملية بتقسيم الماء إلى مكوناته الهيدروجين والأكسجين عن طريق الكهرباء. فالهيدروجين يوفِّر الطاقة للبكتريا لتحويل ثاني أكسيد الكربون والنيتروجين الموجودين في الهواء إلى مادة عضوية غنية بالبروتين بشكل أكفأ من نمو النباتات باستخدام البناء الضوئي. وهذا البروتين يشبه دقيق القمح وقد أطلق عليه اسم "سولين" (Solein).</p>
@@ -153,19 +171,52 @@ include_js: false
       </article>
 
       <nav class="blog-pagination" aria-label="Pagination">
-        <a class="btn btn-outline-primary" href="#">تدوينات أقدم</a>
-        <a class="btn btn-outline-secondary disabled">تدوينات أحدث</a>
+        <a class="btn btn-outline-primary rounded-pill" href="#">تدوينات أقدم</a>
+        <a class="btn btn-outline-secondary rounded-pill disabled" aria-disabled="true">تدوينات أحدث</a>
       </nav>
 
     </div>
 
     <div class="col-md-4">
       <div class="position-sticky" style="top: 2rem;">
-        <div class="p-4 mb-3 bg-light rounded">
+        <div class="p-4 mb-3 bg-body-tertiary rounded">
           <h4 class="fst-italic">حول</h4>
           <p class="mb-0">أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.</p>
         </div>
 
+        <div>
+          <h4 class="fst-italic">المشاركات الاخيرة</h4>
+          <ul class="list-unstyled">
+            <li>
+              <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
+                {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
+                <div class="col-lg-8">
+                  <h6 class="mb-0">مثال على عنوان منشور المدونة</h6>
+                  <small class="text-body-secondary">15 يناير 2024</small>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
+                {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
+                <div class="col-lg-8">
+                  <h6 class="mb-0">هذا عنوان آخر للمدونة</h6>
+                  <small class="text-body-secondary">14 يناير 2024</small>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
+                {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
+                <div class="col-lg-8">
+                  <h6 class="mb-0">أطول عنوان منشور للمدونة: يحتوي هذا الخط على عدة أسطر!</h6>
+                  <small class="text-body-secondary">13 يناير 2024</small>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </div>
+
         <div class="p-4">
           <h4 class="fst-italic">الأرشيف</h4>
           <ol class="list-unstyled mb-0">
@@ -198,9 +249,9 @@ include_js: false
 
 </main>
 
-<footer class="blog-footer">
+<footer class="py-5 text-center text-body-secondary bg-body-tertiary">
   <p>تم تصميم نموذج المدونة لـ <a href="https://getbootstrap.com/">Bootstrap</a> بواسطة <a href="https://twitter.com/mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>.</p>
-  <p>
+  <p class="mb-0">
     <a href="#">عد إلى الأعلى</a>
   </p>
 </footer>
diff --git a/site/content/docs/5.3/examples/blog/blog.css b/site/content/docs/5.3/examples/blog/blog.css
new file mode 100644
index 000000000..86eedaf1d
--- /dev/null
+++ b/site/content/docs/5.3/examples/blog/blog.css
@@ -0,0 +1,39 @@
+/* stylelint-disable @stylistic/selector-list-comma-newline-after */
+
+.blog-header-logo {
+  font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
+  font-size: 2.25rem;
+}
+
+.blog-header-logo:hover {
+  text-decoration: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
+}
+
+.flex-auto {
+  flex: 0 0 auto;
+}
+
+.h-250 { height: 250px; }
+@media (min-width: 768px) {
+  .h-md-250 { height: 250px; }
+}
+
+/* Pagination */
+.blog-pagination {
+  margin-bottom: 4rem;
+}
+
+/*
+ * Blog posts
+ */
+.blog-post {
+  margin-bottom: 4rem;
+}
+.blog-post-meta {
+  margin-bottom: 1.25rem;
+  color: #727272;
+}
diff --git a/site/content/docs/5.3/examples/blog/blog.rtl.css b/site/content/docs/5.3/examples/blog/blog.rtl.css
new file mode 100644
index 000000000..bd0c9d1f0
--- /dev/null
+++ b/site/content/docs/5.3/examples/blog/blog.rtl.css
@@ -0,0 +1,39 @@
+/* stylelint-disable @stylistic/selector-list-comma-newline-after */
+
+.blog-header-logo {
+  font-family: Amiri, Georgia, "Times New Roman", serif;
+  font-size: 2.25rem;
+}
+
+.blog-header-logo:hover {
+  text-decoration: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: Amiri, Georgia, "Times New Roman", serif;
+}
+
+.flex-auto {
+  flex: 0 0 auto;
+}
+
+.h-250 { height: 250px; }
+@media (min-width: 768px) {
+  .h-md-250 { height: 250px; }
+}
+
+/* Pagination */
+.blog-pagination {
+  margin-bottom: 4rem;
+}
+
+/*
+ * Blog posts
+ */
+.blog-post {
+  margin-bottom: 4rem;
+}
+.blog-post-meta {
+  margin-bottom: 1.25rem;
+  color: #727272;
+}
diff --git a/site/content/docs/5.1/examples/blog/index.html b/site/content/docs/5.3/examples/blog/index.html
index fb5c25dfc..39535911e 100644
--- a/site/content/docs/5.1/examples/blog/index.html
+++ b/site/content/docs/5.3/examples/blog/index.html
@@ -4,17 +4,29 @@ title: Blog Template
 extra_css:
   - "https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap"
   - "blog.css"
-include_js: false
 ---
 
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+  <symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
+    <circle cx="12" cy="12" r="10"/>
+    <path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/>
+  </symbol>
+  <symbol id="cart" viewBox="0 0 16 16">
+    <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+  </symbol>
+  <symbol id="chevron-right" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+  </symbol>
+</svg>
+
 <div class="container">
-  <header class="blog-header py-3">
+  <header class="border-bottom lh-1 py-3">
     <div class="row flex-nowrap justify-content-between align-items-center">
       <div class="col-4 pt-1">
         <a class="link-secondary" href="#">Subscribe</a>
       </div>
       <div class="col-4 text-center">
-        <a class="blog-header-logo text-dark" href="#">Large</a>
+        <a class="blog-header-logo text-body-emphasis text-decoration-none" href="#">Large</a>
       </div>
       <div class="col-4 d-flex justify-content-end align-items-center">
         <a class="link-secondary" href="#" aria-label="Search">
@@ -25,30 +37,30 @@ include_js: false
     </div>
   </header>
 
-  <div class="nav-scroller py-1 mb-2">
-    <nav class="nav d-flex justify-content-between">
-      <a class="p-2 link-secondary" href="#">World</a>
-      <a class="p-2 link-secondary" href="#">U.S.</a>
-      <a class="p-2 link-secondary" href="#">Technology</a>
-      <a class="p-2 link-secondary" href="#">Design</a>
-      <a class="p-2 link-secondary" href="#">Culture</a>
-      <a class="p-2 link-secondary" href="#">Business</a>
-      <a class="p-2 link-secondary" href="#">Politics</a>
-      <a class="p-2 link-secondary" href="#">Opinion</a>
-      <a class="p-2 link-secondary" href="#">Science</a>
-      <a class="p-2 link-secondary" href="#">Health</a>
-      <a class="p-2 link-secondary" href="#">Style</a>
-      <a class="p-2 link-secondary" href="#">Travel</a>
+  <div class="nav-scroller py-1 mb-3 border-bottom">
+    <nav class="nav nav-underline justify-content-between">
+      <a class="nav-item nav-link link-body-emphasis active" href="#">World</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">U.S.</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">Technology</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">Design</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">Culture</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">Business</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">Politics</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">Opinion</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">Science</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">Health</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">Style</a>
+      <a class="nav-item nav-link link-body-emphasis" href="#">Travel</a>
     </nav>
   </div>
 </div>
 
 <main class="container">
-  <div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
-    <div class="col-md-6 px-0">
+  <div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary">
+    <div class="col-lg-6 px-0">
       <h1 class="display-4 fst-italic">Title of a longer featured blog post</h1>
       <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
-      <p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
+      <p class="lead mb-0"><a href="#" class="text-body-emphasis fw-bold">Continue reading...</a></p>
     </div>
   </div>
 
@@ -56,11 +68,14 @@ include_js: false
     <div class="col-md-6">
       <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
         <div class="col p-4 d-flex flex-column position-static">
-          <strong class="d-inline-block mb-2 text-primary">World</strong>
+          <strong class="d-inline-block mb-2 text-primary-emphasis">World</strong>
           <h3 class="mb-0">Featured post</h3>
-          <div class="mb-1 text-muted">Nov 12</div>
+          <div class="mb-1 text-body-secondary">Nov 12</div>
           <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
-          <a href="#" class="stretched-link">Continue reading</a>
+          <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
+            Continue reading
+            <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+          </a>
         </div>
         <div class="col-auto d-none d-lg-block">
           {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
@@ -70,11 +85,14 @@ include_js: false
     <div class="col-md-6">
       <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
         <div class="col p-4 d-flex flex-column position-static">
-          <strong class="d-inline-block mb-2 text-success">Design</strong>
+          <strong class="d-inline-block mb-2 text-success-emphasis">Design</strong>
           <h3 class="mb-0">Post title</h3>
-          <div class="mb-1 text-muted">Nov 11</div>
+          <div class="mb-1 text-body-secondary">Nov 11</div>
           <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
-          <a href="#" class="stretched-link">Continue reading</a>
+          <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
+            Continue reading
+            <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+          </a>
         </div>
         <div class="col-auto d-none d-lg-block">
           {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
@@ -90,7 +108,7 @@ include_js: false
       </h3>
 
       <article class="blog-post">
-        <h2 class="blog-post-title">Sample blog post</h2>
+        <h2 class="display-5 link-body-emphasis mb-1">Sample blog post</h2>
         <p class="blog-post-meta">January 1, 2021 by <a href="#">Mark</a></p>
 
         <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.</p>
@@ -129,7 +147,7 @@ include_js: false
         <ul>
           <li><strong>To bold text</strong>, use <code class="language-plaintext highlighter-rouge">&lt;strong&gt;</code>.</li>
           <li><em>To italicize text</em>, use <code class="language-plaintext highlighter-rouge">&lt;em&gt;</code>.</li>
-          <li>Abbreviations, like <abbr title="HyperText Markup Langage">HTML</abbr> should use <code class="language-plaintext highlighter-rouge">&lt;abbr&gt;</code>, with an optional <code class="language-plaintext highlighter-rouge">title</code> attribute for the full phrase.</li>
+          <li>Abbreviations, like <abbr title="HyperText Markup Language">HTML</abbr> should use <code class="language-plaintext highlighter-rouge">&lt;abbr&gt;</code>, with an optional <code class="language-plaintext highlighter-rouge">title</code> attribute for the full phrase.</li>
           <li>Citations, like <cite>— Mark Otto</cite>, should use <code class="language-plaintext highlighter-rouge">&lt;cite&gt;</code>.</li>
           <li><del>Deleted</del> text should use <code class="language-plaintext highlighter-rouge">&lt;del&gt;</code> and <ins>inserted</ins> text should use <code class="language-plaintext highlighter-rouge">&lt;ins&gt;</code>.</li>
           <li>Superscript <sup>text</sup> uses <code class="language-plaintext highlighter-rouge">&lt;sup&gt;</code> and subscript <sub>text</sub> uses <code class="language-plaintext highlighter-rouge">&lt;sub&gt;</code>.</li>
@@ -144,7 +162,7 @@ include_js: false
       </article>
 
       <article class="blog-post">
-        <h2 class="blog-post-title">Another blog post</h2>
+        <h2 class="display-5 link-body-emphasis mb-1">Another blog post</h2>
         <p class="blog-post-meta">December 23, 2020 by <a href="#">Jacob</a></p>
 
         <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
@@ -192,7 +210,7 @@ include_js: false
       </article>
 
       <article class="blog-post">
-        <h2 class="blog-post-title">New feature</h2>
+        <h2 class="display-5 link-body-emphasis mb-1">New feature</h2>
         <p class="blog-post-meta">December 14, 2020 by <a href="#">Chris</a></p>
 
         <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
@@ -205,19 +223,52 @@ include_js: false
       </article>
 
       <nav class="blog-pagination" aria-label="Pagination">
-        <a class="btn btn-outline-primary" href="#">Older</a>
-        <a class="btn btn-outline-secondary disabled">Newer</a>
+        <a class="btn btn-outline-primary rounded-pill" href="#">Older</a>
+        <a class="btn btn-outline-secondary rounded-pill disabled" aria-disabled="true">Newer</a>
       </nav>
 
     </div>
 
     <div class="col-md-4">
       <div class="position-sticky" style="top: 2rem;">
-        <div class="p-4 mb-3 bg-light rounded">
+        <div class="p-4 mb-3 bg-body-tertiary rounded">
           <h4 class="fst-italic">About</h4>
           <p class="mb-0">Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.</p>
         </div>
 
+        <div>
+          <h4 class="fst-italic">Recent posts</h4>
+          <ul class="list-unstyled">
+            <li>
+              <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
+                {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
+                <div class="col-lg-8">
+                  <h6 class="mb-0">Example blog post title</h6>
+                  <small class="text-body-secondary">January 15, 2024</small>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
+                {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
+                <div class="col-lg-8">
+                  <h6 class="mb-0">This is another blog post title</h6>
+                  <small class="text-body-secondary">January 14, 2024</small>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
+                {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
+                <div class="col-lg-8">
+                  <h6 class="mb-0">Longer blog post title: This one has multiple lines!</h6>
+                  <small class="text-body-secondary">January 13, 2024</small>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </div>
+
         <div class="p-4">
           <h4 class="fst-italic">Archives</h4>
           <ol class="list-unstyled mb-0">
@@ -250,9 +301,9 @@ include_js: false
 
 </main>
 
-<footer class="blog-footer">
+<footer class="py-5 text-center text-body-secondary bg-body-tertiary">
   <p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
-  <p>
+  <p class="mb-0">
     <a href="#">Back to top</a>
   </p>
 </footer>
diff --git a/site/content/docs/5.3/examples/breadcrumbs/breadcrumbs.css b/site/content/docs/5.3/examples/breadcrumbs/breadcrumbs.css
new file mode 100644
index 000000000..a6be55861
--- /dev/null
+++ b/site/content/docs/5.3/examples/breadcrumbs/breadcrumbs.css
@@ -0,0 +1,50 @@
+.breadcrumb-chevron {
+  --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+  gap: .5rem;
+}
+.breadcrumb-chevron .breadcrumb-item {
+  display: flex;
+  gap: inherit;
+  align-items: center;
+  padding-left: 0;
+  line-height: 1;
+}
+.breadcrumb-chevron .breadcrumb-item::before {
+  gap: inherit;
+  float: none;
+  width: 1rem;
+  height: 1rem;
+}
+
+.breadcrumb-custom .breadcrumb-item {
+  position: relative;
+  flex-grow: 1;
+  padding: .75rem 3rem;
+}
+.breadcrumb-custom .breadcrumb-item::before {
+  display: none;
+}
+.breadcrumb-custom .breadcrumb-item::after {
+  position: absolute;
+  top: 50%;
+  right: -25px;
+  z-index: 1;
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  margin-top: -25px;
+  content: "";
+  background-color: var(--bs-tertiary-bg);
+  border-top-right-radius: .5rem;
+  box-shadow: 1px -1px var(--bs-border-color);
+  transform: scale(.707) rotate(45deg);
+}
+.breadcrumb-custom .breadcrumb-item:first-child {
+  padding-left: 1.5rem;
+}
+.breadcrumb-custom .breadcrumb-item:last-child {
+  padding-right: 1.5rem;
+}
+.breadcrumb-custom .breadcrumb-item:last-child::after {
+  display: none;
+}
diff --git a/site/content/docs/5.3/examples/breadcrumbs/index.html b/site/content/docs/5.3/examples/breadcrumbs/index.html
new file mode 100644
index 000000000..74a042bc0
--- /dev/null
+++ b/site/content/docs/5.3/examples/breadcrumbs/index.html
@@ -0,0 +1,88 @@
+---
+layout: examples
+title: Breadcrumbs
+extra_css:
+  - "breadcrumbs.css"
+body_class: ""
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+  <symbol id="house-door-fill" viewBox="0 0 16 16">
+    <path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z"/>
+  </symbol>
+</svg>
+
+<div class="container my-5">
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb p-3 bg-body-tertiary rounded-3">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item"><a href="#">Library</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Data</li>
+    </ol>
+  </nav>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="container my-5">
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb p-3 bg-body-tertiary rounded-3">
+      <li class="breadcrumb-item">
+        <a class="link-body-emphasis" href="#">
+          <svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg>
+          <span class="visually-hidden">Home</span>
+        </a>
+      </li>
+      <li class="breadcrumb-item">
+        <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Library</a>
+      </li>
+      <li class="breadcrumb-item active" aria-current="page">
+        Data
+      </li>
+    </ol>
+  </nav>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="container my-5">
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3">
+      <li class="breadcrumb-item">
+        <a class="link-body-emphasis" href="#">
+          <svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg>
+          <span class="visually-hidden">Home</span>
+        </a>
+      </li>
+      <li class="breadcrumb-item">
+        <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Library</a>
+      </li>
+      <li class="breadcrumb-item active" aria-current="page">
+        Data
+      </li>
+    </ol>
+  </nav>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="container my-5">
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
+      <li class="breadcrumb-item">
+        <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">
+          <svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg>
+          Home
+        </a>
+      </li>
+      <li class="breadcrumb-item">
+        <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Library</a>
+      </li>
+      <li class="breadcrumb-item active" aria-current="page">
+        Data
+      </li>
+    </ol>
+  </nav>
+</div>
+
+<div class="b-example-divider"></div>
diff --git a/site/content/docs/5.3/examples/buttons/index.html b/site/content/docs/5.3/examples/buttons/index.html
new file mode 100644
index 000000000..54dbbe30a
--- /dev/null
+++ b/site/content/docs/5.3/examples/buttons/index.html
@@ -0,0 +1,88 @@
+---
+layout: examples
+title: Buttons
+body_class: ""
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+  <symbol id="arrow-right-short" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
+  </symbol>
+  <symbol id="x-lg" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z"/>
+    <path fill-rule="evenodd" d="M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z"/>
+  </symbol>
+</svg>
+
+<div class="d-flex gap-2 justify-content-center py-5">
+  <button class="btn btn-primary rounded-pill px-3" type="button">Primary</button>
+  <button class="btn btn-secondary rounded-pill px-3" type="button">Secondary</button>
+  <button class="btn btn-success rounded-pill px-3" type="button">Success</button>
+  <button class="btn btn-danger rounded-pill px-3" type="button">Danger</button>
+  <button class="btn btn-warning rounded-pill px-3" type="button">Warning</button>
+  <button class="btn btn-info rounded-pill px-3" type="button">Info</button>
+  <button class="btn btn-light rounded-pill px-3" type="button">Light</button>
+  <button class="btn btn-dark rounded-pill px-3" type="button">Dark</button>
+  <button class="btn btn-link rounded-pill px-3" type="button">Link</button>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="col-lg-6 col-xxl-4 my-5 mx-auto">
+  <div class="d-grid gap-2">
+    <button class="btn btn-outline-secondary" type="button">Secondary action</button>
+    <button class="btn btn-primary" type="button">Primary action</button>
+  </div>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="d-flex gap-2 justify-content-center py-5">
+  <button class="btn btn-primary d-inline-flex align-items-center" type="button">
+    Primary icon
+    <svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
+  </button>
+  <button class="btn btn-outline-secondary d-inline-flex align-items-center" type="button">
+    Secondary icon
+    <svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
+  </button>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="d-flex gap-2 justify-content-center py-5">
+  <button class="btn btn-primary" type="button" disabled>
+    <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+    <span class="visually-hidden" role="status">Loading...</span>
+  </button>
+  <button class="btn btn-primary" type="button" disabled>
+    <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+    <span role="status">Loading...</span>
+  </button>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="d-flex gap-2 justify-content-center pt-5 pb-4">
+  <button class="btn btn-primary rounded-circle p-2 lh-1" type="button">
+    <svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg>
+    <span class="visually-hidden">Dismiss</span>
+  </button>
+  <button class="btn btn-outline-primary rounded-circle p-2 lh-1" type="button">
+    <svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg>
+    <span class="visually-hidden">Dismiss</span>
+  </button>
+</div>
+
+<div class="d-flex gap-2 justify-content-center pb-5">
+  <button class="btn btn-primary rounded-circle p-3 lh-1" type="button">
+    <svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg>
+    <span class="visually-hidden">Dismiss</span>
+  </button>
+  <button class="btn btn-outline-primary rounded-circle p-3 lh-1" type="button">
+    <svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg>
+    <span class="visually-hidden">Dismiss</span>
+  </button>
+</div>
+
+<div class="b-example-divider"></div>
diff --git a/site/content/docs/5.1/examples/carousel-rtl/index.html b/site/content/docs/5.3/examples/carousel-rtl/index.html
index b29ea863e..37d844e6f 100644
--- a/site/content/docs/5.1/examples/carousel-rtl/index.html
+++ b/site/content/docs/5.3/examples/carousel-rtl/index.html
@@ -6,7 +6,7 @@ extra_css:
   - "../carousel/carousel.rtl.css"
 ---
 
-<header>
+<header data-bs-theme="dark">
   <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">شرائح العرض</a>
@@ -22,7 +22,7 @@ extra_css:
             <a class="nav-link" href="#">حلقة الوصل</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link disabled">رابط غير مفعل</a>
+            <a class="nav-link disabled" aria-disabled="true">رابط غير مفعل</a>
           </li>
         </ul>
         <form class="d-flex" role="search">
@@ -36,7 +36,7 @@ extra_css:
 
 <main>
 
-  <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
+  <div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
     <div class="carousel-indicators">
       <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
       <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
@@ -44,17 +44,17 @@ extra_css:
     </div>
     <div class="carousel-inner">
       <div class="carousel-item active">
-        {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+        {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
         <div class="container">
           <div class="carousel-caption text-start">
             <h1>عنوان المثال.</h1>
-            <p>تشير الدراسات الإحصائية حسب الجمعية الأمريكية للغات بأن الإقبال على العربية زاد %126 في الولايات المتحدة الأمريكية وحدها بين عامي 2002 و2009م.</p>
+            <p class="opacity-75">تشير الدراسات الإحصائية حسب الجمعية الأمريكية للغات بأن الإقبال على العربية زاد %126 في الولايات المتحدة الأمريكية وحدها بين عامي 2002 و2009م.</p>
             <p><a class="btn btn-lg btn-primary" href="#">سجل اليوم</a></p>
           </div>
         </div>
       </div>
       <div class="carousel-item">
-        {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+        {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
         <div class="container">
           <div class="carousel-caption">
             <h1>عنوان مثال آخر.</h1>
@@ -64,7 +64,7 @@ extra_css:
         </div>
       </div>
       <div class="carousel-item">
-        {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+        {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
         <div class="container">
           <div class="carousel-caption text-end">
             <h1>واحد أكثر لقياس جيد.</h1>
@@ -94,20 +94,20 @@ extra_css:
     <!-- Three columns of text below the carousel -->
     <div class="row">
       <div class="col-lg-4">
-        {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
-        <h2>عنوان</h2>
+        {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
+        <h2 class="fw-normal">عنوان</h2>
         <p>تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على التحليل، والقدرة على التأليف، والاستدلال المنطقي.</p>
         <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
-        {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
-        <h2>عنوان آخر</h2>
+        {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
+        <h2 class="fw-normal">عنوان آخر</h2>
         <p>إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية، والمعالجة النحوية، والمعالجة الدلالية.</p>
         <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
-        {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
-        <h2>عنوان ثالث لتأكيد المعلومة</h2>
+        {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
+        <h2 class="fw-normal">عنوان ثالث لتأكيد المعلومة</h2>
         <p>بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.</p>
         <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
       </div><!-- /.col-lg-4 -->
@@ -120,11 +120,11 @@ extra_css:
 
     <div class="row featurette">
       <div class="col-md-7">
-        <h2 class="featurette-heading">العنوان الأول المميز. <span class="text-muted"> سيذهل عقلك. </span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">العنوان الأول المميز. <span class="text-body-secondary"> سيذهل عقلك. </span></h2>
         <p class="lead">وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.</p>
       </div>
       <div class="col-md-5">
-        {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+        {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
       </div>
     </div>
 
@@ -132,11 +132,11 @@ extra_css:
 
     <div class="row featurette">
       <div class="col-md-7 order-md-2">
-        <h2 class="featurette-heading">أوه نعم، هذا جيد. <span class="text-muted"> شاهد بنفسك. </span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">أوه نعم، هذا جيد. <span class="text-body-secondary"> شاهد بنفسك. </span></h2>
         <p class="lead">عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.</p>
       </div>
       <div class="col-md-5 order-md-1">
-        {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+        {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
       </div>
     </div>
 
@@ -144,11 +144,11 @@ extra_css:
 
     <div class="row featurette">
       <div class="col-md-7">
-        <h2 class="featurette-heading">وأخيرًا، هذا. <span class="text-muted"> كش ملك. </span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">وأخيرًا، هذا. <span class="text-body-secondary"> كش ملك. </span></h2>
         <p class="lead">إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ</p>
       </div>
       <div class="col-md-5">
-        {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+        {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
       </div>
     </div>
 
diff --git a/site/content/docs/5.1/examples/carousel/carousel.rtl.css b/site/content/docs/5.3/examples/carousel/carousel.css
index 853640b97..be0af524a 100644
--- a/site/content/docs/5.1/examples/carousel/carousel.rtl.css
+++ b/site/content/docs/5.3/examples/carousel/carousel.css
@@ -5,7 +5,7 @@
 body {
   padding-top: 3rem;
   padding-bottom: 3rem;
-  color: #5a5a5a;
+  color: rgb(var(--bs-tertiary-color-rgb));
 }
 
 
@@ -26,13 +26,6 @@ body {
 .carousel-item {
   height: 32rem;
 }
-.carousel-item > img {
-  position: absolute;
-  top: 0;
-  right: 0;
-  min-width: 100%;
-  height: 32rem;
-}
 
 
 /* MARKETING CONTENT
@@ -43,13 +36,12 @@ body {
   margin-bottom: 1.5rem;
   text-align: center;
 }
-.marketing h2 {
-  font-weight: 400;
-}
+/* rtl:begin:ignore */
 .marketing .col-lg-4 p {
   margin-right: .75rem;
   margin-left: .75rem;
 }
+/* rtl:end:ignore */
 
 
 /* Featurettes
@@ -60,11 +52,12 @@ body {
 }
 
 /* Thin out the marketing headings */
+/* rtl:begin:remove */
 .featurette-heading {
-  font-weight: 300;
-  line-height: 1;
+  letter-spacing: -.05rem;
 }
 
+/* rtl:end:remove */
 
 /* RESPONSIVE CSS
 -------------------------------------------------- */
diff --git a/site/content/docs/5.1/examples/carousel/carousel.css b/site/content/docs/5.3/examples/carousel/carousel.rtl.css
index f91faec76..9ff275d4e 100644
--- a/site/content/docs/5.1/examples/carousel/carousel.css
+++ b/site/content/docs/5.3/examples/carousel/carousel.rtl.css
@@ -5,7 +5,7 @@
 body {
   padding-top: 3rem;
   padding-bottom: 3rem;
-  color: #5a5a5a;
+  color: rgb(var(--bs-tertiary-color-rgb));
 }
 
 
@@ -26,13 +26,6 @@ body {
 .carousel-item {
   height: 32rem;
 }
-.carousel-item > img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  min-width: 100%;
-  height: 32rem;
-}
 
 
 /* MARKETING CONTENT
@@ -43,15 +36,10 @@ body {
   margin-bottom: 1.5rem;
   text-align: center;
 }
-.marketing h2 {
-  font-weight: 400;
-}
-/* rtl:begin:ignore */
 .marketing .col-lg-4 p {
   margin-right: .75rem;
   margin-left: .75rem;
 }
-/* rtl:end:ignore */
 
 
 /* Featurettes
@@ -62,13 +50,6 @@ body {
 }
 
 /* Thin out the marketing headings */
-.featurette-heading {
-  font-weight: 300;
-  line-height: 1;
-  /* rtl:remove */
-  letter-spacing: -.05rem;
-}
-
 
 /* RESPONSIVE CSS
 -------------------------------------------------- */
diff --git a/site/content/docs/5.1/examples/carousel/index.html b/site/content/docs/5.3/examples/carousel/index.html
index e27c6b73a..c76fec220 100644
--- a/site/content/docs/5.1/examples/carousel/index.html
+++ b/site/content/docs/5.3/examples/carousel/index.html
@@ -5,7 +5,7 @@ extra_css:
   - "carousel.css"
 ---
 
-<header>
+<header data-bs-theme="dark">
   <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Carousel</a>
@@ -21,7 +21,7 @@ extra_css:
             <a class="nav-link" href="#">Link</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link disabled">Disabled</a>
+            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
         </ul>
         <form class="d-flex" role="search">
@@ -35,7 +35,7 @@ extra_css:
 
 <main>
 
-  <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
+  <div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
     <div class="carousel-indicators">
       <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
       <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
@@ -43,17 +43,17 @@ extra_css:
     </div>
     <div class="carousel-inner">
       <div class="carousel-item active">
-        {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+        {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
         <div class="container">
           <div class="carousel-caption text-start">
             <h1>Example headline.</h1>
-            <p>Some representative placeholder content for the first slide of the carousel.</p>
+            <p class="opacity-75">Some representative placeholder content for the first slide of the carousel.</p>
             <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
           </div>
         </div>
       </div>
       <div class="carousel-item">
-        {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+        {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
         <div class="container">
           <div class="carousel-caption">
             <h1>Another example headline.</h1>
@@ -63,7 +63,7 @@ extra_css:
         </div>
       </div>
       <div class="carousel-item">
-        {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
+        {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
         <div class="container">
           <div class="carousel-caption text-end">
             <h1>One more for good measure.</h1>
@@ -93,20 +93,20 @@ extra_css:
     <!-- Three columns of text below the carousel -->
     <div class="row">
       <div class="col-lg-4">
-        {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
-        <h2>Heading</h2>
+        {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
+        <h2 class="fw-normal">Heading</h2>
         <p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
         <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
-        {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
-        <h2>Heading</h2>
+        {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
+        <h2 class="fw-normal">Heading</h2>
         <p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
         <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
-        {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
-        <h2>Heading</h2>
+        {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
+        <h2 class="fw-normal">Heading</h2>
         <p>And lastly this, the third column of representative placeholder content.</p>
         <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
       </div><!-- /.col-lg-4 -->
@@ -119,11 +119,11 @@ extra_css:
 
     <div class="row featurette">
       <div class="col-md-7">
-        <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">First featurette heading. <span class="text-body-secondary">It’ll blow your mind.</span></h2>
         <p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
       </div>
       <div class="col-md-5">
-        {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+        {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
       </div>
     </div>
 
@@ -131,11 +131,11 @@ extra_css:
 
     <div class="row featurette">
       <div class="col-md-7 order-md-2">
-        <h2 class="featurette-heading">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">Oh yeah, it’s that good. <span class="text-body-secondary">See for yourself.</span></h2>
         <p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
       </div>
       <div class="col-md-5 order-md-1">
-        {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+        {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
       </div>
     </div>
 
@@ -143,11 +143,11 @@ extra_css:
 
     <div class="row featurette">
       <div class="col-md-7">
-        <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">And lastly, this one. <span class="text-body-secondary">Checkmate.</span></h2>
         <p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
       </div>
       <div class="col-md-5">
-        {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+        {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
       </div>
     </div>
 
diff --git a/site/content/docs/5.1/examples/cheatsheet-rtl/index.html b/site/content/docs/5.3/examples/cheatsheet-rtl/index.html
index 581686545..544c5e886 100644
--- a/site/content/docs/5.1/examples/cheatsheet-rtl/index.html
+++ b/site/content/docs/5.3/examples/cheatsheet-rtl/index.html
@@ -5,72 +5,73 @@ extra_css:
   - "../cheatsheet/cheatsheet.rtl.css"
 extra_js:
   - src: "../cheatsheet/cheatsheet.js"
-body_class: "bg-light"
+    defer: true
+body_class: "bg-body-tertiary"
 direction: rtl
 ---
 
 <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/5.1/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>
   </div>
 </header>
-<aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-2">
+<aside class="bd-aside sticky-xl-top text-body-secondary align-self-start mb-3 mb-xl-5 px-2">
   <h2 class="h6 pt-4 pb-3 mb-4 border-bottom">على هذه الصفحة</h2>
   <nav class="small" id="toc">
     <ul class="list-unstyled">
       <li class="my-2">
-        <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">المحتوى</button>
+        <button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">المحتوى</button>
         <ul class="list-unstyled ps-3 collapse" id="contents-collapse">
-          <li><a class="d-inline-flex align-items-center rounded" href="#typography">النصوص</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#images">الصور</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#tables">الجداول</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#figures">النماذج البيانية</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#typography">النصوص</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#images">الصور</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#tables">الجداول</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#figures">النماذج البيانية</a></li>
         </ul>
       </li>
       <li class="my-2">
-        <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">النماذج</button>
+        <button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">النماذج</button>
         <ul class="list-unstyled ps-3 collapse" id="forms-collapse">
-          <li><a class="d-inline-flex align-items-center rounded" href="#overview">نظرة عامة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#disabled-forms">الحقول المعطلة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#sizing">الأحجام</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#input-group">مجموعة الإدخال</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">الحقول ذوي العناوين العائمة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#validation">التحقق</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#overview">نظرة عامة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#disabled-forms">الحقول المعطلة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#sizing">الأحجام</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#input-group">مجموعة الإدخال</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#floating-labels">الحقول ذوي العناوين العائمة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#validation">التحقق</a></li>
         </ul>
       </li>
       <li class="my-2">
-        <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">مكونات</button>
+        <button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">مكونات</button>
         <ul class="list-unstyled ps-3 collapse" id="components-collapse">
-          <li><a class="d-inline-flex align-items-center rounded" href="#accordion">المطوية</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#alerts">الإنذارات</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#badge">الشارة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">مسار التنقل التفصيلي</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#buttons">الأزرار</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#button-group">مجموعة الأزرار</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#card">البطاقة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#carousel">شرائح العرض</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">القوائم المنسدلة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#list-group">مجموعة العناصر</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#modal">الصندوق العائم</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#navs">التنقل</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#navbar">شريط التنقل</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#pagination">ترقيم الصفحات</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#popovers">الصناديق المنبثقة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#progress">شريط التقدم</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">المخطوطة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#spinners">الدوائر المتحركة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#toasts">الإشعارات</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#tooltips">التلميحات</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#accordion">المطوية</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#alerts">الإنذارات</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#badge">الشارة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#breadcrumb">مسار التنقل التفصيلي</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#buttons">الأزرار</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#button-group">مجموعة الأزرار</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#card">البطاقة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#carousel">شرائح العرض</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#dropdowns">القوائم المنسدلة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#list-group">مجموعة العناصر</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#modal">الصندوق العائم</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#navs">التنقل</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#navbar">شريط التنقل</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#pagination">ترقيم الصفحات</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#popovers">الصناديق المنبثقة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#progress">شريط التقدم</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#scrollspy">المخطوطة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#spinners">الدوائر المتحركة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#toasts">الإشعارات</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#tooltips">التلميحات</a></li>
         </ul>
       </li>
     </ul>
   </nav>
 </aside>
-<div class="bd-cheatsheet container-fluid bg-body">
+<main class="bd-cheatsheet container-fluid bg-body">
   <section id="content">
     <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">المحتوى</h2>
 
@@ -117,6 +118,10 @@ direction: rtl
         {{< /example >}}
 
         {{< example show_markup="false" >}}
+        <hr>
+        {{< /example >}}
+
+        {{< example show_markup="false" >}}
         <blockquote class="blockquote">
           <p>إقتباس مبهر، موضوع في عنصر blockquote</p>
           <footer class="blockquote-footer">شخص مشهور في <cite title= "عنوان المصدر"> عنوان المصدر </cite></footer>
@@ -335,6 +340,15 @@ direction: rtl
             <label for="exampleInputPassword1" class="form-label">كلمة السر</label>
             <input type="password" class="form-control" id="exampleInputPassword1">
           </div>
+          <div class="mb-3">
+            <label for="exampleSelect" class="form-label">قائمة اختيار</label>
+            <select class="form-select" id="exampleSelect">
+              <option selected>افتح قائمة الاختيار هذه</option>
+              <option value="1">واحد</option>
+              <option value="2">اثنان</option>
+              <option value="3">ثلاثة</option>
+            </select>
+          </div>
           <div class="mb-3 form-check">
             <input type="checkbox" class="form-check-input" id="exampleCheck1">
             <label class="form-check-label" for="exampleCheck1">اخترني</label>
@@ -436,7 +450,7 @@ direction: rtl
           <input class="form-control form-control-lg" type="text" placeholder="حقل إدخال كبير" aria-label=".form-control-lg مثال">
         </div>
         <div class="mb-3">
-          <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg مثال">
+          <select class="form-select form-select-lg" aria-label=".form-select-lg مثال">
             <option selected>افتح قائمة الاختيار هذه</option>
             <option value="1">واحد</option>
             <option value="2">اثنان</option>
@@ -610,38 +624,38 @@ direction: rtl
         {{< example show_markup="false" >}}
         <div class="accordion" id="accordionExample">
           <div class="accordion-item">
-            <h4 class="accordion-header" id="headingOne">
+            <h4 class="accordion-header">
               <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                 عنصر المطوية الأول
               </button>
             </h4>
-            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+            <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
               <div class="accordion-body">
-                <strong>هذا هو محتوى عنصر المطوية الأول.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootsrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
+                <strong>هذا هو محتوى عنصر المطوية الأول.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
               </div>
             </div>
           </div>
           <div class="accordion-item">
-            <h4 class="accordion-header" id="headingTwo">
+            <h4 class="accordion-header">
               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                 عنصر المطوية الثاني
               </button>
             </h4>
-            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
+            <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
               <div class="accordion-body">
-                <strong>هذا هو محتوى عنصر المطوية الثاني.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootsrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
+                <strong>هذا هو محتوى عنصر المطوية الثاني.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
               </div>
             </div>
           </div>
           <div class="accordion-item">
-            <h4 class="accordion-header" id="headingThree">
+            <h4 class="accordion-header">
               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                 عنصر المطوية الثالث
               </button>
             </h4>
-            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+            <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
               <div class="accordion-body">
-                <strong>هذا هو محتوى عنصر المطوية الثالث.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootsrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
+                <strong>هذا هو محتوى عنصر المطوية الثالث.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
               </div>
             </div>
           </div>
@@ -688,16 +702,16 @@ direction: rtl
         <p class="h2">مثال على عنوان <span class="badge bg-secondary">جديد</span></p>
         <p class="h3">مثال على عنوان <span class="badge bg-success">جديد</span></p>
         <p class="h4">مثال على عنوان <span class="badge bg-danger">جديد</span></p>
-        <p class="h5">مثال على عنوان <span class="badge bg-warning text-dark">جديد</span></p>
-        <p class="h6">مثال على عنوان <span class="badge bg-info text-dark">جديد</span></p>
-        <p class="h6">مثال على عنوان <span class="badge bg-light text-dark">جديد</span></p>
+        <p class="h5">مثال على عنوان <span class="badge text-bg-warning">جديد</span></p>
+        <p class="h6">مثال على عنوان <span class="badge text-bg-info">جديد</span></p>
+        <p class="h6">مثال على عنوان <span class="badge text-bg-light">جديد</span></p>
         <p class="h6">مثال على عنوان <span class="badge bg-dark">جديد</span></p>
         {{< /example >}}
 
         {{< example show_markup="false" >}}
         {{< badge.inline >}}
         {{- range (index $.Site.Data "theme-colors") }}
-        <span class="badge rounded-pill bg-{{ .name }}{{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }} text-dark{{ end }}">{{ .name | title }}</span>{{- end -}}
+        <span class="badge rounded-pill {{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }}text-{{ end }}bg-{{ .name }}">{{ .name | title }}</span>{{- end -}}
         {{< /badge.inline >}}
         {{< /example >}}
       </div>
@@ -808,7 +822,7 @@ direction: rtl
                 <p class="card-text">بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p>
                 <a href="#" class="btn btn-primary">اذهب لمكان ما</a>
               </div>
-              <div class="card-footer text-muted">
+              <div class="card-footer text-body-secondary">
                 منذ يومان
               </div>
             </div>
@@ -840,7 +854,7 @@ direction: rtl
                   <div class="card-body">
                     <h5 class="card-title">عنوان البطاقة</h5>
                     <p class="card-text">هذه بطاقة أعرض مع نص داعم تحتها كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
-                    <p class="card-text"><small class="text-muted">آخر تحديث منذ 3 دقائق</small></p>
+                    <p class="card-text"><small class="text-body-secondary">آخر تحديث منذ 3 دقائق</small></p>
                   </div>
                 </div>
               </div>
@@ -909,10 +923,10 @@ direction: rtl
         {{< example show_markup="false" >}}
         <div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
           <div class="dropdown">
-            <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButtonSM" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               زر القائمة المنسدلة
             </button>
-            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSM">
+            <ul class="dropdown-menu">
               <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
               <li><a class="dropdown-item" href="#">عمل</a></li>
               <li><a class="dropdown-item" href="#">عمل آخر</a></li>
@@ -922,10 +936,10 @@ direction: rtl
             </ul>
           </div>
           <div class="dropdown">
-            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               زر القائمة المنسدلة
             </button>
-            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+            <ul class="dropdown-menu">
               <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
               <li><a class="dropdown-item" href="#">عمل</a></li>
               <li><a class="dropdown-item" href="#">عمل آخر</a></li>
@@ -935,10 +949,10 @@ direction: rtl
             </ul>
           </div>
           <div class="dropdown">
-            <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" id="dropdownMenuButtonLG" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               زر القائمة المنسدلة
             </button>
-            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLG">
+            <ul class="dropdown-menu">
               <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
               <li><a class="dropdown-item" href="#">عمل</a></li>
               <li><a class="dropdown-item" href="#">عمل آخر</a></li>
@@ -1022,10 +1036,10 @@ direction: rtl
         {{< example show_markup="false" >}}
         <div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
           <div class="dropend">
-            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               زر القائمة المنسدلة لليسار
             </button>
-            <ul class="dropdown-menu" aria-labelledby="dropendMenuButton">
+            <ul class="dropdown-menu">
               <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
               <li><a class="dropdown-item" href="#">عمل</a></li>
               <li><a class="dropdown-item" href="#">عمل آخر</a></li>
@@ -1035,10 +1049,10 @@ direction: rtl
             </ul>
           </div>
           <div class="dropup">
-            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               زر القائمة المنسدلة للأعلى
             </button>
-            <ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
+            <ul class="dropdown-menu">
               <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
               <li><a class="dropdown-item" href="#">عمل</a></li>
               <li><a class="dropdown-item" href="#">عمل آخر</a></li>
@@ -1048,10 +1062,10 @@ direction: rtl
             </ul>
           </div>
           <div class="dropstart">
-            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               زر القائمة المنسدلة لليمين
             </button>
-            <ul class="dropdown-menu" aria-labelledby="dropstartMenuButton">
+            <ul class="dropdown-menu">
               <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
               <li><a class="dropdown-item" href="#">عمل</a></li>
               <li><a class="dropdown-item" href="#">عمل آخر</a></li>
@@ -1066,10 +1080,10 @@ direction: rtl
         {{< example show_markup="false" >}}
         <div class="btn-group">
           <div class="dropdown">
-            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownRightMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               قائمة منسدلة بمحاذاة نهاية الزر
             </button>
-            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownRightMenuButton">
+            <ul class="dropdown-menu dropdown-menu-end">
               <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
               <li><a class="dropdown-item" href="#">عمل</a></li>
               <li><a class="dropdown-item" href="#">عمل آخر</a></li>
@@ -1157,7 +1171,7 @@ direction: rtl
           <a class="nav-link active" aria-current="page" href="#">نشط</a>
           <a class="nav-link" href="#">رابط</a>
           <a class="nav-link" href="#">رابط</a>
-          <a class="nav-link disabled">معطل</a>
+          <a class="nav-link disabled" aria-disabled="true">معطل</a>
         </nav>
         {{< /example >}}
 
@@ -1194,7 +1208,7 @@ direction: rtl
             <a class="nav-link" href="#">رابط</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link disabled">معطل</a>
+            <a class="nav-link disabled" aria-disabled="true">معطل</a>
           </li>
         </ul>
         {{< /example >}}
@@ -1208,7 +1222,7 @@ direction: rtl
 
       <div>
         {{< example show_markup="false" >}}
-        <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <nav class="navbar navbar-expand-lg bg-body-tertiary">
           <div class="container-fluid">
             <a class="navbar-brand" href="#">
               <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
@@ -1226,10 +1240,10 @@ direction: rtl
                   <a class="nav-link" href="#">رابط</a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                     قائمة منسدلة
                   </a>
-                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                  <ul class="dropdown-menu">
                     <li><a class="dropdown-item" href="#">عمل</a></li>
                     <li><a class="dropdown-item" href="#">عمل آخر</a></li>
                     <li><hr class="dropdown-divider"></li>
@@ -1237,7 +1251,7 @@ direction: rtl
                   </ul>
                 </li>
                 <li class="nav-item">
-                  <a class="nav-link disabled">معطل</a>
+                  <a class="nav-link disabled" aria-disabled="true">معطل</a>
                 </li>
               </ul>
               <form class="d-flex" role="search">
@@ -1265,10 +1279,10 @@ direction: rtl
                   <a class="nav-link" href="#">رابط</a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                     قائمة منسدلة
                   </a>
-                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown2">
+                  <ul class="dropdown-menu">
                     <li><a class="dropdown-item" href="#">عمل</a></li>
                     <li><a class="dropdown-item" href="#">عمل آخر</a></li>
                     <li><hr class="dropdown-divider"></li>
@@ -1276,7 +1290,7 @@ direction: rtl
                   </ul>
                 </li>
                 <li class="nav-item">
-                  <a class="nav-link disabled">معطل</a>
+                  <a class="nav-link disabled" aria-disabled="true">معطل</a>
                 </li>
               </ul>
               <form class="d-flex" role="search">
@@ -1384,27 +1398,31 @@ direction: rtl
 
       <div>
         {{< example show_markup="false" >}}
-        <div class="progress mb-3">
-          <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
+        <div class="progress mb-3" role="progressbar" aria-label="مثال مع عنوان" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-bar">0%</div>
         </div>
-        <div class="progress mb-3">
-          <div class="progress-bar bg-success w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
+        <div class="progress mb-3" role="progressbar" aria-label="مثال ناجح مع عنوان" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-bar bg-success w-25">25%</div>
         </div>
-        <div class="progress mb-3">
-          <div class="progress-bar bg-info text-dark w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
+        <div class="progress mb-3" role="progressbar" aria-label="مثال توضيح مع عنوان" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-bar text-bg-info w-50">50%</div>
         </div>
-        <div class="progress mb-3">
-          <div class="progress-bar bg-warning text-dark w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
+        <div class="progress mb-3" role="progressbar" aria-label="مثال تنبيه مع عنوان" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-bar text-bg-warning w-75">75%</div>
         </div>
-        <div class="progress">
-          <div class="progress-bar bg-danger w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
+        <div class="progress" role="progressbar" aria-label="مثال خطر مع عنوان" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-bar bg-danger w-100">100%</div>
         </div>
         {{< /example >}}
 
         {{< example show_markup="false" >}}
-        <div class="progress">
-          <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
-          <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
+        <div class="progress-stacked">
+          <div class="progress" role="progressbar" aria-label="القسم الأول - مثال افتراضي" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
+            <div class="progress-bar"></div>
+          </div>
+          <div class="progress" role="progressbar" aria-label="القسم الثاني - مثال ناجح مقلّم متحرك" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
+            <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
+          </div>
         </div>
         {{< /example >}}
       </div>
@@ -1417,7 +1435,7 @@ direction: rtl
 
       <div>
         <div class="bd-example">
-          <nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
+          <nav id="navbar-example2" class="navbar bg-body-tertiary px-3">
             <a class="navbar-brand" href="#">شريط التنقل</a>
             <ul class="nav nav-pills">
               <li class="nav-item">
@@ -1437,7 +1455,7 @@ direction: rtl
               </li>
             </ul>
           </nav>
-          <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example">
+          <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example position-relative mt-2 overflow-auto">
             <h4 id="fat"><bdi lang="en" dir="ltr">@fat</bdi></h4>
             <p>محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.</p>
             <h4 id="mdo"><bdi lang="en" dir="ltr">@mdo</bdi></h4>
@@ -1493,7 +1511,7 @@ direction: rtl
           <div class="toast-header">
             {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
             <strong class="me-auto">Bootstrap</strong>
-            <small class="text-muted">قبل 11 دقيقة</small>
+            <small class="text-body-secondary">قبل 11 دقيقة</small>
             <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="قريب"></button>
           </div>
           <div class="toast-body">
@@ -1520,13 +1538,13 @@ direction: rtl
       </div>
     </article>
   </section>
-</div>
+</main>
 
 <div class="modal fade" id="exampleModalDefault" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalLabel">عنوان الصندوق العائم</h5>
+        <h1 class="modal-title fs-5" id="exampleModalLabel">عنوان الصندوق العائم</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
       </div>
       <div class="modal-body">
@@ -1543,7 +1561,7 @@ direction: rtl
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="staticBackdropLiveLabel">عنوان الصندوق العائم</h5>
+        <h1 class="modal-title fs-5" id="staticBackdropLiveLabel">عنوان الصندوق العائم</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
       </div>
       <div class="modal-body">
@@ -1560,7 +1578,7 @@ direction: rtl
   <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">عنوان الصندوق العائم</h5>
+        <h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">عنوان الصندوق العائم</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
       </div>
       <div class="modal-body">
@@ -1583,7 +1601,7 @@ direction: rtl
   <div class="modal-dialog modal-fullscreen">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title h4" id="exampleModalFullscreenLabel">صندوق عائم يملأ الشاشة</h5>
+        <h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">صندوق عائم يملأ الشاشة</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
       </div>
       <div class="modal-body">
diff --git a/site/content/docs/5.1/examples/cheatsheet/cheatsheet.css b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.css
index 77aa0f23c..5721a028e 100644
--- a/site/content/docs/5.1/examples/cheatsheet/cheatsheet.css
+++ b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.css
@@ -12,7 +12,7 @@ body {
   height: 1em;
   margin-right: .25rem;
   content: "";
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%25230d6efd' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
   background-size: 1em;
 }
 
@@ -26,31 +26,29 @@ body {
   padding: .1875rem .5rem;
   margin-top: .125rem;
   margin-left: .3125rem;
-  color: rgba(0, 0, 0, .65);
-  text-decoration: none;
+  color: var(--bs-body-color);
 }
 
 .bd-aside a:hover,
 .bd-aside a:focus {
-  color: rgba(0, 0, 0, .85);
+  color: var(--bs-body-color);
   background-color: rgba(121, 82, 179, .1);
 }
 
 .bd-aside .active {
   font-weight: 600;
-  color: rgba(0, 0, 0, .85);
+  color: var(--bs-body-color);
 }
 
 .bd-aside .btn {
   padding: .25rem .5rem;
   font-weight: 600;
-  color: rgba(0, 0, 0, .65);
-  border: 0;
+  color: var(--bs-body-color);
 }
 
 .bd-aside .btn:hover,
 .bd-aside .btn:focus {
-  color: rgba(0, 0, 0, .85);
+  color: var(--bs-body-color);
   background-color: rgba(121, 82, 179, .1);
 }
 
@@ -61,7 +59,7 @@ body {
 .bd-aside .btn::before {
   width: 1.25em;
   line-height: 0;
-  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
   transition: transform .35s ease;
 
   /* rtl:raw:
@@ -77,10 +75,7 @@ body {
 
 /* Examples */
 .scrollspy-example {
-  position: relative;
   height: 200px;
-  margin-top: .5rem;
-  overflow: auto;
 }
 
 [id="modal"] .bd-example .btn,
@@ -99,9 +94,9 @@ body {
 @media (min-width: 1200px) {
   body {
     display: grid;
-    gap: 1rem;
-    grid-template-columns: 1fr 4fr 1fr;
     grid-template-rows: auto;
+    grid-template-columns: 1fr 4fr 1fr;
+    gap: 1rem;
   }
 
   .bd-header {
@@ -127,10 +122,10 @@ body {
   .bd-cheatsheet section,
   .bd-cheatsheet article {
     display: inherit; /* 1 */
-    gap: inherit; /* 1 */
+    grid-template-rows: auto;
     grid-template-columns: 1fr 4fr;
     grid-column: 1 / span 2;
-    grid-template-rows: auto;
+    gap: inherit; /* 1 */
   }
 
   .bd-aside {
@@ -154,7 +149,6 @@ body {
     /* rtl:end:ignore */
     z-index: -1;
     content: "";
-    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) calc(100% - 3rem), rgba(255, 255, 255, .01));
   }
 
   .bd-cheatsheet article,
diff --git a/site/content/docs/5.1/examples/cheatsheet/cheatsheet.js b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.js
index 0a50258b9..e25a89e75 100644
--- a/site/content/docs/5.1/examples/cheatsheet/cheatsheet.js
+++ b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.js
@@ -1,24 +1,24 @@
 /* global bootstrap: false */
 
-(function () {
+(() => {
   'use strict'
 
   // Tooltip and popover demos
   document.querySelectorAll('.tooltip-demo')
-    .forEach(function (tooltip) {
+    .forEach(tooltip => {
       new bootstrap.Tooltip(tooltip, {
         selector: '[data-bs-toggle="tooltip"]'
       })
     })
 
   document.querySelectorAll('[data-bs-toggle="popover"]')
-    .forEach(function (popover) {
+    .forEach(popover => {
       new bootstrap.Popover(popover)
     })
 
   document.querySelectorAll('.toast')
-    .forEach(function (toastNode) {
-      var toast = new bootstrap.Toast(toastNode, {
+    .forEach(toastNode => {
+      const toast = new bootstrap.Toast(toastNode, {
         autohide: false
       })
 
@@ -27,27 +27,27 @@
 
   // Disable empty links and submit buttons
   document.querySelectorAll('[href="#"], [type="submit"]')
-    .forEach(function (link) {
-      link.addEventListener('click', function (event) {
+    .forEach(link => {
+      link.addEventListener('click', event => {
         event.preventDefault()
       })
     })
 
   function setActiveItem() {
-    var hash = window.location.hash
+    const { hash } = window.location
 
     if (hash === '') {
       return
     }
 
-    var link = document.querySelector('.bd-aside a[href="' + hash + '"]')
+    const link = document.querySelector(`.bd-aside a[href="${hash}"]`)
 
     if (!link) {
       return
     }
 
-    var active = document.querySelector('.bd-aside .active')
-    var parent = link.parentNode.parentNode.previousElementSibling
+    const active = document.querySelector('.bd-aside .active')
+    const parent = link.parentNode.parentNode.previousElementSibling
 
     link.classList.add('active')
 
@@ -59,7 +59,7 @@
       return
     }
 
-    var expanded = active.parentNode.parentNode.previousElementSibling
+    const expanded = active.parentNode.parentNode.previousElementSibling
 
     active.classList.remove('active')
 
diff --git a/site/content/docs/5.1/examples/cheatsheet/cheatsheet.rtl.css b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.rtl.css
index c1a4a1ccc..416e39fca 100644
--- a/site/content/docs/5.1/examples/cheatsheet/cheatsheet.rtl.css
+++ b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.rtl.css
@@ -12,7 +12,7 @@ body {
   height: 1em;
   margin-left: .25rem;
   content: "";
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%25230d6efd' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
   background-size: 1em;
 }
 
@@ -26,31 +26,29 @@ body {
   padding: .1875rem .5rem;
   margin-top: .125rem;
   margin-right: .3125rem;
-  color: rgba(0, 0, 0, .65);
-  text-decoration: none;
+  color: var(--bs-body-color);
 }
 
 .bd-aside a:hover,
 .bd-aside a:focus {
-  color: rgba(0, 0, 0, .85);
+  color: var(--bs-body-color);
   background-color: rgba(121, 82, 179, .1);
 }
 
 .bd-aside .active {
   font-weight: 600;
-  color: rgba(0, 0, 0, .85);
+  color: var(--bs-body-color);
 }
 
 .bd-aside .btn {
   padding: .25rem .5rem;
   font-weight: 600;
-  color: rgba(0, 0, 0, .65);
-  border: 0;
+  color: var(--bs-body-color);
 }
 
 .bd-aside .btn:hover,
 .bd-aside .btn:focus {
-  color: rgba(0, 0, 0, .85);
+  color: var(--bs-body-color);
   background-color: rgba(121, 82, 179, .1);
 }
 
@@ -61,7 +59,7 @@ body {
 .bd-aside .btn::before {
   width: 1.25em;
   line-height: 0;
-  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
   transition: transform .35s ease;
   transform: rotate(180deg) translateX(-2px);
   transform-origin: .5em 50%;
@@ -74,10 +72,7 @@ body {
 
 /* Examples */
 .scrollspy-example {
-  position: relative;
   height: 200px;
-  margin-top: .5rem;
-  overflow: auto;
 }
 
 [id="modal"] .bd-example .btn,
@@ -96,9 +91,9 @@ body {
 @media (min-width: 1200px) {
   body {
     display: grid;
-    gap: 1rem;
-    grid-template-columns: 1fr 4fr 1fr;
     grid-template-rows: auto;
+    grid-template-columns: 1fr 4fr 1fr;
+    gap: 1rem;
   }
 
   .bd-header {
@@ -122,10 +117,10 @@ body {
   .bd-cheatsheet section,
   .bd-cheatsheet article {
     display: inherit; /* 1 */
-    gap: inherit; /* 1 */
+    grid-template-rows: auto;
     grid-template-columns: 1fr 4fr;
     grid-column: 1 / span 2;
-    grid-template-rows: auto;
+    gap: inherit; /* 1 */
   }
 
   .bd-aside {
@@ -147,7 +142,6 @@ body {
     left: 0;
     z-index: -1;
     content: "";
-    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) calc(100% - 3rem), rgba(255, 255, 255, .01));
   }
 
   .bd-cheatsheet article,
diff --git a/site/content/docs/5.1/examples/cheatsheet/index.html b/site/content/docs/5.3/examples/cheatsheet/index.html
index 64269b31c..faa012c60 100644
--- a/site/content/docs/5.1/examples/cheatsheet/index.html
+++ b/site/content/docs/5.3/examples/cheatsheet/index.html
@@ -5,71 +5,72 @@ extra_css:
   - "cheatsheet.css"
 extra_js:
   - src: "cheatsheet.js"
-body_class: "bg-light"
+    defer: true
+body_class: "bg-body-tertiary"
 ---
 
 <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/5.1/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>
   </div>
 </header>
-<aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-2">
+<aside class="bd-aside sticky-xl-top text-body-secondary align-self-start mb-3 mb-xl-5 px-2">
   <h2 class="h6 pt-4 pb-3 mb-4 border-bottom">On this page</h2>
   <nav class="small" id="toc">
     <ul class="list-unstyled">
       <li class="my-2">
-        <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">Contents</button>
+        <button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">Contents</button>
         <ul class="list-unstyled ps-3 collapse" id="contents-collapse">
-          <li><a class="d-inline-flex align-items-center rounded" href="#typography">Typography</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#images">Images</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#tables">Tables</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#figures">Figures</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#typography">Typography</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#images">Images</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#tables">Tables</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#figures">Figures</a></li>
         </ul>
       </li>
       <li class="my-2">
-        <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">Forms</button>
+        <button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">Forms</button>
         <ul class="list-unstyled ps-3 collapse" id="forms-collapse">
-          <li><a class="d-inline-flex align-items-center rounded" href="#overview">Overview</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#disabled-forms">Disabled forms</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#sizing">Sizing</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#input-group">Input group</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">Floating labels</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#validation">Validation</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#overview">Overview</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#disabled-forms">Disabled forms</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#sizing">Sizing</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#input-group">Input group</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#floating-labels">Floating labels</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#validation">Validation</a></li>
         </ul>
       </li>
       <li class="my-2">
-        <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">Components</button>
+        <button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">Components</button>
         <ul class="list-unstyled ps-3 collapse" id="components-collapse">
-          <li><a class="d-inline-flex align-items-center rounded" href="#accordion">Accordion</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#alerts">Alerts</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#badge">Badge</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">Breadcrumb</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#buttons">Buttons</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#button-group">Button group</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#card">Card</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#carousel">Carousel</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">Dropdowns</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#list-group">List group</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#modal">Modal</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#navs">Navs</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#navbar">Navbar</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#pagination">Pagination</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#popovers">Popovers</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#progress">Progress</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">Scrollspy</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#spinners">Spinners</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#toasts">Toasts</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#tooltips">Tooltips</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#accordion">Accordion</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#alerts">Alerts</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#badge">Badge</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#breadcrumb">Breadcrumb</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#buttons">Buttons</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#button-group">Button group</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#card">Card</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#carousel">Carousel</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#dropdowns">Dropdowns</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#list-group">List group</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#modal">Modal</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#navs">Navs</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#navbar">Navbar</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#pagination">Pagination</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#popovers">Popovers</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#progress">Progress</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#scrollspy">Scrollspy</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#spinners">Spinners</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#toasts">Toasts</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#tooltips">Tooltips</a></li>
         </ul>
       </li>
     </ul>
   </nav>
 </aside>
-<div class="bd-cheatsheet container-fluid bg-body">
+<main class="bd-cheatsheet container-fluid bg-body">
   <section id="content">
     <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Contents</h2>
 
@@ -116,6 +117,10 @@ body_class: "bg-light"
         {{< /example >}}
 
         {{< example show_markup="false" >}}
+        <hr>
+        {{< /example >}}
+
+        {{< example show_markup="false" >}}
         <blockquote class="blockquote">
           <p>A well-known quote, contained in a blockquote element.</p>
           <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
@@ -334,6 +339,15 @@ body_class: "bg-light"
             <label for="exampleInputPassword1" class="form-label">Password</label>
             <input type="password" class="form-control" id="exampleInputPassword1">
           </div>
+          <div class="mb-3">
+            <label for="exampleSelect" class="form-label">Select menu</label>
+            <select class="form-select" id="exampleSelect">
+              <option selected>Open this select menu</option>
+              <option value="1">One</option>
+              <option value="2">Two</option>
+              <option value="3">Three</option>
+            </select>
+          </div>
           <div class="mb-3 form-check">
             <input type="checkbox" class="form-check-input" id="exampleCheck1">
             <label class="form-check-label" for="exampleCheck1">Check me out</label>
@@ -435,7 +449,7 @@ body_class: "bg-light"
           <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
         </div>
         <div class="mb-3">
-          <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
+          <select class="form-select form-select-lg" aria-label=".form-select-lg example">
             <option selected>Open this select menu</option>
             <option value="1">One</option>
             <option value="2">Two</option>
@@ -609,36 +623,36 @@ body_class: "bg-light"
         {{< example show_markup="false" >}}
         <div class="accordion" id="accordionExample">
           <div class="accordion-item">
-            <h4 class="accordion-header" id="headingOne">
+            <h4 class="accordion-header">
               <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                 Accordion Item #1
               </button>
             </h4>
-            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+            <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
               <div class="accordion-body">
                 <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
               </div>
             </div>
           </div>
           <div class="accordion-item">
-            <h4 class="accordion-header" id="headingTwo">
+            <h4 class="accordion-header">
               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                 Accordion Item #2
               </button>
             </h4>
-            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
+            <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
               <div class="accordion-body">
                 <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
               </div>
             </div>
           </div>
           <div class="accordion-item">
-            <h4 class="accordion-header" id="headingThree">
+            <h4 class="accordion-header">
               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                 Accordion Item #3
               </button>
             </h4>
-            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+            <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
               <div class="accordion-body">
                 <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
               </div>
@@ -687,16 +701,16 @@ body_class: "bg-light"
         <p class="h2">Example heading <span class="badge bg-secondary">New</span></p>
         <p class="h3">Example heading <span class="badge bg-success">New</span></p>
         <p class="h4">Example heading <span class="badge bg-danger">New</span></p>
-        <p class="h5">Example heading <span class="badge bg-warning text-dark">New</span></p>
-        <p class="h6">Example heading <span class="badge bg-info text-dark">New</span></p>
-        <p class="h6">Example heading <span class="badge bg-light text-dark">New</span></p>
+        <p class="h5">Example heading <span class="badge text-bg-warning">New</span></p>
+        <p class="h6">Example heading <span class="badge text-bg-info">New</span></p>
+        <p class="h6">Example heading <span class="badge text-bg-light">New</span></p>
         <p class="h6">Example heading <span class="badge bg-dark">New</span></p>
         {{< /example >}}
 
         {{< example show_markup="false" >}}
         {{< badge.inline >}}
         {{- range (index $.Site.Data "theme-colors") }}
-        <span class="badge rounded-pill bg-{{ .name }}{{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }} text-dark{{ end }}">{{ .name | title }}</span>{{- end -}}
+        <span class="badge rounded-pill {{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }}text-{{ end }}bg-{{ .name }}">{{ .name | title }}</span>{{- end -}}
         {{< /badge.inline >}}
         {{< /example >}}
       </div>
@@ -807,7 +821,7 @@ body_class: "bg-light"
                 <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                 <a href="#" class="btn btn-primary">Go somewhere</a>
               </div>
-              <div class="card-footer text-muted">
+              <div class="card-footer text-body-secondary">
                 2 days ago
               </div>
             </div>
@@ -839,7 +853,7 @@ body_class: "bg-light"
                   <div class="card-body">
                     <h5 class="card-title">Card title</h5>
                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+                    <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
                   </div>
                 </div>
               </div>
@@ -908,10 +922,10 @@ body_class: "bg-light"
         {{< example show_markup="false" >}}
         <div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
           <div class="dropdown">
-            <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButtonSM" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               Dropdown button
             </button>
-            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSM">
+            <ul class="dropdown-menu">
               <li><h6 class="dropdown-header">Dropdown header</h6></li>
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
@@ -921,10 +935,10 @@ body_class: "bg-light"
             </ul>
           </div>
           <div class="dropdown">
-            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               Dropdown button
             </button>
-            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+            <ul class="dropdown-menu">
               <li><h6 class="dropdown-header">Dropdown header</h6></li>
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
@@ -934,10 +948,10 @@ body_class: "bg-light"
             </ul>
           </div>
           <div class="dropdown">
-            <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" id="dropdownMenuButtonLG" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               Dropdown button
             </button>
-            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLG">
+            <ul class="dropdown-menu">
               <li><h6 class="dropdown-header">Dropdown header</h6></li>
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
@@ -1021,10 +1035,10 @@ body_class: "bg-light"
         {{< example show_markup="false" >}}
         <div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
           <div class="dropend">
-            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               Dropend button
             </button>
-            <ul class="dropdown-menu" aria-labelledby="dropendMenuButton">
+            <ul class="dropdown-menu">
               <li><h6 class="dropdown-header">Dropdown header</h6></li>
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
@@ -1034,10 +1048,10 @@ body_class: "bg-light"
             </ul>
           </div>
           <div class="dropup">
-            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               Dropup button
             </button>
-            <ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
+            <ul class="dropdown-menu">
               <li><h6 class="dropdown-header">Dropdown header</h6></li>
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
@@ -1047,10 +1061,10 @@ body_class: "bg-light"
             </ul>
           </div>
           <div class="dropstart">
-            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               Dropstart button
             </button>
-            <ul class="dropdown-menu" aria-labelledby="dropstartMenuButton">
+            <ul class="dropdown-menu">
               <li><h6 class="dropdown-header">Dropdown header</h6></li>
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
@@ -1065,10 +1079,10 @@ body_class: "bg-light"
         {{< example show_markup="false" >}}
         <div class="btn-group">
           <div class="dropdown">
-            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownRightMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               End-aligned menu
             </button>
-            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownRightMenuButton">
+            <ul class="dropdown-menu dropdown-menu-end">
               <li><h6 class="dropdown-header">Dropdown header</h6></li>
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
@@ -1156,7 +1170,7 @@ body_class: "bg-light"
           <a class="nav-link active" aria-current="page" href="#">Active</a>
           <a class="nav-link" href="#">Link</a>
           <a class="nav-link" href="#">Link</a>
-          <a class="nav-link disabled">Disabled</a>
+          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
         </nav>
         {{< /example >}}
 
@@ -1170,13 +1184,13 @@ body_class: "bg-light"
         </nav>
         <div class="tab-content" id="nav-tabContent">
           <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
-            <p><strong>This is some placeholder content the Home tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+            <p>This is some placeholder content the <strong>Home tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
           </div>
           <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
-            <p><strong>This is some placeholder content the Profile tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+            <p>This is some placeholder content the <strong>Profile tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
           </div>
           <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
-            <p><strong>This is some placeholder content the Contact tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+            <p>This is some placeholder content the <strong>Contact tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
           </div>
         </div>
         {{< /example >}}
@@ -1193,7 +1207,7 @@ body_class: "bg-light"
             <a class="nav-link" href="#">Link</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link disabled">Disabled</a>
+            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
         </ul>
         {{< /example >}}
@@ -1207,7 +1221,7 @@ body_class: "bg-light"
 
       <div>
         {{< example show_markup="false" >}}
-        <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <nav class="navbar navbar-expand-lg bg-body-tertiary">
           <div class="container-fluid">
             <a class="navbar-brand" href="#">
               <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
@@ -1225,10 +1239,10 @@ body_class: "bg-light"
                   <a class="nav-link" href="#">Link</a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                     Dropdown
                   </a>
-                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                  <ul class="dropdown-menu">
                     <li><a class="dropdown-item" href="#">Action</a></li>
                     <li><a class="dropdown-item" href="#">Another action</a></li>
                     <li><hr class="dropdown-divider"></li>
@@ -1236,7 +1250,7 @@ body_class: "bg-light"
                   </ul>
                 </li>
                 <li class="nav-item">
-                  <a class="nav-link disabled">Disabled</a>
+                  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
                 </li>
               </ul>
               <form class="d-flex" role="search">
@@ -1264,10 +1278,10 @@ body_class: "bg-light"
                   <a class="nav-link" href="#">Link</a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                     Dropdown
                   </a>
-                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown2">
+                  <ul class="dropdown-menu">
                     <li><a class="dropdown-item" href="#">Action</a></li>
                     <li><a class="dropdown-item" href="#">Another action</a></li>
                     <li><hr class="dropdown-divider"></li>
@@ -1275,7 +1289,7 @@ body_class: "bg-light"
                   </ul>
                 </li>
                 <li class="nav-item">
-                  <a class="nav-link disabled">Disabled</a>
+                  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
                 </li>
               </ul>
               <form class="d-flex" role="search">
@@ -1381,27 +1395,31 @@ body_class: "bg-light"
 
       <div>
         {{< example show_markup="false" >}}
-        <div class="progress mb-3">
-          <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
+        <div class="progress mb-3" role="progressbar" aria-label="Example with label" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-bar">0%</div>
         </div>
-        <div class="progress mb-3">
-          <div class="progress-bar bg-success w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
+        <div class="progress mb-3" role="progressbar" aria-label="Success example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-bar bg-success w-25">25%</div>
         </div>
-        <div class="progress mb-3">
-          <div class="progress-bar bg-info text-dark w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
+        <div class="progress mb-3" role="progressbar" aria-label="Info example with label" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-bar text-bg-info w-50">50%</div>
         </div>
-        <div class="progress mb-3">
-          <div class="progress-bar bg-warning text-dark w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
+        <div class="progress mb-3" role="progressbar" aria-label="Warning example with label" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-bar text-bg-warning w-75">75%</div>
         </div>
-        <div class="progress">
-          <div class="progress-bar bg-danger w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
+        <div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-bar bg-danger w-100">100%</div>
         </div>
         {{< /example >}}
 
         {{< example show_markup="false" >}}
-        <div class="progress">
-          <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
-          <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
+        <div class="progress-stacked">
+          <div class="progress" role="progressbar" aria-label="Segment one - default example" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
+            <div class="progress-bar"></div>
+          </div>
+          <div class="progress" role="progressbar" aria-label="Segment two - animated striped success example" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
+            <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
+          </div>
         </div>
         {{< /example >}}
       </div>
@@ -1414,7 +1432,7 @@ body_class: "bg-light"
 
       <div>
         <div class="bd-example">
-          <nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
+          <nav id="navbar-example2" class="navbar bg-body-tertiary px-3">
             <a class="navbar-brand" href="#">Navbar</a>
             <ul class="nav nav-pills">
               <li class="nav-item">
@@ -1434,7 +1452,7 @@ body_class: "bg-light"
               </li>
             </ul>
           </nav>
-        <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
+        <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example position-relative mt-2 overflow-auto" tabindex="0">
             <h4 id="scrollspyHeading1">First heading</h4>
             <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
             <h4 id="scrollspyHeading2">Second heading</h4>
@@ -1489,7 +1507,7 @@ body_class: "bg-light"
           <div class="toast-header">
             {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
             <strong class="me-auto">Bootstrap</strong>
-            <small class="text-muted">11 mins ago</small>
+            <small class="text-body-secondary">11 mins ago</small>
             <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
           </div>
           <div class="toast-body">
@@ -1516,13 +1534,13 @@ body_class: "bg-light"
       </div>
     </article>
   </section>
-</div>
+</main>
 
 <div class="modal fade" id="exampleModalDefault" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -1539,7 +1557,7 @@ body_class: "bg-light"
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5>
+        <h1 class="modal-title fs-5" id="staticBackdropLiveLabel">Modal title</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -1556,7 +1574,7 @@ body_class: "bg-light"
   <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5>
+        <h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">Modal title</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -1575,7 +1593,7 @@ body_class: "bg-light"
   <div class="modal-dialog modal-fullscreen">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h5>
+        <h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">Full screen modal</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
diff --git a/site/content/docs/5.1/examples/checkout-rtl/index.html b/site/content/docs/5.3/examples/checkout-rtl/index.html
index e0ca621b1..87f621e14 100644
--- a/site/content/docs/5.1/examples/checkout-rtl/index.html
+++ b/site/content/docs/5.3/examples/checkout-rtl/index.html
@@ -3,49 +3,50 @@ layout: examples
 title: مثال إتمام الشراء
 direction: rtl
 extra_css:
-  - "../checkout/form-validation.css"
+  - "../checkout/checkout.css"
 extra_js:
-  - src: "../checkout/form-validation.js"
-body_class: "bg-light"
+  - src: "../checkout/checkout.js"
+    defer: true
+body_class: "bg-body-tertiary"
 ---
 
 <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">
-      <h2>نموذج إتمام الشراء</h2>
+      <h1 class="h2">نموذج إتمام الشراء</h1>
       <p class="lead">فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.</p>
     </div>
 
     <div class="row g-3">
       <div class="col-md-5 col-lg-4 order-md-last">
         <h4 class="d-flex justify-content-between align-items-center mb-3">
-          <span class="text-muted">عربة التسوق</span>
+          <span class="text-body-secondary">عربة التسوق</span>
           <span class="badge bg-secondary rounded-pill">3</span>
         </h4>
         <ul class="list-group mb-3">
           <li class="list-group-item d-flex justify-content-between lh-sm">
             <div>
               <h6 class="my-0">اسم المنتج</h6>
-              <small class="text-muted">وصف مختصر</small>
+              <small class="text-body-secondary">وصف مختصر</small>
             </div>
-            <span class="text-muted">$12</span>
+            <span class="text-body-secondary">$12</span>
           </li>
           <li class="list-group-item d-flex justify-content-between lh-sm">
             <div>
               <h6 class="my-0">المنتج الثاني</h6>
-              <small class="text-muted">وصف مختصر</small>
+              <small class="text-body-secondary">وصف مختصر</small>
             </div>
-            <span class="text-muted">$8</span>
+            <span class="text-body-secondary">$8</span>
           </li>
           <li class="list-group-item d-flex justify-content-between lh-sm">
             <div>
               <h6 class="my-0">البند الثالث</h6>
-              <small class="text-muted">وصف مختصر</small>
+              <small class="text-body-secondary">وصف مختصر</small>
             </div>
-            <span class="text-muted">$5</span>
+            <span class="text-body-secondary">$5</span>
           </li>
-          <li class="list-group-item d-flex justify-content-between bg-light">
+          <li class="list-group-item d-flex justify-content-between bg-body-tertiary">
             <div class="text-success">
               <h6 class="my-0">رمز ترويجي</h6>
               <small>EXAMPLECODE</small>
@@ -97,7 +98,7 @@ body_class: "bg-light"
             </div>
 
             <div class="col-12">
-              <label for="email" class="form-label">البريد الإلكتروني <span class="text-muted">(اختياري)</span></label>
+              <label for="email" class="form-label">البريد الإلكتروني <span class="text-body-secondary">(اختياري)</span></label>
               <input type="email" class="form-control" id="email" placeholder="[email protected]">
               <div class="invalid-feedback">
                 يرجى إدخال عنوان بريد إلكتروني صحيح لتصلكم تحديثات الشحن.
@@ -113,7 +114,7 @@ body_class: "bg-light"
             </div>
 
             <div class="col-12">
-              <label for="address2" class="form-label">عنوان 2 <span class="text-muted">(اختياري)</span></label>
+              <label for="address2" class="form-label">عنوان 2 <span class="text-body-secondary">(اختياري)</span></label>
               <input type="text" class="form-control" id="address2" placeholder="شقة 24">
             </div>
 
@@ -183,7 +184,7 @@ body_class: "bg-light"
             <div class="col-md-6">
               <label for="cc-name" class="form-label">الاسم على البطاقة</label>
               <input type="text" class="form-control" id="cc-name" placeholder="" required>
-              <small class="text-muted">الاسم الكامل كما هو معروض على البطاقة</small>
+              <small class="text-body-secondary">الاسم الكامل كما هو معروض على البطاقة</small>
               <div class="invalid-feedback">
                 الاسم على البطاقة مطلوب
               </div>
@@ -221,7 +222,7 @@ body_class: "bg-light"
       </div>
     </div>
   </main>
-  <footer class="my-5 pt-5 text-muted text-center text-small">
+  <footer class="my-5 pt-5 text-body-secondary text-center text-small">
     <p class="mb-1">&copy; {{< year >}}-2017 اسم الشركة</p>
     <ul class="list-inline">
       <li class="list-inline-item"><a href="#">سياسة الخصوصية</a></li>
diff --git a/site/content/docs/5.1/examples/checkout/form-validation.css b/site/content/docs/5.3/examples/checkout/checkout.css
index e5ea31c40..e5ea31c40 100644
--- a/site/content/docs/5.1/examples/checkout/form-validation.css
+++ b/site/content/docs/5.3/examples/checkout/checkout.css
diff --git a/site/content/docs/5.3/examples/checkout/checkout.js b/site/content/docs/5.3/examples/checkout/checkout.js
new file mode 100644
index 000000000..30ea0aa6b
--- /dev/null
+++ b/site/content/docs/5.3/examples/checkout/checkout.js
@@ -0,0 +1,19 @@
+// Example starter JavaScript for disabling form submissions if there are invalid fields
+(() => {
+  'use strict'
+
+  // Fetch all the forms we want to apply custom Bootstrap validation styles to
+  const forms = document.querySelectorAll('.needs-validation')
+
+  // Loop over them and prevent submission
+  Array.from(forms).forEach(form => {
+    form.addEventListener('submit', event => {
+      if (!form.checkValidity()) {
+        event.preventDefault()
+        event.stopPropagation()
+      }
+
+      form.classList.add('was-validated')
+    }, false)
+  })
+})()
diff --git a/site/content/docs/5.1/examples/checkout/index.html b/site/content/docs/5.3/examples/checkout/index.html
index 4809dc4bb..8fe01f02e 100644
--- a/site/content/docs/5.1/examples/checkout/index.html
+++ b/site/content/docs/5.3/examples/checkout/index.html
@@ -2,17 +2,18 @@
 layout: examples
 title: Checkout example
 extra_css:
-  - "form-validation.css"
+  - "checkout.css"
 extra_js:
-  - src: "form-validation.js"
-body_class: "bg-light"
+  - src: "checkout.js"
+    defer: true
+body_class: "bg-body-tertiary"
 ---
 
 <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">
-      <h2>Checkout form</h2>
+      <h1 class="h2">Checkout form</h1>
       <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>
 
@@ -26,25 +27,25 @@ body_class: "bg-light"
           <li class="list-group-item d-flex justify-content-between lh-sm">
             <div>
               <h6 class="my-0">Product name</h6>
-              <small class="text-muted">Brief description</small>
+              <small class="text-body-secondary">Brief description</small>
             </div>
-            <span class="text-muted">$12</span>
+            <span class="text-body-secondary">$12</span>
           </li>
           <li class="list-group-item d-flex justify-content-between lh-sm">
             <div>
               <h6 class="my-0">Second product</h6>
-              <small class="text-muted">Brief description</small>
+              <small class="text-body-secondary">Brief description</small>
             </div>
-            <span class="text-muted">$8</span>
+            <span class="text-body-secondary">$8</span>
           </li>
           <li class="list-group-item d-flex justify-content-between lh-sm">
             <div>
               <h6 class="my-0">Third item</h6>
-              <small class="text-muted">Brief description</small>
+              <small class="text-body-secondary">Brief description</small>
             </div>
-            <span class="text-muted">$5</span>
+            <span class="text-body-secondary">$5</span>
           </li>
-          <li class="list-group-item d-flex justify-content-between bg-light">
+          <li class="list-group-item d-flex justify-content-between bg-body-tertiary">
             <div class="text-success">
               <h6 class="my-0">Promo code</h6>
               <small>EXAMPLECODE</small>
@@ -96,7 +97,7 @@ body_class: "bg-light"
             </div>
 
             <div class="col-12">
-              <label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
+              <label for="email" class="form-label">Email <span class="text-body-secondary">(Optional)</span></label>
               <input type="email" class="form-control" id="email" placeholder="[email protected]">
               <div class="invalid-feedback">
                 Please enter a valid email address for shipping updates.
@@ -112,7 +113,7 @@ body_class: "bg-light"
             </div>
 
             <div class="col-12">
-              <label for="address2" class="form-label">Address 2 <span class="text-muted">(Optional)</span></label>
+              <label for="address2" class="form-label">Address 2 <span class="text-body-secondary">(Optional)</span></label>
               <input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
             </div>
 
@@ -182,7 +183,7 @@ body_class: "bg-light"
             <div class="col-md-6">
               <label for="cc-name" class="form-label">Name on card</label>
               <input type="text" class="form-control" id="cc-name" placeholder="" required>
-              <small class="text-muted">Full name as displayed on card</small>
+              <small class="text-body-secondary">Full name as displayed on card</small>
               <div class="invalid-feedback">
                 Name on card is required
               </div>
@@ -221,7 +222,7 @@ body_class: "bg-light"
     </div>
   </main>
 
-  <footer class="my-5 pt-5 text-muted text-center text-small">
+  <footer class="my-5 pt-5 text-body-secondary text-center text-small">
     <p class="mb-1">&copy; 2017–{{< year >}} Company Name</p>
     <ul class="list-inline">
       <li class="list-inline-item"><a href="#">Privacy</a></li>
diff --git a/site/content/docs/5.1/examples/cover/cover.css b/site/content/docs/5.3/examples/cover/cover.css
index 87afc3be9..2e7aef8f8 100644
--- a/site/content/docs/5.1/examples/cover/cover.css
+++ b/site/content/docs/5.3/examples/cover/cover.css
@@ -4,9 +4,9 @@
 
 
 /* Custom default button */
-.btn-secondary,
-.btn-secondary:hover,
-.btn-secondary:focus {
+.btn-light,
+.btn-light:hover,
+.btn-light:focus {
   color: #333;
   text-shadow: none; /* Prevent inheritance from `body` */
 }
@@ -31,10 +31,7 @@ body {
  */
 
 .nav-masthead .nav-link {
-  padding: .25rem 0;
-  font-weight: 700;
   color: rgba(255, 255, 255, .5);
-  background-color: transparent;
   border-bottom: .25rem solid transparent;
 }
 
diff --git a/site/content/docs/5.1/examples/cover/index.html b/site/content/docs/5.3/examples/cover/index.html
index 10362083e..002a5c310 100644
--- a/site/content/docs/5.1/examples/cover/index.html
+++ b/site/content/docs/5.3/examples/cover/index.html
@@ -4,8 +4,7 @@ title: Cover Template
 extra_css:
   - "cover.css"
 html_class: "h-100"
-body_class: "d-flex h-100 text-center text-white bg-dark"
-include_js: false
+body_class: "d-flex h-100 text-center text-bg-dark"
 ---
 
 <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
@@ -13,9 +12,9 @@ include_js: false
     <div>
       <h3 class="float-md-start mb-0">Cover</h3>
       <nav class="nav nav-masthead justify-content-center float-md-end">
-        <a class="nav-link active" aria-current="page" href="#">Home</a>
-        <a class="nav-link" href="#">Features</a>
-        <a class="nav-link" href="#">Contact</a>
+        <a class="nav-link fw-bold py-1 px-0 active" aria-current="page" href="#">Home</a>
+        <a class="nav-link fw-bold py-1 px-0" href="#">Features</a>
+        <a class="nav-link fw-bold py-1 px-0" href="#">Contact</a>
       </nav>
     </div>
   </header>
@@ -24,7 +23,7 @@ include_js: false
     <h1>Cover your page.</h1>
     <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
     <p class="lead">
-      <a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">Learn more</a>
+      <a href="#" class="btn btn-lg btn-light fw-bold border-white bg-white">Learn more</a>
     </p>
   </main>
 
diff --git a/site/content/docs/5.1/examples/dashboard-rtl/dashboard.js b/site/content/docs/5.3/examples/dashboard-rtl/dashboard.js
index 7831fa9d0..bdb3029d3 100644
--- a/site/content/docs/5.1/examples/dashboard-rtl/dashboard.js
+++ b/site/content/docs/5.3/examples/dashboard-rtl/dashboard.js
@@ -1,14 +1,12 @@
-/* globals Chart:false, feather:false */
+/* globals Chart:false */
 
-(function () {
+(() => {
   'use strict'
 
-  feather.replace({ 'aria-hidden': 'true' })
-
   // Graphs
-  var ctx = document.getElementById('myChart')
+  const ctx = document.getElementById('myChart')
   // eslint-disable-next-line no-unused-vars
-  var myChart = new Chart(ctx, {
+  const myChart = new Chart(ctx, {
     type: 'line',
     data: {
       labels: [
@@ -38,15 +36,13 @@
       }]
     },
     options: {
-      scales: {
-        yAxes: [{
-          ticks: {
-            beginAtZero: false
-          }
-        }]
-      },
-      legend: {
-        display: false
+      plugins: {
+        legend: {
+          display: false
+        },
+        tooltip: {
+          boxPadding: 3
+        }
       }
     }
   })
diff --git a/site/content/docs/5.3/examples/dashboard-rtl/index.html b/site/content/docs/5.3/examples/dashboard-rtl/index.html
new file mode 100644
index 000000000..a2ccc9e16
--- /dev/null
+++ b/site/content/docs/5.3/examples/dashboard-rtl/index.html
@@ -0,0 +1,334 @@
+---
+layout: examples
+title: قالب لوحة القيادة
+direction: rtl
+extra_css:
+  - "../dashboard/dashboard.rtl.css"
+extra_js:
+  - src: "https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.js"
+    integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp"
+    defer: true
+  - src: "dashboard.js"
+    defer: true
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+  <symbol id="calendar3" viewBox="0 0 16 16">
+    <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
+    <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
+  </symbol>
+  <symbol id="cart" viewBox="0 0 16 16">
+    <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+  </symbol>
+  <symbol id="chevron-right" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+  </symbol>
+  <symbol id="door-closed" viewBox="0 0 16 16">
+    <path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"/>
+    <path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/>
+  </symbol>
+  <symbol id="file-earmark" viewBox="0 0 16 16">
+    <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
+  </symbol>
+  <symbol id="file-earmark-text" viewBox="0 0 16 16">
+    <path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
+    <path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
+  </symbol>
+  <symbol id="gear-wide-connected" viewBox="0 0 16 16">
+    <path d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434l.071-.286zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5zm0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78h4.723zM5.048 3.967c-.03.021-.058.043-.087.065l.087-.065zm-.431.355A4.984 4.984 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8 4.617 4.322zm.344 7.646.087.065-.087-.065z"/>
+  </symbol>
+  <symbol id="graph-up" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z"/>
+  </symbol>
+  <symbol id="house-fill" viewBox="0 0 16 16">
+    <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z"/>
+    <path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z"/>
+  </symbol>
+  <symbol id="list" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
+  </symbol>
+  <symbol id="people" viewBox="0 0 16 16">
+    <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/>
+  </symbol>
+  <symbol id="plus-circle" viewBox="0 0 16 16">
+    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+    <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
+  </symbol>
+  <symbol id="puzzle" viewBox="0 0 16 16">
+    <path d="M3.112 3.645A1.5 1.5 0 0 1 4.605 2H7a.5.5 0 0 1 .5.5v.382c0 .696-.497 1.182-.872 1.469a.459.459 0 0 0-.115.118.113.113 0 0 0-.012.025L6.5 4.5v.003l.003.01c.004.01.014.028.036.053a.86.86 0 0 0 .27.194C7.09 4.9 7.51 5 8 5c.492 0 .912-.1 1.19-.24a.86.86 0 0 0 .271-.194.213.213 0 0 0 .039-.063v-.009a.112.112 0 0 0-.012-.025.459.459 0 0 0-.115-.118c-.375-.287-.872-.773-.872-1.469V2.5A.5.5 0 0 1 9 2h2.395a1.5 1.5 0 0 1 1.493 1.645L12.645 6.5h.237c.195 0 .42-.147.675-.48.21-.274.528-.52.943-.52.568 0 .947.447 1.154.862C15.877 6.807 16 7.387 16 8s-.123 1.193-.346 1.638c-.207.415-.586.862-1.154.862-.415 0-.733-.246-.943-.52-.255-.333-.48-.48-.675-.48h-.237l.243 2.855A1.5 1.5 0 0 1 11.395 14H9a.5.5 0 0 1-.5-.5v-.382c0-.696.497-1.182.872-1.469a.459.459 0 0 0 .115-.118.113.113 0 0 0 .012-.025L9.5 11.5v-.003a.214.214 0 0 0-.039-.064.859.859 0 0 0-.27-.193C8.91 11.1 8.49 11 8 11c-.491 0-.912.1-1.19.24a.859.859 0 0 0-.271.194.214.214 0 0 0-.039.063v.003l.001.006a.113.113 0 0 0 .012.025c.016.027.05.068.115.118.375.287.872.773.872 1.469v.382a.5.5 0 0 1-.5.5H4.605a1.5 1.5 0 0 1-1.493-1.645L3.356 9.5h-.238c-.195 0-.42.147-.675.48-.21.274-.528.52-.943.52-.568 0-.947-.447-1.154-.862C.123 9.193 0 8.613 0 8s.123-1.193.346-1.638C.553 5.947.932 5.5 1.5 5.5c.415 0 .733.246.943.52.255.333.48.48.675.48h.238l-.244-2.855zM4.605 3a.5.5 0 0 0-.498.55l.001.007.29 3.4A.5.5 0 0 1 3.9 7.5h-.782c-.696 0-1.182-.497-1.469-.872a.459.459 0 0 0-.118-.115.112.112 0 0 0-.025-.012L1.5 6.5h-.003a.213.213 0 0 0-.064.039.86.86 0 0 0-.193.27C1.1 7.09 1 7.51 1 8c0 .491.1.912.24 1.19.07.14.14.225.194.271a.213.213 0 0 0 .063.039H1.5l.006-.001a.112.112 0 0 0 .025-.012.459.459 0 0 0 .118-.115c.287-.375.773-.872 1.469-.872H3.9a.5.5 0 0 1 .498.542l-.29 3.408a.5.5 0 0 0 .497.55h1.878c-.048-.166-.195-.352-.463-.557-.274-.21-.52-.528-.52-.943 0-.568.447-.947.862-1.154C6.807 10.123 7.387 10 8 10s1.193.123 1.638.346c.415.207.862.586.862 1.154 0 .415-.246.733-.52.943-.268.205-.415.39-.463.557h1.878a.5.5 0 0 0 .498-.55l-.001-.007-.29-3.4A.5.5 0 0 1 12.1 8.5h.782c.696 0 1.182.497 1.469.872.05.065.091.099.118.115.013.008.021.01.025.012a.02.02 0 0 0 .006.001h.003a.214.214 0 0 0 .064-.039.86.86 0 0 0 .193-.27c.14-.28.24-.7.24-1.191 0-.492-.1-.912-.24-1.19a.86.86 0 0 0-.194-.271.215.215 0 0 0-.063-.039H14.5l-.006.001a.113.113 0 0 0-.025.012.459.459 0 0 0-.118.115c-.287.375-.773.872-1.469.872H12.1a.5.5 0 0 1-.498-.543l.29-3.407a.5.5 0 0 0-.497-.55H9.517c.048.166.195.352.463.557.274.21.52.528.52.943 0 .568-.447.947-.862 1.154C9.193 5.877 8.613 6 8 6s-1.193-.123-1.638-.346C5.947 5.447 5.5 5.068 5.5 4.5c0-.415.246-.733.52-.943.268-.205.415-.39.463-.557H4.605z"/>
+  </symbol>
+  <symbol id="search" viewBox="0 0 16 16">
+    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+  </symbol>
+</svg>
+
+<header class="navbar sticky-top bg-dark flex-md-nowrap p-0 shadow" data-bs-theme="dark">
+  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6 text-white" href="#">اسم الشركة</a>
+
+  <ul class="navbar-nav flex-row d-md-none">
+    <li class="nav-item text-nowrap">
+      <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="تبديل البحث">
+        <svg class="bi"><use xlink:href="#search"/></svg>
+      </button>
+    </li>
+    <li class="nav-item text-nowrap">
+      <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل">
+        <svg class="bi"><use xlink:href="#list"/></svg>
+      </button>
+    </li>
+  </ul>
+
+  <div id="navbarSearch" class="navbar-search w-100 collapse">
+    <input class="form-control w-100 rounded-0 border-0" type="text" placeholder="بحث" aria-label="بحث">
+  </div>
+</header>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary">
+      <div class="offcanvas-md offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
+        <div class="offcanvas-header">
+          <h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu" aria-label="يغلق"></button>
+        </div>
+        <div class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto">
+          <ul class="nav flex-column">
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
+                <svg class="bi"><use xlink:href="#house-fill"/></svg>
+                لوحة القيادة
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#file-earmark"/></svg>
+                الطلبات
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#cart"/></svg>
+                المنتجات
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#people"/></svg>
+                الزبائن
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#graph-up"/></svg>
+                التقارير
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#puzzle"/></svg>
+                التكاملات
+              </a>
+            </li>
+          </ul>
+
+          <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
+            <span>التقارير المحفوظة</span>
+            <a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
+              <svg class="bi"><use xlink:href="#plus-circle"/></svg>
+            </a>
+          </h6>
+          <ul class="nav flex-column mb-auto">
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+                الشهر الحالي
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+                الربع الأخير
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+                التفاعل الإجتماعي
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+                مبيعات نهاية العام
+              </a>
+            </li>
+          </ul>
+
+          <hr class="my-3">
+
+          <ul class="nav flex-column mb-auto">
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#gear-wide-connected"/></svg>
+                إعدادات
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#door-closed"/></svg>
+                خروج
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
+      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+        <h1 class="h2">لوحة القيادة</h1>
+        <div class="btn-toolbar mb-2 mb-md-0">
+          <div class="btn-group me-2">
+            <button type="button" class="btn btn-sm btn-outline-secondary">مشاركة</button>
+            <button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button>
+          </div>
+          <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
+            <svg class="bi"><use xlink:href="#calendar3"/></svg>
+            هذا الأسبوع
+          </button>
+        </div>
+      </div>
+
+      <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
+
+      <h2>عنوان القسم</h2>
+      <div class="table-responsive small">
+        <table class="table table-striped table-sm">
+          <thead>
+            <tr>
+              <th scope="col">#</th>
+              <th scope="col">عنوان</th>
+              <th scope="col">عنوان</th>
+              <th scope="col">عنوان</th>
+              <th scope="col">عنوان</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>1,001</td>
+              <td>بيانات</td>
+              <td>عشوائية</td>
+              <td>تثري</td>
+              <td>الجدول</td>
+            </tr>
+            <tr>
+              <td>1,002</td>
+              <td>تثري</td>
+              <td>مبهة</td>
+              <td>تصميم</td>
+              <td>تنسيق</td>
+            </tr>
+            <tr>
+              <td>1,003</td>
+              <td>عشوائية</td>
+              <td>غنية</td>
+              <td>قيمة</td>
+              <td>مفيدة</td>
+            </tr>
+            <tr>
+              <td>1,003</td>
+              <td>معلومات</td>
+              <td>تثري</td>
+              <td>توضيحية</td>
+              <td>عشوائية</td>
+            </tr>
+            <tr>
+              <td>1,004</td>
+              <td>الجدول</td>
+              <td>بيانات</td>
+              <td>تنسيق</td>
+              <td>قيمة</td>
+            </tr>
+            <tr>
+              <td>1,005</td>
+              <td>قيمة</td>
+              <td>مبهة</td>
+              <td>الجدول</td>
+              <td>تثري</td>
+            </tr>
+            <tr>
+              <td>1,006</td>
+              <td>قيمة</td>
+              <td>توضيحية</td>
+              <td>غنية</td>
+              <td>عشوائية</td>
+            </tr>
+            <tr>
+              <td>1,007</td>
+              <td>تثري</td>
+              <td>مفيدة</td>
+              <td>معلومات</td>
+              <td>مبهة</td>
+            </tr>
+            <tr>
+              <td>1,008</td>
+              <td>بيانات</td>
+              <td>عشوائية</td>
+              <td>تثري</td>
+              <td>الجدول</td>
+            </tr>
+            <tr>
+              <td>1,009</td>
+              <td>تثري</td>
+              <td>مبهة</td>
+              <td>تصميم</td>
+              <td>تنسيق</td>
+            </tr>
+            <tr>
+              <td>1,010</td>
+              <td>عشوائية</td>
+              <td>غنية</td>
+              <td>قيمة</td>
+              <td>مفيدة</td>
+            </tr>
+            <tr>
+              <td>1,011</td>
+              <td>معلومات</td>
+              <td>تثري</td>
+              <td>توضيحية</td>
+              <td>عشوائية</td>
+            </tr>
+            <tr>
+              <td>1,012</td>
+              <td>الجدول</td>
+              <td>تثري</td>
+              <td>تنسيق</td>
+              <td>قيمة</td>
+            </tr>
+            <tr>
+              <td>1,013</td>
+              <td>قيمة</td>
+              <td>مبهة</td>
+              <td>الجدول</td>
+              <td>تصميم</td>
+            </tr>
+            <tr>
+              <td>1,014</td>
+              <td>قيمة</td>
+              <td>توضيحية</td>
+              <td>غنية</td>
+              <td>عشوائية</td>
+            </tr>
+            <tr>
+              <td>1,015</td>
+              <td>بيانات</td>
+              <td>مفيدة</td>
+              <td>معلومات</td>
+              <td>الجدول</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </main>
+  </div>
+</div>
diff --git a/site/content/docs/5.3/examples/dashboard/dashboard.css b/site/content/docs/5.3/examples/dashboard/dashboard.css
new file mode 100644
index 000000000..154940c90
--- /dev/null
+++ b/site/content/docs/5.3/examples/dashboard/dashboard.css
@@ -0,0 +1,48 @@
+.bi {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+}
+
+/*
+ * Sidebar
+ */
+
+@media (min-width: 768px) {
+  .sidebar .offcanvas-lg {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 48px;
+  }
+  .navbar-search {
+    display: block;
+  }
+}
+
+.sidebar .nav-link {
+  font-size: .875rem;
+  font-weight: 500;
+}
+
+.sidebar .nav-link.active {
+  color: #2470dc;
+}
+
+.sidebar-heading {
+  font-size: .75rem;
+}
+
+/*
+ * Navbar
+ */
+
+.navbar-brand {
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+  background-color: rgba(0, 0, 0, .25);
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
+}
+
+.navbar .form-control {
+  padding: .75rem 1rem;
+}
diff --git a/site/content/docs/5.1/examples/dashboard/dashboard.js b/site/content/docs/5.3/examples/dashboard/dashboard.js
index 7c2402ae2..a60b39356 100644
--- a/site/content/docs/5.1/examples/dashboard/dashboard.js
+++ b/site/content/docs/5.3/examples/dashboard/dashboard.js
@@ -1,14 +1,12 @@
-/* globals Chart:false, feather:false */
+/* globals Chart:false */
 
-(function () {
+(() => {
   'use strict'
 
-  feather.replace({ 'aria-hidden': 'true' })
-
   // Graphs
-  var ctx = document.getElementById('myChart')
+  const ctx = document.getElementById('myChart')
   // eslint-disable-next-line no-unused-vars
-  var myChart = new Chart(ctx, {
+  const myChart = new Chart(ctx, {
     type: 'line',
     data: {
       labels: [
@@ -38,15 +36,13 @@
       }]
     },
     options: {
-      scales: {
-        yAxes: [{
-          ticks: {
-            beginAtZero: false
-          }
-        }]
-      },
-      legend: {
-        display: false
+      plugins: {
+        legend: {
+          display: false
+        },
+        tooltip: {
+          boxPadding: 3
+        }
       }
     }
   })
diff --git a/site/content/docs/5.3/examples/dashboard/dashboard.rtl.css b/site/content/docs/5.3/examples/dashboard/dashboard.rtl.css
new file mode 100644
index 000000000..5c8a7e257
--- /dev/null
+++ b/site/content/docs/5.3/examples/dashboard/dashboard.rtl.css
@@ -0,0 +1,48 @@
+.bi {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+}
+
+/*
+ * Sidebar
+ */
+
+@media (min-width: 768px) {
+  .sidebar .offcanvas-lg {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 48px;
+  }
+  .navbar-search {
+    display: block;
+  }
+}
+
+.sidebar .nav-link {
+  font-size: .875rem;
+  font-weight: 500;
+}
+
+.sidebar .nav-link.active {
+  color: #2470dc;
+}
+
+.sidebar-heading {
+  font-size: .75rem;
+}
+
+/*
+ * Navbar
+ */
+
+.navbar-brand {
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+  background-color: rgba(0, 0, 0, .25);
+  box-shadow: inset 1px 0 0 rgba(0, 0, 0, .25);
+}
+
+.navbar .form-control {
+  padding: .75rem 1rem;
+}
diff --git a/site/content/docs/5.3/examples/dashboard/index.html b/site/content/docs/5.3/examples/dashboard/index.html
new file mode 100644
index 000000000..d8941f368
--- /dev/null
+++ b/site/content/docs/5.3/examples/dashboard/index.html
@@ -0,0 +1,333 @@
+---
+layout: examples
+title: Dashboard Template
+extra_css:
+  - "dashboard.css"
+extra_js:
+  - src: "https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.js"
+    integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp"
+    defer: true
+  - src: "dashboard.js"
+    defer: true
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+  <symbol id="calendar3" viewBox="0 0 16 16">
+    <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
+    <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
+  </symbol>
+  <symbol id="cart" viewBox="0 0 16 16">
+    <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+  </symbol>
+  <symbol id="chevron-right" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+  </symbol>
+  <symbol id="door-closed" viewBox="0 0 16 16">
+    <path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"/>
+    <path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/>
+  </symbol>
+  <symbol id="file-earmark" viewBox="0 0 16 16">
+    <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
+  </symbol>
+  <symbol id="file-earmark-text" viewBox="0 0 16 16">
+    <path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
+    <path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
+  </symbol>
+  <symbol id="gear-wide-connected" viewBox="0 0 16 16">
+    <path d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434l.071-.286zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5zm0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78h4.723zM5.048 3.967c-.03.021-.058.043-.087.065l.087-.065zm-.431.355A4.984 4.984 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8 4.617 4.322zm.344 7.646.087.065-.087-.065z"/>
+  </symbol>
+  <symbol id="graph-up" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z"/>
+  </symbol>
+  <symbol id="house-fill" viewBox="0 0 16 16">
+    <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z"/>
+    <path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z"/>
+  </symbol>
+  <symbol id="list" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
+  </symbol>
+  <symbol id="people" viewBox="0 0 16 16">
+    <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/>
+  </symbol>
+  <symbol id="plus-circle" viewBox="0 0 16 16">
+    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+    <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
+  </symbol>
+  <symbol id="puzzle" viewBox="0 0 16 16">
+    <path d="M3.112 3.645A1.5 1.5 0 0 1 4.605 2H7a.5.5 0 0 1 .5.5v.382c0 .696-.497 1.182-.872 1.469a.459.459 0 0 0-.115.118.113.113 0 0 0-.012.025L6.5 4.5v.003l.003.01c.004.01.014.028.036.053a.86.86 0 0 0 .27.194C7.09 4.9 7.51 5 8 5c.492 0 .912-.1 1.19-.24a.86.86 0 0 0 .271-.194.213.213 0 0 0 .039-.063v-.009a.112.112 0 0 0-.012-.025.459.459 0 0 0-.115-.118c-.375-.287-.872-.773-.872-1.469V2.5A.5.5 0 0 1 9 2h2.395a1.5 1.5 0 0 1 1.493 1.645L12.645 6.5h.237c.195 0 .42-.147.675-.48.21-.274.528-.52.943-.52.568 0 .947.447 1.154.862C15.877 6.807 16 7.387 16 8s-.123 1.193-.346 1.638c-.207.415-.586.862-1.154.862-.415 0-.733-.246-.943-.52-.255-.333-.48-.48-.675-.48h-.237l.243 2.855A1.5 1.5 0 0 1 11.395 14H9a.5.5 0 0 1-.5-.5v-.382c0-.696.497-1.182.872-1.469a.459.459 0 0 0 .115-.118.113.113 0 0 0 .012-.025L9.5 11.5v-.003a.214.214 0 0 0-.039-.064.859.859 0 0 0-.27-.193C8.91 11.1 8.49 11 8 11c-.491 0-.912.1-1.19.24a.859.859 0 0 0-.271.194.214.214 0 0 0-.039.063v.003l.001.006a.113.113 0 0 0 .012.025c.016.027.05.068.115.118.375.287.872.773.872 1.469v.382a.5.5 0 0 1-.5.5H4.605a1.5 1.5 0 0 1-1.493-1.645L3.356 9.5h-.238c-.195 0-.42.147-.675.48-.21.274-.528.52-.943.52-.568 0-.947-.447-1.154-.862C.123 9.193 0 8.613 0 8s.123-1.193.346-1.638C.553 5.947.932 5.5 1.5 5.5c.415 0 .733.246.943.52.255.333.48.48.675.48h.238l-.244-2.855zM4.605 3a.5.5 0 0 0-.498.55l.001.007.29 3.4A.5.5 0 0 1 3.9 7.5h-.782c-.696 0-1.182-.497-1.469-.872a.459.459 0 0 0-.118-.115.112.112 0 0 0-.025-.012L1.5 6.5h-.003a.213.213 0 0 0-.064.039.86.86 0 0 0-.193.27C1.1 7.09 1 7.51 1 8c0 .491.1.912.24 1.19.07.14.14.225.194.271a.213.213 0 0 0 .063.039H1.5l.006-.001a.112.112 0 0 0 .025-.012.459.459 0 0 0 .118-.115c.287-.375.773-.872 1.469-.872H3.9a.5.5 0 0 1 .498.542l-.29 3.408a.5.5 0 0 0 .497.55h1.878c-.048-.166-.195-.352-.463-.557-.274-.21-.52-.528-.52-.943 0-.568.447-.947.862-1.154C6.807 10.123 7.387 10 8 10s1.193.123 1.638.346c.415.207.862.586.862 1.154 0 .415-.246.733-.52.943-.268.205-.415.39-.463.557h1.878a.5.5 0 0 0 .498-.55l-.001-.007-.29-3.4A.5.5 0 0 1 12.1 8.5h.782c.696 0 1.182.497 1.469.872.05.065.091.099.118.115.013.008.021.01.025.012a.02.02 0 0 0 .006.001h.003a.214.214 0 0 0 .064-.039.86.86 0 0 0 .193-.27c.14-.28.24-.7.24-1.191 0-.492-.1-.912-.24-1.19a.86.86 0 0 0-.194-.271.215.215 0 0 0-.063-.039H14.5l-.006.001a.113.113 0 0 0-.025.012.459.459 0 0 0-.118.115c-.287.375-.773.872-1.469.872H12.1a.5.5 0 0 1-.498-.543l.29-3.407a.5.5 0 0 0-.497-.55H9.517c.048.166.195.352.463.557.274.21.52.528.52.943 0 .568-.447.947-.862 1.154C9.193 5.877 8.613 6 8 6s-1.193-.123-1.638-.346C5.947 5.447 5.5 5.068 5.5 4.5c0-.415.246-.733.52-.943.268-.205.415-.39.463-.557H4.605z"/>
+  </symbol>
+  <symbol id="search" viewBox="0 0 16 16">
+    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+  </symbol>
+</svg>
+
+<header class="navbar sticky-top bg-dark flex-md-nowrap p-0 shadow" data-bs-theme="dark">
+  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6 text-white" href="#">Company name</a>
+
+  <ul class="navbar-nav flex-row d-md-none">
+    <li class="nav-item text-nowrap">
+      <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle search">
+        <svg class="bi"><use xlink:href="#search"/></svg>
+      </button>
+    </li>
+    <li class="nav-item text-nowrap">
+      <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
+        <svg class="bi"><use xlink:href="#list"/></svg>
+      </button>
+    </li>
+  </ul>
+
+  <div id="navbarSearch" class="navbar-search w-100 collapse">
+    <input class="form-control w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
+  </div>
+</header>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary">
+      <div class="offcanvas-md offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
+        <div class="offcanvas-header">
+          <h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto">
+          <ul class="nav flex-column">
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
+                <svg class="bi"><use xlink:href="#house-fill"/></svg>
+                Dashboard
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#file-earmark"/></svg>
+                Orders
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#cart"/></svg>
+                Products
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#people"/></svg>
+                Customers
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#graph-up"/></svg>
+                Reports
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#puzzle"/></svg>
+                Integrations
+              </a>
+            </li>
+          </ul>
+
+          <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
+            <span>Saved reports</span>
+            <a class="link-secondary" href="#" aria-label="Add a new report">
+              <svg class="bi"><use xlink:href="#plus-circle"/></svg>
+            </a>
+          </h6>
+          <ul class="nav flex-column mb-auto">
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+                Current month
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+                Last quarter
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+                Social engagement
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+                Year-end sale
+              </a>
+            </li>
+          </ul>
+
+          <hr class="my-3">
+
+          <ul class="nav flex-column mb-auto">
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#gear-wide-connected"/></svg>
+                Settings
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link d-flex align-items-center gap-2" href="#">
+                <svg class="bi"><use xlink:href="#door-closed"/></svg>
+                Sign out
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
+      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+        <h1 class="h2">Dashboard</h1>
+        <div class="btn-toolbar mb-2 mb-md-0">
+          <div class="btn-group me-2">
+            <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
+            <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
+          </div>
+          <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
+            <svg class="bi"><use xlink:href="#calendar3"/></svg>
+            This week
+          </button>
+        </div>
+      </div>
+
+      <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
+
+      <h2>Section title</h2>
+      <div class="table-responsive small">
+        <table class="table table-striped table-sm">
+          <thead>
+            <tr>
+              <th scope="col">#</th>
+              <th scope="col">Header</th>
+              <th scope="col">Header</th>
+              <th scope="col">Header</th>
+              <th scope="col">Header</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>1,001</td>
+              <td>random</td>
+              <td>data</td>
+              <td>placeholder</td>
+              <td>text</td>
+            </tr>
+            <tr>
+              <td>1,002</td>
+              <td>placeholder</td>
+              <td>irrelevant</td>
+              <td>visual</td>
+              <td>layout</td>
+            </tr>
+            <tr>
+              <td>1,003</td>
+              <td>data</td>
+              <td>rich</td>
+              <td>dashboard</td>
+              <td>tabular</td>
+            </tr>
+            <tr>
+              <td>1,003</td>
+              <td>information</td>
+              <td>placeholder</td>
+              <td>illustrative</td>
+              <td>data</td>
+            </tr>
+            <tr>
+              <td>1,004</td>
+              <td>text</td>
+              <td>random</td>
+              <td>layout</td>
+              <td>dashboard</td>
+            </tr>
+            <tr>
+              <td>1,005</td>
+              <td>dashboard</td>
+              <td>irrelevant</td>
+              <td>text</td>
+              <td>placeholder</td>
+            </tr>
+            <tr>
+              <td>1,006</td>
+              <td>dashboard</td>
+              <td>illustrative</td>
+              <td>rich</td>
+              <td>data</td>
+            </tr>
+            <tr>
+              <td>1,007</td>
+              <td>placeholder</td>
+              <td>tabular</td>
+              <td>information</td>
+              <td>irrelevant</td>
+            </tr>
+            <tr>
+              <td>1,008</td>
+              <td>random</td>
+              <td>data</td>
+              <td>placeholder</td>
+              <td>text</td>
+            </tr>
+            <tr>
+              <td>1,009</td>
+              <td>placeholder</td>
+              <td>irrelevant</td>
+              <td>visual</td>
+              <td>layout</td>
+            </tr>
+            <tr>
+              <td>1,010</td>
+              <td>data</td>
+              <td>rich</td>
+              <td>dashboard</td>
+              <td>tabular</td>
+            </tr>
+            <tr>
+              <td>1,011</td>
+              <td>information</td>
+              <td>placeholder</td>
+              <td>illustrative</td>
+              <td>data</td>
+            </tr>
+            <tr>
+              <td>1,012</td>
+              <td>text</td>
+              <td>placeholder</td>
+              <td>layout</td>
+              <td>dashboard</td>
+            </tr>
+            <tr>
+              <td>1,013</td>
+              <td>dashboard</td>
+              <td>irrelevant</td>
+              <td>text</td>
+              <td>visual</td>
+            </tr>
+            <tr>
+              <td>1,014</td>
+              <td>dashboard</td>
+              <td>illustrative</td>
+              <td>rich</td>
+              <td>data</td>
+            </tr>
+            <tr>
+              <td>1,015</td>
+              <td>random</td>
+              <td>tabular</td>
+              <td>information</td>
+              <td>text</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </main>
+  </div>
+</div>
diff --git a/site/content/docs/5.3/examples/dropdowns/dropdowns.css b/site/content/docs/5.3/examples/dropdowns/dropdowns.css
new file mode 100644
index 000000000..f633e2cd8
--- /dev/null
+++ b/site/content/docs/5.3/examples/dropdowns/dropdowns.css
@@ -0,0 +1,71 @@
+.dropdown-item-danger {
+  color: var(--bs-red);
+}
+.dropdown-item-danger:hover,
+.dropdown-item-danger:focus {
+  color: #fff;
+  background-color: var(--bs-red);
+}
+.dropdown-item-danger.active {
+  background-color: var(--bs-red);
+}
+
+.btn-hover-light {
+  color: var(--bs-body-color);
+  background-color: var(--bs-body-bg);
+}
+.btn-hover-light:hover,
+.btn-hover-light:focus {
+  color: var(--bs-link-hover-color);
+  background-color: var(--bs-tertiary-bg);
+}
+
+.cal-month,
+.cal-days,
+.cal-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  align-items: center;
+}
+.cal-month-name {
+  grid-column-start: 2;
+  grid-column-end: 7;
+  text-align: center;
+}
+.cal-weekday,
+.cal-btn {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  height: 3rem;
+  padding: 0;
+}
+.cal-btn:not([disabled]) {
+  font-weight: 500;
+  color: var(--bs-emphasis-color);
+}
+.cal-btn:hover,
+.cal-btn:focus {
+  background-color: var(--bs-secondary-bg);
+}
+.cal-btn[disabled] {
+  border: 0;
+  opacity: .5;
+}
+
+.w-220px {
+  width: 220px;
+}
+
+.w-280px {
+  width: 280px;
+}
+
+.w-340px {
+  width: 340px;
+}
+
+.opacity-10 {
+  opacity: .1;
+}
diff --git a/site/content/docs/5.3/examples/dropdowns/index.html b/site/content/docs/5.3/examples/dropdowns/index.html
new file mode 100644
index 000000000..099b412ca
--- /dev/null
+++ b/site/content/docs/5.3/examples/dropdowns/index.html
@@ -0,0 +1,462 @@
+---
+layout: examples
+title: Dropdowns
+extra_css:
+  - "dropdowns.css"
+body_class: ""
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+  <symbol id="film" viewBox="0 0 16 16">
+    <path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
+  </symbol>
+
+  <symbol id="joystick" viewBox="0 0 16 16">
+    <path d="M10 2a2 2 0 0 1-1.5 1.937v5.087c.863.083 1.5.377 1.5.726 0 .414-.895.75-2 .75s-2-.336-2-.75c0-.35.637-.643 1.5-.726V3.937A2 2 0 1 1 10 2z"/>
+    <path d="M0 9.665v1.717a1 1 0 0 0 .553.894l6.553 3.277a2 2 0 0 0 1.788 0l6.553-3.277a1 1 0 0 0 .553-.894V9.665c0-.1-.06-.19-.152-.23L9.5 6.715v.993l5.227 2.178a.125.125 0 0 1 .001.23l-5.94 2.546a2 2 0 0 1-1.576 0l-5.94-2.546a.125.125 0 0 1 .001-.23L6.5 7.708l-.013-.988L.152 9.435a.25.25 0 0 0-.152.23z"/>
+  </symbol>
+
+  <symbol id="music-note-beamed" viewBox="0 0 16 16">
+    <path d="M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2zm9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2z"/>
+    <path fill-rule="evenodd" d="M14 11V2h1v9h-1zM6 3v10H5V3h1z"/>
+    <path d="M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4V2.905z"/>
+  </symbol>
+
+  <symbol id="files" viewBox="0 0 16 16">
+    <path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"/>
+  </symbol>
+
+  <symbol id="image-fill" viewBox="0 0 16 16">
+    <path d="M.002 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2V3zm1 9v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12zm5-6.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z"/>
+  </symbol>
+
+  <symbol id="trash" viewBox="0 0 16 16">
+    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+  </symbol>
+
+  <symbol id="question-circle" viewBox="0 0 16 16">
+    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+    <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
+  </symbol>
+
+  <symbol id="arrow-left-short" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"/>
+  </symbol>
+
+  <symbol id="arrow-right-short" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
+  </symbol>
+</svg>
+
+<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
+  <ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 shadow w-220px" data-bs-theme="light">
+    <li><a class="dropdown-item rounded-2 active" href="#">Action</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Another action</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Something else here</a></li>
+    <li><hr class="dropdown-divider"></li>
+    <li><a class="dropdown-item rounded-2" href="#">Separated link</a></li>
+  </ul>
+  <ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 border-0 shadow w-220px" data-bs-theme="dark">
+    <li><a class="dropdown-item rounded-2 active" href="#">Action</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Another action</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Something else here</a></li>
+    <li><hr class="dropdown-divider"></li>
+    <li><a class="dropdown-item rounded-2" href="#">Separated link</a></li>
+  </ul>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
+  <div class="dropdown-menu d-block position-static pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px" data-bs-theme="light">
+    <form class="p-2 mb-2 bg-body-tertiary border-bottom">
+      <input type="search" class="form-control" autocomplete="false" placeholder="Type to filter...">
+    </form>
+    <ul class="list-unstyled mb-0">
+      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+        <span class="d-inline-block bg-success rounded-circle p-1"></span>
+        Action
+      </a></li>
+      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+        <span class="d-inline-block bg-primary rounded-circle p-1"></span>
+        Another action
+      </a></li>
+      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+        <span class="d-inline-block bg-danger rounded-circle p-1"></span>
+        Something else here
+      </a></li>
+      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+        <span class="d-inline-block bg-info rounded-circle p-1"></span>
+        Separated link
+      </a></li>
+    </ul>
+  </div>
+
+  <div class="dropdown-menu d-block position-static border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px" data-bs-theme="dark">
+    <form class="p-2 mb-2 bg-dark border-bottom border-dark">
+      <input type="search" class="form-control bg-dark" autocomplete="false" placeholder="Type to filter...">
+    </form>
+    <ul class="list-unstyled mb-0">
+      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+        <span class="d-inline-block bg-success rounded-circle p-1"></span>
+        Action
+      </a></li>
+      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+        <span class="d-inline-block bg-primary rounded-circle p-1"></span>
+        Another action
+      </a></li>
+      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+        <span class="d-inline-block bg-danger rounded-circle p-1"></span>
+        Something else here
+      </a></li>
+      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+        <span class="d-inline-block bg-info rounded-circle p-1"></span>
+        Separated link
+      </a></li>
+    </ul>
+  </div>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
+  <ul class="dropdown-menu d-block position-static mx-0 shadow w-220px" data-bs-theme="light">
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
+        Documents
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg>
+        Photos
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg>
+        Movies
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg>
+        Music
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg>
+        Games
+      </a>
+    </li>
+    <li><hr class="dropdown-divider"></li>
+    <li>
+      <a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg>
+        Trash
+      </a>
+    </li>
+  </ul>
+  <ul class="dropdown-menu d-block position-static mx-0 border-0 shadow w-220px" data-bs-theme="dark">
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
+        Documents
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg>
+        Photos
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg>
+        Movies
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg>
+        Music
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg>
+        Games
+      </a>
+    </li>
+    <li><hr class="dropdown-divider"></li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg>
+        Trash
+      </a>
+    </li>
+  </ul>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
+  <div class="dropdown-menu d-block position-static p-2 mx-0 shadow rounded-3 w-340px" data-bs-theme="light">
+    <div class="d-grid gap-1">
+      <div class="cal">
+        <div class="cal-month">
+          <button class="btn cal-btn" type="button" aria-label="previous month">
+            <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
+          </button>
+          <strong class="cal-month-name">June</strong>
+          <select class="form-select cal-month-name d-none">
+            <option value="January">January</option>
+            <option value="February">February</option>
+            <option value="March">March</option>
+            <option value="April">April</option>
+            <option value="May">May</option>
+            <option selected value="June">June</option>
+            <option value="July">July</option>
+            <option value="August">August</option>
+            <option value="September">September</option>
+            <option value="October">October</option>
+            <option value="November">November</option>
+            <option value="December">December</option>
+          </select>
+          <button class="btn cal-btn" type="button" aria-label="next month">
+            <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
+          </button>
+        </div>
+        <div class="cal-weekdays text-body-secondary">
+          <div class="cal-weekday">Sun</div>
+          <div class="cal-weekday">Mon</div>
+          <div class="cal-weekday">Tue</div>
+          <div class="cal-weekday">Wed</div>
+          <div class="cal-weekday">Thu</div>
+          <div class="cal-weekday">Fri</div>
+          <div class="cal-weekday">Sat</div>
+        </div>
+        <div class="cal-days">
+          <button class="btn cal-btn" disabled type="button">30</button>
+          <button class="btn cal-btn" disabled type="button">31</button>
+
+          <button class="btn cal-btn" type="button">1</button>
+          <button class="btn cal-btn" type="button">2</button>
+          <button class="btn cal-btn" type="button">3</button>
+          <button class="btn cal-btn" type="button">4</button>
+          <button class="btn cal-btn" type="button">5</button>
+          <button class="btn cal-btn" type="button">6</button>
+          <button class="btn cal-btn" type="button">7</button>
+
+          <button class="btn cal-btn" type="button">8</button>
+          <button class="btn cal-btn" type="button">9</button>
+          <button class="btn cal-btn" type="button">10</button>
+          <button class="btn cal-btn" type="button">11</button>
+          <button class="btn cal-btn" type="button">12</button>
+          <button class="btn cal-btn" type="button">13</button>
+          <button class="btn cal-btn" type="button">14</button>
+
+          <button class="btn cal-btn" type="button">15</button>
+          <button class="btn cal-btn" type="button">16</button>
+          <button class="btn cal-btn" type="button">17</button>
+          <button class="btn cal-btn" type="button">18</button>
+          <button class="btn cal-btn" type="button">19</button>
+          <button class="btn cal-btn" type="button">20</button>
+          <button class="btn cal-btn" type="button">21</button>
+
+          <button class="btn cal-btn" type="button">22</button>
+          <button class="btn cal-btn" type="button">23</button>
+          <button class="btn cal-btn" type="button">24</button>
+          <button class="btn cal-btn" type="button">25</button>
+          <button class="btn cal-btn" type="button">26</button>
+          <button class="btn cal-btn" type="button">27</button>
+          <button class="btn cal-btn" type="button">28</button>
+
+          <button class="btn cal-btn" type="button">29</button>
+          <button class="btn cal-btn" type="button">30</button>
+          <button class="btn cal-btn" type="button">31</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="dropdown-menu d-block position-static p-2 mx-0 shadow rounded-3 w-340px" data-bs-theme="dark">
+    <div class="d-grid gap-1">
+      <div class="cal">
+        <div class="cal-month">
+          <button class="btn cal-btn" type="button" aria-label="previous month">
+            <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
+          </button>
+          <strong class="cal-month-name">June</strong>
+          <select class="form-select cal-month-name d-none">
+            <option value="January">January</option>
+            <option value="February">February</option>
+            <option value="March">March</option>
+            <option value="April">April</option>
+            <option value="May">May</option>
+            <option selected value="June">June</option>
+            <option value="July">July</option>
+            <option value="August">August</option>
+            <option value="September">September</option>
+            <option value="October">October</option>
+            <option value="November">November</option>
+            <option value="December">December</option>
+          </select>
+          <button class="btn cal-btn" type="button" aria-label="next month">
+            <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
+          </button>
+        </div>
+        <div class="cal-weekdays text-body-secondary">
+          <div class="cal-weekday">Sun</div>
+          <div class="cal-weekday">Mon</div>
+          <div class="cal-weekday">Tue</div>
+          <div class="cal-weekday">Wed</div>
+          <div class="cal-weekday">Thu</div>
+          <div class="cal-weekday">Fri</div>
+          <div class="cal-weekday">Sat</div>
+        </div>
+        <div class="cal-days">
+          <button class="btn cal-btn" disabled type="button">30</button>
+          <button class="btn cal-btn" disabled type="button">31</button>
+
+          <button class="btn cal-btn" type="button">1</button>
+          <button class="btn cal-btn" type="button">2</button>
+          <button class="btn cal-btn" type="button">3</button>
+          <button class="btn cal-btn" type="button">4</button>
+          <button class="btn cal-btn" type="button">5</button>
+          <button class="btn cal-btn" type="button">6</button>
+          <button class="btn cal-btn" type="button">7</button>
+
+          <button class="btn cal-btn" type="button">8</button>
+          <button class="btn cal-btn" type="button">9</button>
+          <button class="btn cal-btn" type="button">10</button>
+          <button class="btn cal-btn" type="button">11</button>
+          <button class="btn cal-btn" type="button">12</button>
+          <button class="btn cal-btn" type="button">13</button>
+          <button class="btn cal-btn" type="button">14</button>
+
+          <button class="btn cal-btn" type="button">15</button>
+          <button class="btn cal-btn" type="button">16</button>
+          <button class="btn cal-btn" type="button">17</button>
+          <button class="btn cal-btn" type="button">18</button>
+          <button class="btn cal-btn" type="button">19</button>
+          <button class="btn cal-btn" type="button">20</button>
+          <button class="btn cal-btn" type="button">21</button>
+
+          <button class="btn cal-btn" type="button">22</button>
+          <button class="btn cal-btn" type="button">23</button>
+          <button class="btn cal-btn" type="button">24</button>
+          <button class="btn cal-btn" type="button">25</button>
+          <button class="btn cal-btn" type="button">26</button>
+          <button class="btn cal-btn" type="button">27</button>
+          <button class="btn cal-btn" type="button">28</button>
+
+          <button class="btn cal-btn" type="button">29</button>
+          <button class="btn cal-btn" type="button">30</button>
+          <button class="btn cal-btn" type="button">31</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
+  <div class="dropdown-menu position-static d-flex flex-column flex-lg-row align-items-stretch justify-content-start p-3 rounded-3 shadow-lg" data-bs-theme="light">
+    <nav class="col-lg-8">
+      <ul class="list-unstyled d-flex flex-column gap-2">
+        <li>
+          <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
+            <svg class="bi" width="24" height="24"><use xlink:href="#image-fill"/></svg>
+            <div>
+              <strong class="d-block">Main product</strong>
+              <small>Take a tour through the product</small>
+            </div>
+          </a>
+        </li>
+        <li>
+          <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
+            <svg class="bi" width="24" height="24"><use xlink:href="#music-note-beamed"/></svg>
+            <div>
+              <strong class="d-block">Another product</strong>
+              <small>Explore this other product we offer</small>
+            </div>
+          </a>
+        </li>
+        <li>
+          <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
+            <svg class="bi" width="24" height="24"><use xlink:href="#question-circle"/></svg>
+            <div>
+              <strong class="d-block">Support</strong>
+              <small>Get help from our support crew</small>
+            </div>
+          </a>
+        </li>
+      </ul>
+    </nav>
+    <div class="d-none d-lg-block vr mx-4 opacity-10">&nbsp;</div>
+    <hr class="d-lg-none">
+    <div class="col-lg-auto pe-3">
+      <nav>
+        <ul class="d-flex flex-column gap-2 list-unstyled small">
+          <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Documentation</a></li>
+          <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Use cases</a></li>
+          <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">API status</a></li>
+          <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Partners</a></li>
+          <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Resources</a></li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+
+  <div class="dropdown-menu position-static d-flex flex-column flex-lg-row align-items-stretch justify-content-start p-3 rounded-3 shadow-lg" data-bs-theme="dark">
+    <nav class="col-lg-8">
+      <ul class="list-unstyled d-flex flex-column gap-2">
+        <li>
+          <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
+            <svg class="bi" width="24" height="24"><use xlink:href="#image-fill"/></svg>
+            <div>
+              <strong class="d-block">Main product</strong>
+              <small>Take a tour through the product</small>
+            </div>
+          </a>
+        </li>
+        <li>
+          <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
+            <svg class="bi" width="24" height="24"><use xlink:href="#music-note-beamed"/></svg>
+            <div>
+              <strong class="d-block">Another product</strong>
+              <small>Explore this other product we offer</small>
+            </div>
+          </a>
+        </li>
+        <li>
+          <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
+            <svg class="bi" width="24" height="24"><use xlink:href="#question-circle"/></svg>
+            <div>
+              <strong class="d-block">Support</strong>
+              <small>Get help from our support crew</small>
+            </div>
+          </a>
+        </li>
+      </ul>
+    </nav>
+    <div class="d-none d-lg-block vr mx-4 opacity-10">&nbsp;</div>
+    <hr class="d-lg-none">
+    <div class="col-lg-auto pe-3">
+      <nav>
+        <ul class="d-flex flex-column gap-2 list-unstyled small">
+          <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Documentation</a></li>
+          <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Use cases</a></li>
+          <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">API status</a></li>
+          <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Partners</a></li>
+          <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Resources</a></li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</div>
diff --git a/site/content/docs/5.3/examples/features/features.css b/site/content/docs/5.3/examples/features/features.css
new file mode 100644
index 000000000..debc26364
--- /dev/null
+++ b/site/content/docs/5.3/examples/features/features.css
@@ -0,0 +1,26 @@
+.feature-icon {
+  width: 4rem;
+  height: 4rem;
+  border-radius: .75rem;
+}
+
+.icon-square {
+  width: 3rem;
+  height: 3rem;
+  border-radius: .75rem;
+}
+
+.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); }
+.text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); }
+.text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }
+
+.card-cover {
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+}
+
+.feature-icon-small {
+  width: 3rem;
+  height: 3rem;
+}
diff --git a/site/content/docs/5.1/examples/features/index.html b/site/content/docs/5.3/examples/features/index.html
index 1e331f00a..a2d4b73a8 100644
--- a/site/content/docs/5.1/examples/features/index.html
+++ b/site/content/docs/5.3/examples/features/index.html
@@ -6,7 +6,7 @@ extra_css:
 body_class: ""
 ---
 
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
   <symbol id="bootstrap" viewBox="0 0 118 94">
     <title>Bootstrap</title>
     <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
@@ -25,9 +25,6 @@ body_class: ""
     <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
     <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
   </symbol>
-  <symbol id="grid" viewBox="0 0 16 16">
-    <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
-  </symbol>
   <symbol id="collection" viewBox="0 0 16 16">
     <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/>
   </symbol>
@@ -35,9 +32,6 @@ body_class: ""
     <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
     <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
   </symbol>
-  <symbol id="chat-quote-fill" viewBox="0 0 16 16">
-    <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/>
-  </symbol>
   <symbol id="cpu-fill" viewBox="0 0 16 16">
     <path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
     <path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/>
@@ -71,36 +65,36 @@ body_class: ""
     <h2 class="pb-2 border-bottom">Columns with icons</h2>
     <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
       <div class="feature col">
-        <div class="feature-icon bg-primary bg-gradient">
+        <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg>
         </div>
-        <h2>Featured title</h2>
+        <h3 class="fs-2 text-body-emphasis">Featured title</h3>
         <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
         <a href="#" class="icon-link">
           Call to action
-          <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
+          <svg class="bi"><use xlink:href="#chevron-right"/></svg>
         </a>
       </div>
       <div class="feature col">
-        <div class="feature-icon bg-primary bg-gradient">
+        <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg>
         </div>
-        <h2>Featured title</h2>
+        <h3 class="fs-2 text-body-emphasis">Featured title</h3>
         <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
         <a href="#" class="icon-link">
           Call to action
-          <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
+          <svg class="bi"><use xlink:href="#chevron-right"/></svg>
         </a>
       </div>
       <div class="feature col">
-        <div class="feature-icon bg-primary bg-gradient">
+        <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
         </div>
-        <h2>Featured title</h2>
+        <h3 class="fs-2 text-body-emphasis">Featured title</h3>
         <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
         <a href="#" class="icon-link">
           Call to action
-          <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
+          <svg class="bi"><use xlink:href="#chevron-right"/></svg>
         </a>
       </div>
     </div>
@@ -112,11 +106,11 @@ body_class: ""
     <h2 class="pb-2 border-bottom">Hanging icons</h2>
     <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
       <div class="col d-flex align-items-start">
-        <div class="icon-square bg-light text-dark flex-shrink-0 me-3">
+        <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
         </div>
         <div>
-          <h2>Featured title</h2>
+          <h3 class="fs-2 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
           <a href="#" class="btn btn-primary">
             Primary button
@@ -124,11 +118,11 @@ body_class: ""
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <div class="icon-square bg-light text-dark flex-shrink-0 me-3">
+        <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
         </div>
         <div>
-          <h2>Featured title</h2>
+          <h3 class="fs-2 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
           <a href="#" class="btn btn-primary">
             Primary button
@@ -136,11 +130,11 @@ body_class: ""
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <div class="icon-square bg-light text-dark flex-shrink-0 me-3">
+        <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
         </div>
         <div>
-          <h2>Featured title</h2>
+          <h3 class="fs-2 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
           <a href="#" class="btn btn-primary">
             Primary button
@@ -157,9 +151,9 @@ body_class: ""
 
     <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
       <div class="col">
-        <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');">
+        <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');">
           <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
-            <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h2>
+            <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h3>
             <ul class="d-flex list-unstyled mt-auto">
               <li class="me-auto">
                 <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
@@ -178,9 +172,9 @@ body_class: ""
       </div>
 
       <div class="col">
-        <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');">
+        <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');">
           <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
-            <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h2>
+            <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h3>
             <ul class="d-flex list-unstyled mt-auto">
               <li class="me-auto">
                 <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
@@ -199,9 +193,9 @@ body_class: ""
       </div>
 
       <div class="col">
-        <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');">
+        <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');">
           <div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1">
-            <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h2>
+            <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h3>
             <ul class="d-flex list-unstyled mt-auto">
               <li class="me-auto">
                 <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
@@ -228,61 +222,119 @@ body_class: ""
 
     <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
       <div class="col d-flex align-items-start">
-        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
         <div>
-          <h4 class="fw-bold mb-0">Featured title</h4>
+          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg>
         <div>
-          <h4 class="fw-bold mb-0">Featured title</h4>
+          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg>
         <div>
-          <h4 class="fw-bold mb-0">Featured title</h4>
+          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg>
         <div>
-          <h4 class="fw-bold mb-0">Featured title</h4>
+          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg>
         <div>
-          <h4 class="fw-bold mb-0">Featured title</h4>
+          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg>
         <div>
-          <h4 class="fw-bold mb-0">Featured title</h4>
+          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg>
         <div>
-          <h4 class="fw-bold mb-0">Featured title</h4>
+          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg>
         <div>
-          <h4 class="fw-bold mb-0">Featured title</h4>
+          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
     </div>
   </div>
+
+  <div class="b-example-divider"></div>
+
+  <div class="container px-4 py-5">
+    <h2 class="pb-2 border-bottom">Features with title</h2>
+
+    <div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
+      <div class="col d-flex flex-column align-items-start gap-2">
+        <h2 class="fw-bold text-body-emphasis">Left-aligned title explaining these awesome features</h2>
+        <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
+        <a href="#" class="btn btn-primary btn-lg">Primary button</a>
+      </div>
+
+      <div class="col">
+        <div class="row row-cols-1 row-cols-sm-2 g-4">
+          <div class="col d-flex flex-column gap-2">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+              <svg class="bi" width="1em" height="1em">
+                <use xlink:href="#collection" />
+              </svg>
+            </div>
+            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
+            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
+          </div>
+
+          <div class="col d-flex flex-column gap-2">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+              <svg class="bi" width="1em" height="1em">
+                <use xlink:href="#gear-fill" />
+              </svg>
+            </div>
+            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
+            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
+          </div>
+
+          <div class="col d-flex flex-column gap-2">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+              <svg class="bi" width="1em" height="1em">
+                <use xlink:href="#speedometer" />
+              </svg>
+            </div>
+            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
+            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
+          </div>
+
+          <div class="col d-flex flex-column gap-2">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+              <svg class="bi" width="1em" height="1em">
+                <use xlink:href="#table" />
+              </svg>
+            </div>
+            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
+            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </main>
diff --git a/site/content/docs/5.1/examples/features/unsplash-photo-1.jpg b/site/content/docs/5.3/examples/features/unsplash-photo-1.jpg
index ed2e36a78..283acd0b4 100644
--- a/site/content/docs/5.1/examples/features/unsplash-photo-1.jpg
+++ b/site/content/docs/5.3/examples/features/unsplash-photo-1.jpg
diff --git a/site/content/docs/5.1/examples/features/unsplash-photo-2.jpg b/site/content/docs/5.3/examples/features/unsplash-photo-2.jpg
index b66864a00..81eae64d8 100644
--- a/site/content/docs/5.1/examples/features/unsplash-photo-2.jpg
+++ b/site/content/docs/5.3/examples/features/unsplash-photo-2.jpg
diff --git a/site/content/docs/5.1/examples/features/unsplash-photo-3.jpg b/site/content/docs/5.3/examples/features/unsplash-photo-3.jpg
index c411b17ec..0f401d1e1 100644
--- a/site/content/docs/5.1/examples/features/unsplash-photo-3.jpg
+++ b/site/content/docs/5.3/examples/features/unsplash-photo-3.jpg
diff --git a/site/content/docs/5.1/examples/footers/index.html b/site/content/docs/5.3/examples/footers/index.html
index efa26b92d..bb8b9c0b3 100644
--- a/site/content/docs/5.1/examples/footers/index.html
+++ b/site/content/docs/5.3/examples/footers/index.html
@@ -1,12 +1,10 @@
 ---
 layout: examples
 title: Footers
-extra_css:
-  - "footers.css"
 body_class: ""
 ---
 
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
   <symbol id="bootstrap" viewBox="0 0 118 94">
     <title>Bootstrap</title>
     <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
@@ -24,18 +22,18 @@ body_class: ""
 
 <div class="container">
   <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
-    <p class="col-md-4 mb-0 text-muted">&copy; {{< year >}} Company, Inc</p>
+    <p class="col-md-4 mb-0 text-body-secondary">&copy; {{< year >}} Company, Inc</p>
 
-    <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
+    <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
       <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
     </a>
 
     <ul class="nav col-md-4 justify-content-end">
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Features</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Pricing</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
     </ul>
   </footer>
 </div>
@@ -45,16 +43,16 @@ body_class: ""
 <div class="container">
   <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
     <div class="col-md-4 d-flex align-items-center">
-      <a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
+      <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
         <svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
       </a>
-      <span class="mb-3 mb-md-0 text-muted">&copy; {{< year >}} Company, Inc</span>
+      <span class="mb-3 mb-md-0 text-body-secondary">&copy; {{< year >}} Company, Inc</span>
     </div>
 
     <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
-      <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
-      <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
-      <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
+      <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
+      <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
+      <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
     </ul>
   </footer>
 </div>
@@ -64,13 +62,13 @@ body_class: ""
 <div class="container">
   <footer class="py-3 my-4">
     <ul class="nav justify-content-center border-bottom pb-3 mb-3">
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li>
-      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Features</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Pricing</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
     </ul>
-    <p class="text-center text-muted">&copy; {{< year >}} Company, Inc</p>
+    <p class="text-center text-body-secondary">&copy; {{< year >}} Company, Inc</p>
   </footer>
 </div>
 
@@ -79,10 +77,10 @@ body_class: ""
 <div class="container">
   <footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
     <div class="col mb-3">
-      <a href="/" class="d-flex align-items-center mb-3 link-dark text-decoration-none">
+      <a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
         <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
       </a>
-      <p class="text-muted">&copy; {{< year >}}</p>
+      <p class="text-body-secondary">&copy; {{< year >}}</p>
     </div>
 
     <div class="col mb-3">
@@ -92,33 +90,33 @@ body_class: ""
     <div class="col mb-3">
       <h5>Section</h5>
       <ul class="nav flex-column">
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
       </ul>
     </div>
 
     <div class="col mb-3">
       <h5>Section</h5>
       <ul class="nav flex-column">
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
       </ul>
     </div>
 
     <div class="col mb-3">
       <h5>Section</h5>
       <ul class="nav flex-column">
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
-        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
       </ul>
     </div>
   </footer>
@@ -133,43 +131,43 @@ body_class: ""
       <div class="col-6 col-md-2 mb-3">
         <h5>Section</h5>
         <ul class="nav flex-column">
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
         </ul>
       </div>
 
       <div class="col-6 col-md-2 mb-3">
         <h5>Section</h5>
         <ul class="nav flex-column">
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
         </ul>
       </div>
 
       <div class="col-6 col-md-2 mb-3">
         <h5>Section</h5>
         <ul class="nav flex-column">
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
-          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
         </ul>
       </div>
 
       <div class="col-md-5 offset-md-1 mb-3">
         <form>
           <h5>Subscribe to our newsletter</h5>
-          <p>Monthly digest of whats new and exciting from us.</p>
+          <p>Monthly digest of what's new and exciting from us.</p>
           <div class="d-flex flex-column flex-sm-row w-100 gap-2">
             <label for="newsletter1" class="visually-hidden">Email address</label>
-            <input id="newsletter1" type="text" class="form-control" placeholder="Email address">
+            <input id="newsletter1" type="email" class="form-control" placeholder="Email address">
             <button class="btn btn-primary" type="button">Subscribe</button>
           </div>
         </form>
@@ -179,9 +177,9 @@ body_class: ""
     <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
       <p>&copy; {{< year >}} Company, Inc. All rights reserved.</p>
       <ul class="list-unstyled d-flex">
-        <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
-        <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
-        <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
+        <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
+        <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
+        <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
       </ul>
     </div>
   </footer>
diff --git a/site/content/docs/5.3/examples/grid/grid.css b/site/content/docs/5.3/examples/grid/grid.css
new file mode 100644
index 000000000..cbc7c311f
--- /dev/null
+++ b/site/content/docs/5.3/examples/grid/grid.css
@@ -0,0 +1,13 @@
+.themed-grid-col {
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+  background-color: rgba(112.520718, 44.062154, 249.437846, .15);
+  border: 1px solid rgba(112.520718, 44.062154, 249.437846, .3);
+}
+
+.themed-container {
+  padding: .75rem;
+  margin-bottom: 1.5rem;
+  background-color: rgba(112.520718, 44.062154, 249.437846, .15);
+  border: 1px solid rgba(112.520718, 44.062154, 249.437846, .3);
+}
diff --git a/site/content/docs/5.1/examples/grid/index.html b/site/content/docs/5.3/examples/grid/index.html
index fae182a1c..8a6158202 100644
--- a/site/content/docs/5.1/examples/grid/index.html
+++ b/site/content/docs/5.3/examples/grid/index.html
@@ -4,7 +4,6 @@ title: Grid Template
 extra_css:
   - "grid.css"
 body_class: "py-4"
-include_js: false
 ---
 
 <main>
@@ -17,37 +16,37 @@ include_js: false
     <h2 class="mt-4">Five grid tiers</h2>
     <p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
 
-    <div class="row mb-3">
+    <div class="row mb-3 text-center">
       <div class="col-4 themed-grid-col">.col-4</div>
       <div class="col-4 themed-grid-col">.col-4</div>
       <div class="col-4 themed-grid-col">.col-4</div>
     </div>
 
-    <div class="row mb-3">
+    <div class="row mb-3 text-center">
       <div class="col-sm-4 themed-grid-col">.col-sm-4</div>
       <div class="col-sm-4 themed-grid-col">.col-sm-4</div>
       <div class="col-sm-4 themed-grid-col">.col-sm-4</div>
     </div>
 
-    <div class="row mb-3">
+    <div class="row mb-3 text-center">
       <div class="col-md-4 themed-grid-col">.col-md-4</div>
       <div class="col-md-4 themed-grid-col">.col-md-4</div>
       <div class="col-md-4 themed-grid-col">.col-md-4</div>
     </div>
 
-    <div class="row mb-3">
+    <div class="row mb-3 text-center">
       <div class="col-lg-4 themed-grid-col">.col-lg-4</div>
       <div class="col-lg-4 themed-grid-col">.col-lg-4</div>
       <div class="col-lg-4 themed-grid-col">.col-lg-4</div>
     </div>
 
-    <div class="row mb-3">
+    <div class="row mb-3 text-center">
       <div class="col-xl-4 themed-grid-col">.col-xl-4</div>
       <div class="col-xl-4 themed-grid-col">.col-xl-4</div>
       <div class="col-xl-4 themed-grid-col">.col-xl-4</div>
     </div>
 
-    <div class="row mb-3">
+    <div class="row mb-3 text-center">
       <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
       <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
       <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
@@ -55,7 +54,7 @@ include_js: false
 
     <h2 class="mt-4">Three equal columns</h2>
     <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
-    <div class="row mb-3">
+    <div class="row mb-3 text-center">
       <div class="col-md-4 themed-grid-col">.col-md-4</div>
       <div class="col-md-4 themed-grid-col">.col-md-4</div>
       <div class="col-md-4 themed-grid-col">.col-md-4</div>
@@ -63,7 +62,7 @@ include_js: false
 
     <h2 class="mt-4">Three equal columns alternative</h2>
     <p>By using the <code>.row-cols-*</code> classes, you can easily create a grid with equal columns.</p>
-    <div class="row row-cols-md-3 mb-3">
+    <div class="row row-cols-md-3 mb-3 text-center">
       <div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
       <div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
       <div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
@@ -71,7 +70,7 @@ include_js: false
 
     <h2 class="mt-4">Three unequal columns</h2>
     <p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
-    <div class="row mb-3">
+    <div class="row mb-3 text-center">
       <div class="col-md-3 themed-grid-col">.col-md-3</div>
       <div class="col-md-6 themed-grid-col">.col-md-6</div>
       <div class="col-md-3 themed-grid-col">.col-md-3</div>
@@ -79,7 +78,7 @@ include_js: false
 
     <h2 class="mt-4">Two columns</h2>
     <p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
-    <div class="row mb-3">
+    <div class="row mb-3 text-center">
       <div class="col-md-8 themed-grid-col">.col-md-8</div>
       <div class="col-md-4 themed-grid-col">.col-md-4</div>
     </div>
@@ -94,7 +93,7 @@ include_js: false
     <h2 class="mt-4">Two columns with two nested columns</h2>
     <p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
     <p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
-    <div class="row mb-3">
+    <div class="row mb-3 text-center">
       <div class="col-md-8 themed-grid-col">
         <div class="pb-3">
           .col-md-8
@@ -112,16 +111,16 @@ include_js: false
     <h2 class="mt-4">Mixed: mobile and desktop</h2>
     <p>The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and xxl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
     <p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and xxl, you only need to specify md.</p>
-    <div class="row mb-3">
+    <div class="row mb-3 text-center">
       <div class="col-md-8 themed-grid-col">.col-md-8</div>
       <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
     </div>
-    <div class="row mb-3">
+    <div class="row mb-3 text-center">
       <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
       <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
       <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
     </div>
-    <div class="row mb-3">
+    <div class="row mb-3 text-center">
       <div class="col-6 themed-grid-col">.col-6</div>
       <div class="col-6 themed-grid-col">.col-6</div>
     </div>
@@ -129,11 +128,11 @@ include_js: false
     <hr class="my-4">
 
     <h2 class="mt-4">Mixed: mobile, tablet, and desktop</h2>
-    <div class="row mb-3">
+    <div class="row mb-3 text-center">
       <div class="col-sm-6 col-lg-8 themed-grid-col">.col-sm-6 .col-lg-8</div>
       <div class="col-6 col-lg-4 themed-grid-col">.col-6 .col-lg-4</div>
     </div>
-    <div class="row mb-3">
+    <div class="row mb-3 text-center">
       <div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
       <div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
       <div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
@@ -143,7 +142,7 @@ include_js: false
 
     <h2 class="mt-4">Gutters</h2>
     <p>With <code>.gx-*</code> classes, the horizontal gutters can be adjusted.</p>
-    <div class="row row-cols-1 row-cols-md-3 gx-4">
+    <div class="row row-cols-1 row-cols-md-3 gx-4 text-center">
       <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
       <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
       <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
@@ -152,7 +151,7 @@ include_js: false
       <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
     </div>
     <p class="mt-4">Use the <code>.gy-*</code> classes to control the vertical gutters.</p>
-    <div class="row row-cols-1 row-cols-md-3 gy-4">
+    <div class="row row-cols-1 row-cols-md-3 gy-4 text-center">
       <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
       <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
       <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
@@ -161,7 +160,7 @@ include_js: false
       <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
     </div>
     <p class="mt-4">With <code>.g-*</code> classes, the gutters in both directions can be adjusted.</p>
-    <div class="row row-cols-1 row-cols-md-3 g-3">
+    <div class="row row-cols-1 row-cols-md-3 g-3 text-center">
       <div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
       <div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
       <div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
@@ -178,11 +177,11 @@ include_js: false
     <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>xxl</code> breakpoint.</p>
   </div>
 
-  <div class="container themed-container">.container</div>
-  <div class="container-sm themed-container">.container-sm</div>
-  <div class="container-md themed-container">.container-md</div>
-  <div class="container-lg themed-container">.container-lg</div>
-  <div class="container-xl themed-container">.container-xl</div>
-  <div class="container-xxl themed-container">.container-xxl</div>
-  <div class="container-fluid themed-container">.container-fluid</div>
+  <div class="container themed-container text-center">.container</div>
+  <div class="container-sm themed-container text-center">.container-sm</div>
+  <div class="container-md themed-container text-center">.container-md</div>
+  <div class="container-lg themed-container text-center">.container-lg</div>
+  <div class="container-xl themed-container text-center">.container-xl</div>
+  <div class="container-xxl themed-container text-center">.container-xxl</div>
+  <div class="container-fluid themed-container text-center">.container-fluid</div>
 </main>
diff --git a/site/content/docs/5.3/examples/headers/headers.css b/site/content/docs/5.3/examples/headers/headers.css
new file mode 100644
index 000000000..f887573fe
--- /dev/null
+++ b/site/content/docs/5.3/examples/headers/headers.css
@@ -0,0 +1,15 @@
+.form-control-dark {
+  border-color: var(--bs-gray);
+}
+.form-control-dark:focus {
+  border-color: #fff;
+  box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
+}
+
+.text-small {
+  font-size: 85%;
+}
+
+.dropdown-toggle:not(:focus) {
+  outline: 0;
+}
diff --git a/site/content/docs/5.1/examples/headers/index.html b/site/content/docs/5.3/examples/headers/index.html
index 15f82c505..2be0d36ad 100644
--- a/site/content/docs/5.1/examples/headers/index.html
+++ b/site/content/docs/5.3/examples/headers/index.html
@@ -6,7 +6,7 @@ extra_css:
 body_class: ""
 ---
 
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
   <symbol id="bootstrap" viewBox="0 0 118 94">
     <title>Bootstrap</title>
     <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
@@ -35,7 +35,7 @@ body_class: ""
 
   <div class="container">
     <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
-      <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
+      <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
         <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
         <span class="fs-4">Simple header</span>
       </a>
@@ -68,16 +68,18 @@ body_class: ""
 
   <div class="container">
     <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
-      <a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
-        <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
-      </a>
+      <div class="col-md-3 mb-2 mb-md-0">
+        <a href="/" class="d-inline-flex link-body-emphasis text-decoration-none">
+          <svg class="bi" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
+        </a>
+      </div>
 
       <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
         <li><a href="#" class="nav-link px-2 link-secondary">Home</a></li>
-        <li><a href="#" class="nav-link px-2 link-dark">Features</a></li>
-        <li><a href="#" class="nav-link px-2 link-dark">Pricing</a></li>
-        <li><a href="#" class="nav-link px-2 link-dark">FAQs</a></li>
-        <li><a href="#" class="nav-link px-2 link-dark">About</a></li>
+        <li><a href="#" class="nav-link px-2">Features</a></li>
+        <li><a href="#" class="nav-link px-2">Pricing</a></li>
+        <li><a href="#" class="nav-link px-2">FAQs</a></li>
+        <li><a href="#" class="nav-link px-2">About</a></li>
       </ul>
 
       <div class="col-md-3 text-end">
@@ -89,7 +91,7 @@ body_class: ""
 
   <div class="b-example-divider"></div>
 
-  <header class="p-3 bg-dark text-white">
+  <header class="p-3 text-bg-dark">
     <div class="container">
       <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
         <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
@@ -105,7 +107,7 @@ body_class: ""
         </ul>
 
         <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
-          <input type="search" class="form-control form-control-dark" placeholder="Search..." aria-label="Search">
+          <input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..." aria-label="Search">
         </form>
 
         <div class="text-end">
@@ -121,15 +123,15 @@ body_class: ""
   <header class="p-3 mb-3 border-bottom">
     <div class="container">
       <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
-        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none">
+        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none">
           <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
         </a>
 
         <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
           <li><a href="#" class="nav-link px-2 link-secondary">Overview</a></li>
-          <li><a href="#" class="nav-link px-2 link-dark">Inventory</a></li>
-          <li><a href="#" class="nav-link px-2 link-dark">Customers</a></li>
-          <li><a href="#" class="nav-link px-2 link-dark">Products</a></li>
+          <li><a href="#" class="nav-link px-2 link-body-emphasis">Inventory</a></li>
+          <li><a href="#" class="nav-link px-2 link-body-emphasis">Customers</a></li>
+          <li><a href="#" class="nav-link px-2 link-body-emphasis">Products</a></li>
         </ul>
 
         <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
@@ -137,10 +139,10 @@ body_class: ""
         </form>
 
         <div class="dropdown text-end">
-          <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
+          <a href="#" class="d-block link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
             <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
           </a>
-          <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1">
+          <ul class="dropdown-menu text-small">
             <li><a class="dropdown-item" href="#">New project...</a></li>
             <li><a class="dropdown-item" href="#">Settings</a></li>
             <li><a class="dropdown-item" href="#">Profile</a></li>
@@ -157,10 +159,10 @@ body_class: ""
   <header class="py-3 mb-3 border-bottom">
     <div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;">
       <div class="dropdown">
-        <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-dark text-decoration-none dropdown-toggle" id="dropdownNavLink" data-bs-toggle="dropdown" aria-expanded="false">
+        <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
           <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
         </a>
-        <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownNavLink">
+        <ul class="dropdown-menu text-small shadow">
           <li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li>
           <li><a class="dropdown-item" href="#">Inventory</a></li>
           <li><a class="dropdown-item" href="#">Customers</a></li>
@@ -177,10 +179,10 @@ body_class: ""
         </form>
 
         <div class="flex-shrink-0 dropdown">
-          <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
+          <a href="#" class="d-block link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
             <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
           </a>
-          <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
+          <ul class="dropdown-menu text-small shadow">
             <li><a class="dropdown-item" href="#">New project...</a></li>
             <li><a class="dropdown-item" href="#">Settings</a></li>
             <li><a class="dropdown-item" href="#">Profile</a></li>
@@ -194,10 +196,10 @@ body_class: ""
 
   <div class="container-fluid pb-3">
     <div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr;">
-      <div class="bg-light border rounded-3">
+      <div class="bg-body-tertiary border rounded-3">
         <br><br><br><br><br><br><br><br><br><br>
       </div>
-      <div class="bg-light border rounded-3">
+      <div class="bg-body-tertiary border rounded-3">
         <br><br><br><br><br><br><br><br><br><br>
       </div>
     </div>
@@ -205,24 +207,24 @@ body_class: ""
 
   <div class="b-example-divider"></div>
 
-  <nav class="py-2 bg-light border-bottom">
+  <nav class="py-2 bg-body-tertiary border-bottom">
     <div class="container d-flex flex-wrap">
       <ul class="nav me-auto">
-        <li class="nav-item"><a href="#" class="nav-link link-dark px-2 active" aria-current="page">Home</a></li>
-        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Features</a></li>
-        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Pricing</a></li>
-        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">FAQs</a></li>
-        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">About</a></li>
+        <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2 active" aria-current="page">Home</a></li>
+        <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Features</a></li>
+        <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Pricing</a></li>
+        <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">FAQs</a></li>
+        <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">About</a></li>
       </ul>
       <ul class="nav">
-        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Login</a></li>
-        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Sign up</a></li>
+        <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Login</a></li>
+        <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Sign up</a></li>
       </ul>
     </div>
   </nav>
   <header class="py-3 mb-4 border-bottom">
     <div class="container d-flex flex-wrap justify-content-center">
-      <a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark text-decoration-none">
+      <a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none">
         <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
         <span class="fs-4">Double header</span>
       </a>
@@ -235,7 +237,7 @@ body_class: ""
   <div class="b-example-divider"></div>
 
   <header>
-    <div class="px-3 py-2 bg-dark text-white">
+    <div class="px-3 py-2 text-bg-dark border-bottom">
       <div class="container">
         <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
           <a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
diff --git a/site/content/docs/5.3/examples/heroes/bootstrap-docs.png b/site/content/docs/5.3/examples/heroes/bootstrap-docs.png
new file mode 100644
index 000000000..a4e9b9864
--- /dev/null
+++ b/site/content/docs/5.3/examples/heroes/bootstrap-docs.png
diff --git a/site/content/docs/5.1/examples/heroes/bootstrap-themes.png b/site/content/docs/5.3/examples/heroes/bootstrap-themes.png
index 13c32337d..13c32337d 100644
--- a/site/content/docs/5.1/examples/heroes/bootstrap-themes.png
+++ b/site/content/docs/5.3/examples/heroes/bootstrap-themes.png
diff --git a/site/content/docs/5.3/examples/heroes/heroes.css b/site/content/docs/5.3/examples/heroes/heroes.css
new file mode 100644
index 000000000..e9deaf744
--- /dev/null
+++ b/site/content/docs/5.3/examples/heroes/heroes.css
@@ -0,0 +1,3 @@
+@media (min-width: 992px) {
+  .rounded-lg-3 { border-radius: .3rem; }
+}
diff --git a/site/content/docs/5.1/examples/heroes/index.html b/site/content/docs/5.3/examples/heroes/index.html
index ef621fd50..7f5daa9b9 100644
--- a/site/content/docs/5.1/examples/heroes/index.html
+++ b/site/content/docs/5.3/examples/heroes/index.html
@@ -11,7 +11,7 @@ body_class: ""
 
   <div class="px-4 py-5 my-5 text-center">
     <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
-    <h1 class="display-5 fw-bold">Centered hero</h1>
+    <h1 class="display-5 fw-bold text-body-emphasis">Centered hero</h1>
     <div class="col-lg-6 mx-auto">
       <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
       <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
@@ -24,7 +24,7 @@ body_class: ""
   <div class="b-example-divider"></div>
 
   <div class="px-4 pt-5 my-5 text-center border-bottom">
-    <h1 class="display-4 fw-bold">Centered screenshot</h1>
+    <h1 class="display-4 fw-bold text-body-emphasis">Centered screenshot</h1>
     <div class="col-lg-6 mx-auto">
       <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
       <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
@@ -47,7 +47,7 @@ body_class: ""
         <img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
       </div>
       <div class="col-lg-6">
-        <h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1>
+        <h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">Responsive left-aligned hero with image</h1>
         <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
         <div class="d-grid gap-2 d-md-flex justify-content-md-start">
           <button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button>
@@ -62,11 +62,11 @@ body_class: ""
   <div class="container col-xl-10 col-xxl-8 px-4 py-5">
     <div class="row align-items-center g-lg-5 py-5">
       <div class="col-lg-7 text-center text-lg-start">
-        <h1 class="display-4 fw-bold lh-1 mb-3">Vertically centered hero sign-up form</h1>
+        <h1 class="display-4 fw-bold lh-1 text-body-emphasis mb-3">Vertically centered hero sign-up form</h1>
         <p class="col-lg-10 fs-4">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
       </div>
       <div class="col-md-10 mx-auto col-lg-5">
-        <form class="p-4 p-md-5 border rounded-3 bg-light">
+        <form class="p-4 p-md-5 border rounded-3 bg-body-tertiary">
           <div class="form-floating mb-3">
             <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
             <label for="floatingInput">Email address</label>
@@ -82,7 +82,7 @@ body_class: ""
           </div>
           <button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button>
           <hr class="my-4">
-          <small class="text-muted">By clicking Sign up, you agree to the terms of use.</small>
+          <small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>
         </form>
       </div>
     </div>
@@ -93,7 +93,7 @@ body_class: ""
   <div class="container my-5">
     <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
       <div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
-        <h1 class="display-4 fw-bold lh-1">Border hero with cropped image and shadows</h1>
+        <h1 class="display-4 fw-bold lh-1 text-body-emphasis">Border hero with cropped image and shadows</h1>
         <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
         <div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
           <button type="button" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Primary</button>
@@ -110,7 +110,7 @@ body_class: ""
 
   <div class="bg-dark text-secondary px-4 py-5 text-center">
     <div class="py-5">
-      <h1 class="display-5 fw-bold text-white">Dark mode hero</h1>
+      <h1 class="display-5 fw-bold text-white">Dark color hero</h1>
       <div class="col-lg-6 mx-auto">
         <p class="fs-5 mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
         <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
diff --git a/site/content/docs/5.1/examples/jumbotron/index.html b/site/content/docs/5.3/examples/jumbotron/index.html
index 99cc61dee..049684df6 100644
--- a/site/content/docs/5.1/examples/jumbotron/index.html
+++ b/site/content/docs/5.3/examples/jumbotron/index.html
@@ -1,19 +1,18 @@
 ---
 layout: examples
 title: Jumbotron example
-include_js: false
 ---
 
 <main>
   <div class="container py-4">
     <header class="pb-3 mb-4 border-bottom">
-      <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
+      <a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
         <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
         <span class="fs-4">Jumbotron example</span>
       </a>
     </header>
 
-    <div class="p-5 mb-4 bg-light rounded-3">
+    <div class="p-5 mb-4 bg-body-tertiary rounded-3">
       <div class="container-fluid py-5">
         <h1 class="display-5 fw-bold">Custom jumbotron</h1>
         <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
@@ -23,14 +22,14 @@ include_js: false
 
     <div class="row align-items-md-stretch">
       <div class="col-md-6">
-        <div class="h-100 p-5 text-white bg-dark rounded-3">
+        <div class="h-100 p-5 text-bg-dark rounded-3">
           <h2>Change the background</h2>
           <p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p>
           <button class="btn btn-outline-light" type="button">Example button</button>
         </div>
       </div>
       <div class="col-md-6">
-        <div class="h-100 p-5 bg-light border rounded-3">
+        <div class="h-100 p-5 bg-body-tertiary border rounded-3">
           <h2>Add borders</h2>
           <p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p>
           <button class="btn btn-outline-secondary" type="button">Example button</button>
@@ -38,7 +37,7 @@ include_js: false
       </div>
     </div>
 
-    <footer class="pt-3 mt-4 text-muted border-top">
+    <footer class="pt-3 mt-4 text-body-secondary border-top">
       &copy; {{< year >}}
     </footer>
   </div>
diff --git a/site/content/docs/5.3/examples/jumbotrons/index.html b/site/content/docs/5.3/examples/jumbotrons/index.html
new file mode 100644
index 000000000..9c8f05841
--- /dev/null
+++ b/site/content/docs/5.3/examples/jumbotrons/index.html
@@ -0,0 +1,82 @@
+---
+layout: examples
+title: Jumbotrons
+extra_css:
+  - "jumbotrons.css"
+body_class: ""
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+  <symbol id="bootstrap" viewBox="0 0 118 94">
+    <title>Bootstrap</title>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
+  </symbol>
+  <symbol id="arrow-right-short" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
+  </symbol>
+  <symbol id="check2-circle" viewBox="0 0 16 16">
+    <path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"/>
+    <path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"/>
+  </symbol>
+</svg>
+
+<div class="container my-5">
+  <div class="p-5 text-center bg-body-tertiary rounded-3">
+    <svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100"><use xlink:href="#bootstrap"/></svg>
+    <h1 class="text-body-emphasis">Jumbotron with icon</h1>
+    <p class="col-lg-8 mx-auto fs-5 text-muted">
+      This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive <code>.col-*</code> class, and a customized call to action.
+    </p>
+    <div class="d-inline-flex gap-2 mb-5">
+      <button class="d-inline-flex align-items-center btn btn-primary btn-lg px-4 rounded-pill" type="button">
+        Call to action
+        <svg class="bi ms-2" width="24" height="24" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
+      </button>
+      <button class="btn btn-outline-secondary btn-lg px-4 rounded-pill" type="button">
+        Secondary link
+      </button>
+    </div>
+  </div>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="container my-5">
+  <div class="position-relative p-5 text-center text-muted bg-body border border-dashed rounded-5">
+    <button type="button" class="position-absolute top-0 end-0 p-3 m-3 btn-close bg-secondary bg-opacity-10 rounded-pill" aria-label="Close"></button>
+    <svg class="bi mt-5 mb-3" width="48" height="48"><use xlink:href="#check2-circle"/></svg>
+    <h1 class="text-body-emphasis">Placeholder jumbotron</h1>
+    <p class="col-lg-6 mx-auto mb-4">
+      This faded back jumbotron is useful for placeholder content. It's also a great way to add a bit of context to a page or section when no content is available and to encourage visitors to take a specific action.
+    </p>
+    <button class="btn btn-primary px-5 mb-5" type="button">
+      Call to action
+    </button>
+  </div>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="my-5">
+  <div class="p-5 text-center bg-body-tertiary">
+    <div class="container py-5">
+      <h1 class="text-body-emphasis">Full-width jumbotron</h1>
+      <p class="col-lg-8 mx-auto lead">
+        This takes the basic jumbotron above and makes its background edge-to-edge with a <code>.container</code> inside to align content. Similar to above, it's been recreated with built-in grid and utility classes.
+      </p>
+    </div>
+  </div>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="container my-5">
+  <div class="p-5 text-center bg-body-tertiary rounded-3">
+    <h1 class="text-body-emphasis">Basic jumbotron</h1>
+    <p class="lead">
+      This is a simple Bootstrap jumbotron that sits within a <code>.container</code>, recreated with built-in utility classes.
+    </p>
+  </div>
+</div>
+
+<div class="b-example-divider"></div>
diff --git a/site/content/docs/5.3/examples/jumbotrons/jumbotrons.css b/site/content/docs/5.3/examples/jumbotrons/jumbotrons.css
new file mode 100644
index 000000000..d7d065ed6
--- /dev/null
+++ b/site/content/docs/5.3/examples/jumbotrons/jumbotrons.css
@@ -0,0 +1 @@
+.border-dashed { --bs-border-style: dashed; }
diff --git a/site/content/docs/5.3/examples/list-groups/index.html b/site/content/docs/5.3/examples/list-groups/index.html
new file mode 100644
index 000000000..9411442da
--- /dev/null
+++ b/site/content/docs/5.3/examples/list-groups/index.html
@@ -0,0 +1,225 @@
+---
+layout: examples
+title: List groups
+extra_css:
+  - "list-groups.css"
+body_class: ""
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+  <symbol id="calendar-event" viewBox="0 0 16 16">
+    <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
+    <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
+  </symbol>
+
+  <symbol id="alarm" viewBox="0 0 16 16">
+    <path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
+    <path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>
+  </symbol>
+
+  <symbol id="list-check" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
+  </symbol>
+</svg>
+
+<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
+  <div class="list-group">
+    <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
+      <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
+      <div class="d-flex gap-2 w-100 justify-content-between">
+        <div>
+          <h6 class="mb-0">List group item heading</h6>
+          <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
+        </div>
+        <small class="opacity-50 text-nowrap">now</small>
+      </div>
+    </a>
+    <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
+      <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
+      <div class="d-flex gap-2 w-100 justify-content-between">
+        <div>
+          <h6 class="mb-0">Another title here</h6>
+          <p class="mb-0 opacity-75">Some placeholder content in a paragraph that goes a little longer so it wraps to a new line.</p>
+        </div>
+        <small class="opacity-50 text-nowrap">3d</small>
+      </div>
+    </a>
+    <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
+      <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
+      <div class="d-flex gap-2 w-100 justify-content-between">
+        <div>
+          <h6 class="mb-0">Third heading</h6>
+          <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
+        </div>
+        <small class="opacity-50 text-nowrap">1w</small>
+      </div>
+    </a>
+  </div>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
+  <div class="list-group">
+    <label class="list-group-item d-flex gap-2">
+      <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked>
+      <span>
+        First checkbox
+        <small class="d-block text-body-secondary">With support text underneath to add more detail</small>
+      </span>
+    </label>
+    <label class="list-group-item d-flex gap-2">
+      <input class="form-check-input flex-shrink-0" type="checkbox" value="">
+      <span>
+        Second checkbox
+        <small class="d-block text-body-secondary">Some other text goes here</small>
+      </span>
+    </label>
+    <label class="list-group-item d-flex gap-2">
+      <input class="form-check-input flex-shrink-0" type="checkbox" value="">
+      <span>
+        Third checkbox
+        <small class="d-block text-body-secondary">And we end with another snippet of text</small>
+      </span>
+    </label>
+  </div>
+
+  <div class="list-group">
+    <label class="list-group-item d-flex gap-2">
+      <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios1" value="" checked>
+      <span>
+        First radio
+        <small class="d-block text-body-secondary">With support text underneath to add more detail</small>
+      </span>
+    </label>
+    <label class="list-group-item d-flex gap-2">
+      <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios2" value="">
+      <span>
+        Second radio
+        <small class="d-block text-body-secondary">Some other text goes here</small>
+      </span>
+    </label>
+    <label class="list-group-item d-flex gap-2">
+      <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios3" value="">
+      <span>
+        Third radio
+        <small class="d-block text-body-secondary">And we end with another snippet of text</small>
+      </span>
+    </label>
+  </div>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
+  <div class="list-group">
+    <label class="list-group-item d-flex gap-3">
+      <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked style="font-size: 1.375em;">
+      <span class="pt-1 form-checked-content">
+        <strong>Finish sales report</strong>
+        <small class="d-block text-body-secondary">
+          <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
+          1:00–2:00pm
+        </small>
+      </span>
+    </label>
+    <label class="list-group-item d-flex gap-3">
+      <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
+      <span class="pt-1 form-checked-content">
+        <strong>Weekly All Hands</strong>
+        <small class="d-block text-body-secondary">
+          <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
+          2:00–2:30pm
+        </small>
+      </span>
+    </label>
+    <label class="list-group-item d-flex gap-3">
+      <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
+      <span class="pt-1 form-checked-content">
+        <strong>Out of office</strong>
+        <small class="d-block text-body-secondary">
+          <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg>
+          Tomorrow
+        </small>
+      </span>
+    </label>
+    <label class="list-group-item d-flex gap-3 bg-body-tertiary">
+      <input class="form-check-input form-check-input-placeholder bg-body-tertiary flex-shrink-0 pe-none" disabled type="checkbox" value="" style="font-size: 1.375em;">
+      <span class="pt-1 form-checked-content">
+        <span contenteditable="true" class="w-100">Add new task...</span>
+        <small class="d-block text-body-secondary">
+          <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#list-check"/></svg>
+          Choose list...
+        </small>
+      </span>
+    </label>
+  </div>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
+  <div class="list-group list-group-checkable d-grid gap-2 border-0">
+    <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios1" value="" checked>
+    <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios1">
+      First radio
+      <span class="d-block small opacity-50">With support text underneath to add more detail</span>
+    </label>
+
+    <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios2" value="">
+    <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios2">
+      Second radio
+      <span class="d-block small opacity-50">Some other text goes here</span>
+    </label>
+
+    <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios3" value="">
+    <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios3">
+      Third radio
+      <span class="d-block small opacity-50">And we end with another snippet of text</span>
+    </label>
+
+    <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios4" value="" disabled>
+    <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios4">
+      Fourth disabled radio
+      <span class="d-block small opacity-50">This option is disabled</span>
+    </label>
+  </div>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
+  <div class="list-group list-group-radio d-grid gap-2 border-0">
+    <div class="position-relative">
+      <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid1" value="" checked>
+      <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid1">
+        <strong class="fw-semibold">First radio</strong>
+        <span class="d-block small opacity-75">With support text underneath to add more detail</span>
+      </label>
+    </div>
+
+    <div class="position-relative">
+      <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid2" value="">
+      <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid2">
+        <strong class="fw-semibold">Second radio</strong>
+        <span class="d-block small opacity-75">Some other text goes here</span>
+      </label>
+    </div>
+
+    <div class="position-relative">
+      <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid3" value="">
+      <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid3">
+        <strong class="fw-semibold">Third radio</strong>
+        <span class="d-block small opacity-75">And we end with another snippet of text</span>
+      </label>
+    </div>
+
+    <div class="position-relative">
+      <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid4" value="" disabled>
+      <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid4">
+        <strong class="fw-semibold">Fourth disabled radio</strong>
+        <span class="d-block small opacity-75">This option is disabled</span>
+      </label>
+    </div>
+  </div>
+</div>
diff --git a/site/content/docs/5.3/examples/list-groups/list-groups.css b/site/content/docs/5.3/examples/list-groups/list-groups.css
new file mode 100644
index 000000000..b90cfa065
--- /dev/null
+++ b/site/content/docs/5.3/examples/list-groups/list-groups.css
@@ -0,0 +1,63 @@
+.list-group {
+  width: 100%;
+  max-width: 460px;
+  margin-inline: 1.5rem;
+}
+
+.form-check-input:checked + .form-checked-content {
+  opacity: .5;
+}
+
+.form-check-input-placeholder {
+  border-style: dashed;
+}
+[contenteditable]:focus {
+  outline: 0;
+}
+
+.list-group-checkable .list-group-item {
+  cursor: pointer;
+}
+.list-group-item-check {
+  position: absolute;
+  clip: rect(0, 0, 0, 0);
+}
+.list-group-item-check:hover + .list-group-item {
+  background-color: var(--bs-secondary-bg);
+}
+.list-group-item-check:checked + .list-group-item {
+  color: #fff;
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
+}
+.list-group-item-check[disabled] + .list-group-item,
+.list-group-item-check:disabled + .list-group-item {
+  pointer-events: none;
+  filter: none;
+  opacity: .5;
+}
+
+.list-group-radio .list-group-item {
+  cursor: pointer;
+  border-radius: .5rem;
+}
+.list-group-radio .form-check-input {
+  z-index: 2;
+  margin-top: -.5em;
+}
+.list-group-radio .list-group-item:hover,
+.list-group-radio .list-group-item:focus {
+  background-color: var(--bs-secondary-bg);
+}
+
+.list-group-radio .form-check-input:checked + .list-group-item {
+  background-color: var(--bs-body);
+  border-color: var(--bs-primary);
+  box-shadow: 0 0 0 2px var(--bs-primary);
+}
+.list-group-radio .form-check-input[disabled] + .list-group-item,
+.list-group-radio .form-check-input:disabled + .list-group-item {
+  pointer-events: none;
+  filter: none;
+  opacity: .5;
+}
diff --git a/site/content/docs/5.1/examples/masonry/index.html b/site/content/docs/5.3/examples/masonry/index.html
index 9061d7cce..c554deb48 100644
--- a/site/content/docs/5.1/examples/masonry/index.html
+++ b/site/content/docs/5.3/examples/masonry/index.html
@@ -37,7 +37,7 @@ extra_js:
           <blockquote class="blockquote">
             <p>A well-known quote, contained in a blockquote element.</p>
           </blockquote>
-          <figcaption class="blockquote-footer mb-0 text-muted">
+          <figcaption class="blockquote-footer mb-0 text-body-secondary">
             Someone famous in <cite title="Source Title">Source Title</cite>
           </figcaption>
         </figure>
@@ -49,12 +49,12 @@ extra_js:
         <div class="card-body">
           <h5 class="card-title">Card title</h5>
           <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
-          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+          <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
         </div>
       </div>
     </div>
     <div class="col-sm-6 col-lg-4 mb-4">
-      <div class="card bg-primary text-white text-center p-3">
+      <div class="card text-bg-primary text-center p-3">
         <figure class="mb-0">
           <blockquote class="blockquote">
             <p>A well-known quote, contained in a blockquote element.</p>
@@ -70,7 +70,7 @@ extra_js:
         <div class="card-body">
           <h5 class="card-title">Card title</h5>
           <p class="card-text">This card has a regular title and short paragraph of text below it.</p>
-          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+          <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
         </div>
       </div>
     </div>
@@ -85,7 +85,7 @@ extra_js:
           <blockquote class="blockquote">
             <p>A well-known quote, contained in a blockquote element.</p>
           </blockquote>
-          <figcaption class="blockquote-footer mb-0 text-muted">
+          <figcaption class="blockquote-footer mb-0 text-body-secondary">
             Someone famous in <cite title="Source Title">Source Title</cite>
           </figcaption>
         </figure>
@@ -96,7 +96,7 @@ extra_js:
         <div class="card-body">
           <h5 class="card-title">Card title</h5>
           <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
-          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+          <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
         </div>
       </div>
     </div>
diff --git a/site/content/docs/5.1/examples/modals/index.html b/site/content/docs/5.3/examples/modals/index.html
index cc0feff87..553bee51a 100644
--- a/site/content/docs/5.1/examples/modals/index.html
+++ b/site/content/docs/5.3/examples/modals/index.html
@@ -6,25 +6,7 @@ extra_css:
 body_class: ""
 ---
 
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-  <symbol id="bootstrap" viewBox="0 0 118 94">
-    <title>Bootstrap</title>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
-  </symbol>
-
-  <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
-    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
-  </symbol>
-
-  <symbol id="check2" viewBox="0 0 16 16">
-    <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
-  </symbol>
-
-  <symbol id="check2-circle" viewBox="0 0 16 16">
-    <path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"/>
-    <path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"/>
-  </symbol>
-
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
   <symbol id="bookmark-star" viewBox="0 0 16 16">
     <path d="M7.84 4.1a.178.178 0 0 1 .32 0l.634 1.285a.178.178 0 0 0 .134.098l1.42.206c.145.021.204.2.098.303L9.42 6.993a.178.178 0 0 0-.051.158l.242 1.414a.178.178 0 0 1-.258.187l-1.27-.668a.178.178 0 0 0-.165 0l-1.27.668a.178.178 0 0 1-.257-.187l.242-1.414a.178.178 0 0 0-.05-.158l-1.03-1.001a.178.178 0 0 1 .098-.303l1.42-.206a.178.178 0 0 0 .134-.098L7.84 4.1z"/>
     <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/>
@@ -34,10 +16,6 @@ body_class: ""
     <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
   </symbol>
 
-  <symbol id="stars" viewBox="0 0 16 16">
-    <path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/>
-  </symbol>
-
   <symbol id="film" viewBox="0 0 16 16">
     <path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
   </symbol>
@@ -55,19 +33,19 @@ body_class: ""
   </symbol>
 </svg>
 
-<div class="modal modal-sheet position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSheet">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content rounded-6 shadow">
+<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalSheet">
+  <div class="modal-dialog">
+    <div class="modal-content rounded-4 shadow">
       <div class="modal-header border-bottom-0">
-        <h5 class="modal-title">Modal title</h5>
+        <h1 class="modal-title fs-5">Modal title</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body py-0">
         <p>This is a modal sheet, a variation of the modal that docs itself to the bottom of the viewport like the newer share sheets in iOS.</p>
       </div>
-      <div class="modal-footer flex-column border-top-0">
-        <button type="button" class="btn btn-lg btn-primary w-100 mx-0 mb-2">Save changes</button>
-        <button type="button" class="btn btn-lg btn-light w-100 mx-0" data-bs-dismiss="modal">Close</button>
+      <div class="modal-footer flex-column align-items-stretch w-100 gap-2 pb-3 border-top-0">
+        <button type="button" class="btn btn-lg btn-primary">Save changes</button>
+        <button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -75,16 +53,16 @@ body_class: ""
 
 <div class="b-example-divider"></div>
 
-<div class="modal modal-alert position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalChoice">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content rounded-4 shadow">
+<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalChoice">
+  <div class="modal-dialog">
+    <div class="modal-content rounded-3 shadow">
       <div class="modal-body p-4 text-center">
         <h5 class="mb-0">Enable this setting?</h5>
         <p class="mb-0">You can always change your mind in your account settings.</p>
       </div>
       <div class="modal-footer flex-nowrap p-0">
-        <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0 border-right"><strong>Yes, enable</strong></button>
-        <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0" data-bs-dismiss="modal">No thanks</button>
+        <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0 border-end"><strong>Yes, enable</strong></button>
+        <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0" data-bs-dismiss="modal">No thanks</button>
       </div>
     </div>
   </div>
@@ -92,15 +70,15 @@ body_class: ""
 
 <div class="b-example-divider"></div>
 
-<div class="modal modal-tour position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalTour">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content rounded-6 shadow">
+<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalTour">
+  <div class="modal-dialog">
+    <div class="modal-content rounded-4 shadow">
       <div class="modal-body p-5">
         <h2 class="fw-bold mb-0">What's new</h2>
 
-        <ul class="d-grid gap-4 my-5 list-unstyled">
+        <ul class="d-grid gap-4 my-5 list-unstyled small">
           <li class="d-flex gap-4">
-            <svg class="bi text-muted flex-shrink-0" width="48" height="48"><use xlink:href="#grid-fill"/></svg>
+            <svg class="bi text-body-secondary flex-shrink-0" width="48" height="48"><use xlink:href="#grid-fill"/></svg>
             <div>
               <h5 class="mb-0">Grid view</h5>
               Not into lists? Try the new grid view.
@@ -129,38 +107,37 @@ body_class: ""
 
 <div class="b-example-divider"></div>
 
-<div class="modal modal-signin position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSignin">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content rounded-5 shadow">
+<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalSignin">
+  <div class="modal-dialog">
+    <div class="modal-content rounded-4 shadow">
       <div class="modal-header p-5 pb-4 border-bottom-0">
-        <!-- <h5 class="modal-title">Modal title</h5> -->
-        <h2 class="fw-bold mb-0">Sign up for free</h2>
+        <h1 class="fw-bold mb-0 fs-2">Sign up for free</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
 
       <div class="modal-body p-5 pt-0">
         <form class="">
           <div class="form-floating mb-3">
-            <input type="email" class="form-control rounded-4" id="floatingInput" placeholder="[email protected]">
+            <input type="email" class="form-control rounded-3" id="floatingInput" placeholder="[email protected]">
             <label for="floatingInput">Email address</label>
           </div>
           <div class="form-floating mb-3">
-            <input type="password" class="form-control rounded-4" id="floatingPassword" placeholder="Password">
+            <input type="password" class="form-control rounded-3" id="floatingPassword" placeholder="Password">
             <label for="floatingPassword">Password</label>
           </div>
-          <button class="w-100 mb-2 btn btn-lg rounded-4 btn-primary" type="submit">Sign up</button>
-          <small class="text-muted">By clicking Sign up, you agree to the terms of use.</small>
+          <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary" type="submit">Sign up</button>
+          <small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>
           <hr class="my-4">
           <h2 class="fs-5 fw-bold mb-3">Or use a third-party</h2>
-          <button class="w-100 py-2 mb-2 btn btn-outline-dark rounded-4" type="submit">
+          <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit">
             <svg class="bi me-1" width="16" height="16"><use xlink:href="#twitter"/></svg>
             Sign up with Twitter
           </button>
-          <button class="w-100 py-2 mb-2 btn btn-outline-primary rounded-4" type="submit">
+          <button class="w-100 py-2 mb-2 btn btn-outline-primary rounded-3" type="submit">
             <svg class="bi me-1" width="16" height="16"><use xlink:href="#facebook"/></svg>
             Sign up with Facebook
           </button>
-          <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-4" type="submit">
+          <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit">
             <svg class="bi me-1" width="16" height="16"><use xlink:href="#github"/></svg>
             Sign up with GitHub
           </button>
diff --git a/site/content/docs/5.3/examples/modals/modals.css b/site/content/docs/5.3/examples/modals/modals.css
new file mode 100644
index 000000000..924952ae3
--- /dev/null
+++ b/site/content/docs/5.3/examples/modals/modals.css
@@ -0,0 +1,8 @@
+.modal-sheet .modal-dialog {
+  width: 380px;
+  transition: bottom .75s ease-in-out;
+}
+.modal-sheet .modal-footer {
+  padding-bottom: 2rem;
+}
+
diff --git a/site/content/docs/5.1/examples/navbar-bottom/index.html b/site/content/docs/5.3/examples/navbar-bottom/index.html
index 1a6399975..123cd0bf3 100644
--- a/site/content/docs/5.1/examples/navbar-bottom/index.html
+++ b/site/content/docs/5.3/examples/navbar-bottom/index.html
@@ -4,7 +4,7 @@ title: Bottom navbar example
 ---
 
 <main class="container">
-  <div class="bg-light p-5 rounded mt-3">
+  <div class="bg-body-tertiary p-5 rounded mt-3">
     <h1>Bottom Navbar example</h1>
     <p class="lead">This example is a quick exercise to illustrate how the bottom navbar works.</p>
     <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
@@ -25,11 +25,11 @@ title: Bottom navbar example
           <a class="nav-link" href="#">Link</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link disabled">Disabled</a>
+          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
         </li>
         <li class="nav-item dropup">
-          <a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-bs-toggle="dropdown" aria-expanded="false">Dropup</a>
-          <ul class="dropdown-menu" aria-labelledby="dropdown10">
+          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropup</a>
+          <ul class="dropdown-menu">
             <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
             <li><a class="dropdown-item" href="#">Something else here</a></li>
diff --git a/site/content/docs/5.1/examples/navbar-fixed/index.html b/site/content/docs/5.3/examples/navbar-fixed/index.html
index b0d998652..b8dd5dac4 100644
--- a/site/content/docs/5.1/examples/navbar-fixed/index.html
+++ b/site/content/docs/5.3/examples/navbar-fixed/index.html
@@ -2,7 +2,7 @@
 layout: examples
 title: Fixed top navbar example
 extra_css:
-  - "navbar-top-fixed.css"
+  - "navbar-fixed.css"
 ---
 
 <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
@@ -20,7 +20,7 @@ extra_css:
           <a class="nav-link" href="#">Link</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link disabled">Disabled</a>
+          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
         </li>
       </ul>
       <form class="d-flex" role="search">
@@ -32,7 +32,7 @@ extra_css:
 </nav>
 
 <main class="container">
-  <div class="bg-light p-5 rounded">
+  <div class="bg-body-tertiary p-5 rounded">
     <h1>Navbar example</h1>
     <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
     <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
diff --git a/site/content/docs/5.1/examples/navbar-fixed/navbar-top-fixed.css b/site/content/docs/5.3/examples/navbar-fixed/navbar-fixed.css
index c77c0c147..c77c0c147 100644
--- a/site/content/docs/5.1/examples/navbar-fixed/navbar-top-fixed.css
+++ b/site/content/docs/5.3/examples/navbar-fixed/navbar-fixed.css
diff --git a/site/content/docs/5.1/examples/navbar-static/index.html b/site/content/docs/5.3/examples/navbar-static/index.html
index b6c26c94a..5624404d6 100644
--- a/site/content/docs/5.1/examples/navbar-static/index.html
+++ b/site/content/docs/5.3/examples/navbar-static/index.html
@@ -2,7 +2,7 @@
 layout: examples
 title: Top navbar example
 extra_css:
-  - "navbar-top.css"
+  - "navbar-static.css"
 ---
 
 <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
@@ -20,7 +20,7 @@ extra_css:
           <a class="nav-link" href="#">Link</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link disabled">Disabled</a>
+          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
         </li>
       </ul>
       <form class="d-flex" role="search">
@@ -32,7 +32,7 @@ extra_css:
 </nav>
 
 <main class="container">
-  <div class="bg-light p-5 rounded">
+  <div class="bg-body-tertiary p-5 rounded">
     <h1>Navbar example</h1>
     <p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
     <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
diff --git a/site/content/docs/5.1/examples/navbar-static/navbar-top.css b/site/content/docs/5.3/examples/navbar-static/navbar-static.css
index 25bbdde09..25bbdde09 100644
--- a/site/content/docs/5.1/examples/navbar-static/navbar-top.css
+++ b/site/content/docs/5.3/examples/navbar-static/navbar-static.css
diff --git a/site/content/docs/5.3/examples/navbars-offcanvas/index.html b/site/content/docs/5.3/examples/navbars-offcanvas/index.html
new file mode 100644
index 000000000..858998fb6
--- /dev/null
+++ b/site/content/docs/5.3/examples/navbars-offcanvas/index.html
@@ -0,0 +1,147 @@
+---
+layout: examples
+title: Navbar Template
+extra_css:
+  - "navbars-offcanvas.css"
+---
+
+<main>
+  <nav class="navbar navbar-dark bg-dark" aria-label="Dark offcanvas navbar">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#">Dark offcanvas navbar</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarDark" aria-controls="offcanvasNavbarDark" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbarDark" aria-labelledby="offcanvasNavbarDarkLabel">
+        <div class="offcanvas-header">
+          <h5 class="offcanvas-title" id="offcanvasNavbarDarkLabel">Offcanvas</h5>
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body">
+          <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
+            <li class="nav-item">
+              <a class="nav-link active" aria-current="page" href="#">Home</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Link</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                Dropdown
+              </a>
+              <ul class="dropdown-menu">
+                <li><a class="dropdown-item" href="#">Action</a></li>
+                <li><a class="dropdown-item" href="#">Another action</a></li>
+                <li>
+                  <hr class="dropdown-divider">
+                </li>
+                <li><a class="dropdown-item" href="#">Something else here</a></li>
+              </ul>
+            </li>
+          </ul>
+          <form class="d-flex mt-3" role="search">
+            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+            <button class="btn btn-outline-success" type="submit">Search</button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </nav>
+
+  <nav class="navbar bg-body-tertiary" aria-label="Light offcanvas navbar">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#">Light offcanvas navbar</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarLight" aria-controls="offcanvasNavbarLight" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbarLight" aria-labelledby="offcanvasNavbarLightLabel">
+        <div class="offcanvas-header">
+          <h5 class="offcanvas-title" id="offcanvasNavbarLightLabel">Offcanvas</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body">
+          <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
+            <li class="nav-item">
+              <a class="nav-link active" aria-current="page" href="#">Home</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Link</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                Dropdown
+              </a>
+              <ul class="dropdown-menu">
+                <li><a class="dropdown-item" href="#">Action</a></li>
+                <li><a class="dropdown-item" href="#">Another action</a></li>
+                <li>
+                  <hr class="dropdown-divider">
+                </li>
+                <li><a class="dropdown-item" href="#">Something else here</a></li>
+              </ul>
+            </li>
+          </ul>
+          <form class="d-flex mt-3" role="search">
+            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+            <button class="btn btn-outline-success" type="submit">Search</button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </nav>
+
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Offcanvas navbar large">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#">Responsive offcanvas navbar</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar2" aria-controls="offcanvasNavbar2" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbar2" aria-labelledby="offcanvasNavbar2Label">
+        <div class="offcanvas-header">
+          <h5 class="offcanvas-title" id="offcanvasNavbar2Label">Offcanvas</h5>
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body">
+          <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
+            <li class="nav-item">
+              <a class="nav-link active" aria-current="page" href="#">Home</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Link</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                Dropdown
+              </a>
+              <ul class="dropdown-menu">
+                <li><a class="dropdown-item" href="#">Action</a></li>
+                <li><a class="dropdown-item" href="#">Another action</a></li>
+                <li>
+                  <hr class="dropdown-divider">
+                </li>
+                <li><a class="dropdown-item" href="#">Something else here</a></li>
+              </ul>
+            </li>
+          </ul>
+          <form class="d-flex mt-3 mt-lg-0" role="search">
+            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+            <button class="btn btn-outline-success" type="submit">Search</button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </nav>
+
+  <div class="container my-5">
+    <div class="bg-body-tertiary p-5 rounded">
+      <div class="col-sm-8 py-5 mx-auto">
+        <h1 class="display-5 fw-normal">Navbar with offcanvas examples</h1>
+        <p class="fs-5">This example shows how responsive offcanvas menus work within the navbar. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p>
+        <p>From the top down, you'll see a dark navbar, light navbar and a responsive navbar—each with offcanvases built in. Resize your browser window to the large breakpoint to see the toggle for the offcanvas.</p>
+        <p>
+          <a class="btn btn-primary" href="{{< docsref "/components/navbar#offcanvas" >}}" role="button">Learn more about offcanvas navbars &raquo;</a>
+        </p>
+    </div>
+    </div>
+  </div>
+</main>
diff --git a/site/content/docs/5.1/examples/navbars/navbar.css b/site/content/docs/5.3/examples/navbars-offcanvas/navbars-offcanvas.css
index 70d209409..70d209409 100644
--- a/site/content/docs/5.1/examples/navbars/navbar.css
+++ b/site/content/docs/5.3/examples/navbars-offcanvas/navbars-offcanvas.css
diff --git a/site/content/docs/5.1/examples/navbars/index.html b/site/content/docs/5.3/examples/navbars/index.html
index d1c3675e4..6ccfab850 100644
--- a/site/content/docs/5.1/examples/navbars/index.html
+++ b/site/content/docs/5.3/examples/navbars/index.html
@@ -2,7 +2,7 @@
 layout: examples
 title: Navbar Template
 extra_css:
-  - "navbar.css"
+  - "navbars.css"
 ---
 
 <main>
@@ -22,11 +22,11 @@ extra_css:
             <a class="nav-link" href="#">Link</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link disabled">Disabled</a>
+            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
-            <ul class="dropdown-menu" aria-labelledby="dropdown01">
+            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+            <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
               <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -79,11 +79,11 @@ extra_css:
             <a class="nav-link" href="#">Link</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link disabled">Disabled</a>
+            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
-            <ul class="dropdown-menu" aria-labelledby="dropdown03">
+            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+            <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
               <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -113,11 +113,11 @@ extra_css:
             <a class="nav-link" href="#">Link</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link disabled">Disabled</a>
+            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
-            <ul class="dropdown-menu" aria-labelledby="dropdown04">
+            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+            <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
               <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -147,11 +147,11 @@ extra_css:
             <a class="nav-link" href="#">Link</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link disabled">Disabled</a>
+            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="dropdown05" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
-            <ul class="dropdown-menu" aria-labelledby="dropdown05">
+            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+            <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
               <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -181,11 +181,11 @@ extra_css:
             <a class="nav-link" href="#">Link</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link disabled">Disabled</a>
+            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="dropdown06" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
-            <ul class="dropdown-menu" aria-labelledby="dropdown06">
+            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+            <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
               <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -215,11 +215,11 @@ extra_css:
             <a class="nav-link" href="#">Link</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link disabled">Disabled</a>
+            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="dropdownXxl" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
-            <ul class="dropdown-menu" aria-labelledby="dropdownXxl">
+            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+            <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
               <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -249,11 +249,11 @@ extra_css:
             <a class="nav-link" href="#">Link</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link disabled">Disabled</a>
+            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="dropdown07" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
-            <ul class="dropdown-menu" aria-labelledby="dropdown07">
+            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+            <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
               <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -283,11 +283,11 @@ extra_css:
             <a class="nav-link" href="#">Link</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link disabled">Disabled</a>
+            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="dropdown07XL" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
-            <ul class="dropdown-menu" aria-labelledby="dropdown07XL">
+            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+            <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
               <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -320,11 +320,11 @@ extra_css:
             <a class="nav-link" href="#">Link</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link disabled">Disabled</a>
+            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
-            <ul class="dropdown-menu" aria-labelledby="dropdown08">
+            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+            <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
               <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -336,7 +336,7 @@ extra_css:
   </nav>
 
   <div class="container">
-    <nav class="navbar navbar-expand-lg navbar-light bg-light rounded" aria-label="Eleventh navbar example">
+    <nav class="navbar navbar-expand-lg bg-body-tertiary rounded" aria-label="Eleventh navbar example">
       <div class="container-fluid">
         <a class="navbar-brand" href="#">Navbar</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
@@ -352,11 +352,11 @@ extra_css:
               <a class="nav-link" href="#">Link</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link disabled">Disabled</a>
+              <a class="nav-link disabled" aria-disabled="true">Disabled</a>
             </li>
             <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
-              <ul class="dropdown-menu" aria-labelledby="dropdown09">
+              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+              <ul class="dropdown-menu">
                 <li><a class="dropdown-item" href="#">Action</a></li>
                 <li><a class="dropdown-item" href="#">Another action</a></li>
                 <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -370,7 +370,7 @@ extra_css:
       </div>
     </nav>
 
-    <nav class="navbar navbar-expand-lg navbar-light bg-light rounded" aria-label="Twelfth navbar example">
+    <nav class="navbar navbar-expand-lg bg-body-tertiary rounded" aria-label="Twelfth navbar example">
       <div class="container-fluid">
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
@@ -385,11 +385,11 @@ extra_css:
               <a class="nav-link" href="#">Link</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link disabled">Disabled</a>
+              <a class="nav-link disabled" aria-disabled="true">Disabled</a>
             </li>
             <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
-              <ul class="dropdown-menu" aria-labelledby="dropdown10">
+              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+              <ul class="dropdown-menu">
                 <li><a class="dropdown-item" href="#">Action</a></li>
                 <li><a class="dropdown-item" href="#">Another action</a></li>
                 <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -400,8 +400,42 @@ extra_css:
       </div>
     </nav>
 
+    <nav class="navbar navbar-expand-lg bg-body-tertiary rounded" aria-label="Thirteenth navbar example">
+      <div class="container-fluid">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample11" aria-controls="navbarsExample11" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse d-lg-flex" id="navbarsExample11">
+          <a class="navbar-brand col-lg-3 me-0" href="#">Centered nav</a>
+          <ul class="navbar-nav col-lg-6 justify-content-lg-center">
+            <li class="nav-item">
+              <a class="nav-link active" aria-current="page" href="#">Home</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Link</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+              <ul class="dropdown-menu">
+                <li><a class="dropdown-item" href="#">Action</a></li>
+                <li><a class="dropdown-item" href="#">Another action</a></li>
+                <li><a class="dropdown-item" href="#">Something else here</a></li>
+              </ul>
+            </li>
+          </ul>
+          <div class="d-lg-flex col-lg-3 justify-content-lg-end">
+            <button class="btn btn-primary">Button</button>
+          </div>
+        </div>
+      </div>
+    </nav>
+
     <div>
-      <div class="bg-light p-5 rounded">
+      <div class="bg-body-tertiaryp-5 rounded">
         <div class="col-sm-8 mx-auto">
           <h1>Navbar examples</h1>
           <p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p>
diff --git a/site/content/docs/5.3/examples/navbars/navbars.css b/site/content/docs/5.3/examples/navbars/navbars.css
new file mode 100644
index 000000000..70d209409
--- /dev/null
+++ b/site/content/docs/5.3/examples/navbars/navbars.css
@@ -0,0 +1,7 @@
+body {
+  padding-bottom: 20px;
+}
+
+.navbar {
+  margin-bottom: 20px;
+}
diff --git a/site/content/docs/5.1/examples/offcanvas-navbar/index.html b/site/content/docs/5.3/examples/offcanvas-navbar/index.html
index 258e445e6..34c06ad88 100644
--- a/site/content/docs/5.1/examples/offcanvas-navbar/index.html
+++ b/site/content/docs/5.3/examples/offcanvas-navbar/index.html
@@ -2,11 +2,12 @@
 layout: examples
 title: Offcanvas navbar template
 extra_css:
-  - "offcanvas.css"
+  - "offcanvas-navbar.css"
 extra_js:
-  - src: "offcanvas.js"
-body_class: "bg-light"
-aliases: "/docs/5.1/examples/offcanvas/"
+  - src: "offcanvas-navbar.js"
+    defer: true
+body_class: "bg-body-tertiary"
+aliases: "/docs/5.3/examples/offcanvas/"
 ---
 
 <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
@@ -31,8 +32,8 @@ aliases: "/docs/5.1/examples/offcanvas/"
           <a class="nav-link" href="#">Switch account</a>
         </li>
         <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Settings</a>
-          <ul class="dropdown-menu" aria-labelledby="dropdown01">
+          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Settings</a>
+          <ul class="dropdown-menu">
             <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
             <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -48,11 +49,11 @@ aliases: "/docs/5.1/examples/offcanvas/"
 </nav>
 
 <div class="nav-scroller bg-body shadow-sm">
-  <nav class="nav nav-underline" aria-label="Secondary navigation">
+  <nav class="nav" aria-label="Secondary navigation">
     <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
     <a class="nav-link" href="#">
       Friends
-      <span class="badge bg-light text-dark rounded-pill align-text-bottom">27</span>
+      <span class="badge text-bg-light rounded-pill align-text-bottom">27</span>
     </a>
     <a class="nav-link" href="#">Explore</a>
     <a class="nav-link" href="#">Suggestions</a>
@@ -75,21 +76,21 @@ aliases: "/docs/5.1/examples/offcanvas/"
 
   <div class="my-3 p-3 bg-body rounded shadow-sm">
     <h6 class="border-bottom pb-2 mb-0">Recent updates</h6>
-    <div class="d-flex text-muted pt-3">
+    <div class="d-flex text-body-secondary pt-3">
       {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
       <p class="pb-3 mb-0 small lh-sm border-bottom">
         <strong class="d-block text-gray-dark">@username</strong>
         Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps?
       </p>
     </div>
-    <div class="d-flex text-muted pt-3">
+    <div class="d-flex text-body-secondary pt-3">
       {{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 me-2 rounded" >}}
       <p class="pb-3 mb-0 small lh-sm border-bottom">
         <strong class="d-block text-gray-dark">@username</strong>
         Some more representative placeholder content, related to this other user. Another status update, perhaps.
       </p>
     </div>
-    <div class="d-flex text-muted pt-3">
+    <div class="d-flex text-body-secondary pt-3">
       {{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 me-2 rounded" >}}
       <p class="pb-3 mb-0 small lh-sm border-bottom">
         <strong class="d-block text-gray-dark">@username</strong>
@@ -103,7 +104,7 @@ aliases: "/docs/5.1/examples/offcanvas/"
 
   <div class="my-3 p-3 bg-body rounded shadow-sm">
     <h6 class="border-bottom pb-2 mb-0">Suggestions</h6>
-    <div class="d-flex text-muted pt-3">
+    <div class="d-flex text-body-secondary pt-3">
       {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
       <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
         <div class="d-flex justify-content-between">
@@ -113,7 +114,7 @@ aliases: "/docs/5.1/examples/offcanvas/"
         <span class="d-block">@username</span>
       </div>
     </div>
-    <div class="d-flex text-muted pt-3">
+    <div class="d-flex text-body-secondary pt-3">
       {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
       <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
         <div class="d-flex justify-content-between">
@@ -123,7 +124,7 @@ aliases: "/docs/5.1/examples/offcanvas/"
         <span class="d-block">@username</span>
       </div>
     </div>
-    <div class="d-flex text-muted pt-3">
+    <div class="d-flex text-body-secondary pt-3">
       {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
       <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
         <div class="d-flex justify-content-between">
diff --git a/site/content/docs/5.1/examples/offcanvas-navbar/offcanvas.css b/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.css
index 97fe8399c..f855b96a5 100644
--- a/site/content/docs/5.1/examples/offcanvas-navbar/offcanvas.css
+++ b/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.css
@@ -27,37 +27,22 @@ body {
   }
 }
 
-.nav-scroller {
-  position: relative;
-  z-index: 2;
-  height: 2.75rem;
-  overflow-y: hidden;
-}
-
 .nav-scroller .nav {
-  display: flex;
-  flex-wrap: nowrap;
-  padding-bottom: 1rem;
-  margin-top: -1px;
-  overflow-x: auto;
   color: rgba(255, 255, 255, .75);
-  text-align: center;
-  white-space: nowrap;
-  -webkit-overflow-scrolling: touch;
 }
 
-.nav-underline .nav-link {
+.nav-scroller .nav-link {
   padding-top: .75rem;
   padding-bottom: .75rem;
   font-size: .875rem;
   color: #6c757d;
 }
 
-.nav-underline .nav-link:hover {
+.nav-scroller .nav-link:hover {
   color: #007bff;
 }
 
-.nav-underline .active {
+.nav-scroller .active {
   font-weight: 500;
   color: #343a40;
 }
diff --git a/site/content/docs/5.1/examples/offcanvas-navbar/offcanvas.js b/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.js
index 91103b1c4..b97a17164 100644
--- a/site/content/docs/5.1/examples/offcanvas-navbar/offcanvas.js
+++ b/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.js
@@ -1,7 +1,7 @@
-(function () {
+(() => {
   'use strict'
 
-  document.querySelector('#navbarSideCollapse').addEventListener('click', function () {
+  document.querySelector('#navbarSideCollapse').addEventListener('click', () => {
     document.querySelector('.offcanvas-collapse').classList.toggle('open')
   })
 })()
diff --git a/site/content/docs/5.1/examples/pricing/index.html b/site/content/docs/5.3/examples/pricing/index.html
index c62c68c70..2f375b36d 100644
--- a/site/content/docs/5.1/examples/pricing/index.html
+++ b/site/content/docs/5.3/examples/pricing/index.html
@@ -3,10 +3,9 @@ layout: examples
 title: Pricing example
 extra_css:
   - "pricing.css"
-include_js: false
 ---
 
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
   <symbol id="check" viewBox="0 0 16 16">
     <title>Check</title>
     <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
@@ -16,22 +15,22 @@ include_js: false
 <div class="container py-3">
   <header>
     <div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
-      <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
+      <a href="/" class="d-flex align-items-center link-body-emphasis text-decoration-none">
         <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
         <span class="fs-4">Pricing example</span>
       </a>
 
       <nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
-        <a class="me-3 py-2 text-dark text-decoration-none" href="#">Features</a>
-        <a class="me-3 py-2 text-dark text-decoration-none" href="#">Enterprise</a>
-        <a class="me-3 py-2 text-dark text-decoration-none" href="#">Support</a>
-        <a class="py-2 text-dark text-decoration-none" href="#">Pricing</a>
+        <a class="me-3 py-2 link-body-emphasis text-decoration-none" href="#">Features</a>
+        <a class="me-3 py-2 link-body-emphasis text-decoration-none" href="#">Enterprise</a>
+        <a class="me-3 py-2 link-body-emphasis text-decoration-none" href="#">Support</a>
+        <a class="py-2 link-body-emphasis text-decoration-none" href="#">Pricing</a>
       </nav>
     </div>
 
     <div class="pricing-header p-3 pb-md-4 mx-auto text-center">
-      <h1 class="display-4 fw-normal">Pricing</h1>
-      <p class="fs-5 text-muted">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
+      <h1 class="display-4 fw-normal text-body-emphasis">Pricing</h1>
+      <p class="fs-5 text-body-secondary">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
     </div>
   </header>
 
@@ -43,7 +42,7 @@ include_js: false
             <h4 class="my-0 fw-normal">Free</h4>
           </div>
           <div class="card-body">
-            <h1 class="card-title pricing-card-title">$0<small class="text-muted fw-light">/mo</small></h1>
+            <h1 class="card-title pricing-card-title">$0<small class="text-body-secondary fw-light">/mo</small></h1>
             <ul class="list-unstyled mt-3 mb-4">
               <li>10 users included</li>
               <li>2 GB of storage</li>
@@ -60,7 +59,7 @@ include_js: false
             <h4 class="my-0 fw-normal">Pro</h4>
           </div>
           <div class="card-body">
-            <h1 class="card-title pricing-card-title">$15<small class="text-muted fw-light">/mo</small></h1>
+            <h1 class="card-title pricing-card-title">$15<small class="text-body-secondary fw-light">/mo</small></h1>
             <ul class="list-unstyled mt-3 mb-4">
               <li>20 users included</li>
               <li>10 GB of storage</li>
@@ -73,11 +72,11 @@ include_js: false
       </div>
       <div class="col">
         <div class="card mb-4 rounded-3 shadow-sm border-primary">
-          <div class="card-header py-3 text-white bg-primary border-primary">
+          <div class="card-header py-3 text-bg-primary border-primary">
             <h4 class="my-0 fw-normal">Enterprise</h4>
           </div>
           <div class="card-body">
-            <h1 class="card-title pricing-card-title">$29<small class="text-muted fw-light">/mo</small></h1>
+            <h1 class="card-title pricing-card-title">$29<small class="text-body-secondary fw-light">/mo</small></h1>
             <ul class="list-unstyled mt-3 mb-4">
               <li>30 users included</li>
               <li>15 GB of storage</li>
@@ -151,7 +150,7 @@ include_js: false
     <div class="row">
       <div class="col-12 col-md">
         <img class="mb-2" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="24" height="19">
-        <small class="d-block mb-3 text-muted">&copy; 2017–{{< year >}}</small>
+        <small class="d-block mb-3 text-body-secondary">&copy; 2017–{{< year >}}</small>
       </div>
       <div class="col-6 col-md">
         <h5>Features</h5>
diff --git a/site/content/docs/5.3/examples/pricing/pricing.css b/site/content/docs/5.3/examples/pricing/pricing.css
new file mode 100644
index 000000000..c65d0208f
--- /dev/null
+++ b/site/content/docs/5.3/examples/pricing/pricing.css
@@ -0,0 +1,11 @@
+body {
+  background-image: linear-gradient(180deg, var(--bs-secondary-bg), var(--bs-body-bg) 100px, var(--bs-body-bg));
+}
+
+.container {
+  max-width: 960px;
+}
+
+.pricing-header {
+  max-width: 700px;
+}
diff --git a/site/content/docs/5.3/examples/product/index.html b/site/content/docs/5.3/examples/product/index.html
new file mode 100644
index 000000000..fd4d49847
--- /dev/null
+++ b/site/content/docs/5.3/examples/product/index.html
@@ -0,0 +1,189 @@
+---
+layout: examples
+title: Product example
+extra_css:
+  - "product.css"
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+  <symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
+    <circle cx="12" cy="12" r="10"/>
+    <path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/>
+  </symbol>
+  <symbol id="cart" viewBox="0 0 16 16">
+    <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+  </symbol>
+  <symbol id="chevron-right" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+  </symbol>
+</svg>
+
+<nav class="navbar navbar-expand-md bg-dark sticky-top border-bottom" data-bs-theme="dark">
+  <div class="container">
+    <a class="navbar-brand d-md-none" href="#">
+      <svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg>
+      Aperture
+    </a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
+      <div class="offcanvas-header">
+        <h5 class="offcanvas-title" id="offcanvasLabel">Aperture</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      </div>
+      <div class="offcanvas-body">
+        <ul class="navbar-nav flex-grow-1 justify-content-between">
+          <li class="nav-item"><a class="nav-link" href="#">
+            <svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg>
+          </a></li>
+          <li class="nav-item"><a class="nav-link" href="#">Tour</a></li>
+          <li class="nav-item"><a class="nav-link" href="#">Product</a></li>
+          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
+          <li class="nav-item"><a class="nav-link" href="#">Enterprise</a></li>
+          <li class="nav-item"><a class="nav-link" href="#">Support</a></li>
+          <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
+          <li class="nav-item"><a class="nav-link" href="#">
+            <svg class="bi" width="24" height="24"><use xlink:href="#cart"/></svg>
+          </a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</nav>
+
+<main>
+  <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-body-tertiary">
+    <div class="col-md-6 p-lg-5 mx-auto my-5">
+      <h1 class="display-3 fw-bold">Designed for engineers</h1>
+      <h3 class="fw-normal text-muted mb-3">Build anything you want with Aperture</h3>
+      <div class="d-flex gap-3 justify-content-center lead fw-normal">
+        <a class="icon-link" href="#">
+          Learn more
+          <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+        </a>
+        <a class="icon-link" href="#">
+          Buy
+          <svg class="bi"><use xlink:href="#chevron-right"/></svg>
+        </a>
+      </div>
+    </div>
+    <div class="product-device shadow-sm d-none d-md-block"></div>
+    <div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
+  </div>
+
+  <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
+    <div class="text-bg-dark me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+      <div class="my-3 py-3">
+        <h2 class="display-5">Another headline</h2>
+        <p class="lead">And an even wittier subheading.</p>
+      </div>
+      <div class="bg-body-tertiary shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+    </div>
+    <div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+      <div class="my-3 p-3">
+        <h2 class="display-5">Another headline</h2>
+        <p class="lead">And an even wittier subheading.</p>
+      </div>
+      <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+    </div>
+  </div>
+
+  <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
+    <div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+      <div class="my-3 p-3">
+        <h2 class="display-5">Another headline</h2>
+        <p class="lead">And an even wittier subheading.</p>
+      </div>
+      <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+    </div>
+    <div class="text-bg-primary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+      <div class="my-3 py-3">
+        <h2 class="display-5">Another headline</h2>
+        <p class="lead">And an even wittier subheading.</p>
+      </div>
+      <div class="bg-body-tertiary shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+    </div>
+  </div>
+
+  <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
+    <div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+      <div class="my-3 p-3">
+        <h2 class="display-5">Another headline</h2>
+        <p class="lead">And an even wittier subheading.</p>
+      </div>
+      <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+    </div>
+    <div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+      <div class="my-3 py-3">
+        <h2 class="display-5">Another headline</h2>
+        <p class="lead">And an even wittier subheading.</p>
+      </div>
+      <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+    </div>
+  </div>
+
+  <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
+    <div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+      <div class="my-3 p-3">
+        <h2 class="display-5">Another headline</h2>
+        <p class="lead">And an even wittier subheading.</p>
+      </div>
+      <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+    </div>
+    <div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+      <div class="my-3 py-3">
+        <h2 class="display-5">Another headline</h2>
+        <p class="lead">And an even wittier subheading.</p>
+      </div>
+      <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+    </div>
+  </div>
+</main>
+
+<footer class="container py-5">
+  <div class="row">
+    <div class="col-12 col-md">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mb-2" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>
+      <small class="d-block mb-3 text-body-secondary">&copy; 2017–{{< year >}}</small>
+    </div>
+    <div class="col-6 col-md">
+      <h5>Features</h5>
+      <ul class="list-unstyled text-small">
+        <li><a class="link-secondary text-decoration-none" href="#">Cool stuff</a></li>
+        <li><a class="link-secondary text-decoration-none" href="#">Random feature</a></li>
+        <li><a class="link-secondary text-decoration-none" href="#">Team feature</a></li>
+        <li><a class="link-secondary text-decoration-none" href="#">Stuff for developers</a></li>
+        <li><a class="link-secondary text-decoration-none" href="#">Another one</a></li>
+        <li><a class="link-secondary text-decoration-none" href="#">Last time</a></li>
+      </ul>
+    </div>
+    <div class="col-6 col-md">
+      <h5>Resources</h5>
+      <ul class="list-unstyled text-small">
+        <li><a class="link-secondary text-decoration-none" href="#">Resource name</a></li>
+        <li><a class="link-secondary text-decoration-none" href="#">Resource</a></li>
+        <li><a class="link-secondary text-decoration-none" href="#">Another resource</a></li>
+        <li><a class="link-secondary text-decoration-none" href="#">Final resource</a></li>
+      </ul>
+    </div>
+    <div class="col-6 col-md">
+      <h5>Resources</h5>
+      <ul class="list-unstyled text-small">
+        <li><a class="link-secondary text-decoration-none" href="#">Business</a></li>
+        <li><a class="link-secondary text-decoration-none" href="#">Education</a></li>
+        <li><a class="link-secondary text-decoration-none" href="#">Government</a></li>
+        <li><a class="link-secondary text-decoration-none" href="#">Gaming</a></li>
+      </ul>
+    </div>
+    <div class="col-6 col-md">
+      <h5>About</h5>
+      <ul class="list-unstyled text-small">
+        <li><a class="link-secondary text-decoration-none" href="#">Team</a></li>
+        <li><a class="link-secondary text-decoration-none" href="#">Locations</a></li>
+        <li><a class="link-secondary text-decoration-none" href="#">Privacy</a></li>
+        <li><a class="link-secondary text-decoration-none" href="#">Terms</a></li>
+      </ul>
+    </div>
+  </div>
+</footer>
diff --git a/site/content/docs/5.1/examples/product/product.css b/site/content/docs/5.3/examples/product/product.css
index 5fcb582b4..6c90ae51e 100644
--- a/site/content/docs/5.1/examples/product/product.css
+++ b/site/content/docs/5.3/examples/product/product.css
@@ -2,6 +2,11 @@
   max-width: 960px;
 }
 
+.icon-link > .bi {
+  width: .75em;
+  height: .75em;
+}
+
 /*
  * Custom translucent site header
  */
diff --git a/site/content/docs/5.3/examples/sidebars/index.html b/site/content/docs/5.3/examples/sidebars/index.html
new file mode 100644
index 000000000..135c26832
--- /dev/null
+++ b/site/content/docs/5.3/examples/sidebars/index.html
@@ -0,0 +1,357 @@
+---
+layout: examples
+title: Sidebars
+extra_css:
+  - "sidebars.css"
+extra_js:
+  - src: "sidebars.js"
+    defer: true
+body_class: ""
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+  <symbol id="bootstrap" viewBox="0 0 118 94">
+    <title>Bootstrap</title>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
+  </symbol>
+  <symbol id="home" viewBox="0 0 16 16">
+    <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/>
+  </symbol>
+  <symbol id="speedometer2" viewBox="0 0 16 16">
+    <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
+    <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/>
+  </symbol>
+  <symbol id="table" viewBox="0 0 16 16">
+    <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/>
+  </symbol>
+  <symbol id="people-circle" viewBox="0 0 16 16">
+    <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
+    <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
+  </symbol>
+  <symbol id="grid" viewBox="0 0 16 16">
+    <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
+  </symbol>
+</svg>
+
+<main class="d-flex flex-nowrap">
+  <h1 class="visually-hidden">Sidebars examples</h1>
+
+  <div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;">
+    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
+      <svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+      <span class="fs-4">Sidebar</span>
+    </a>
+    <hr>
+    <ul class="nav nav-pills flex-column mb-auto">
+      <li class="nav-item">
+        <a href="#" class="nav-link active" aria-current="page">
+          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"/></svg>
+          Home
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link text-white">
+          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
+          Dashboard
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link text-white">
+          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg>
+          Orders
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link text-white">
+          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
+          Products
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link text-white">
+          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
+          Customers
+        </a>
+      </li>
+    </ul>
+    <hr>
+    <div class="dropdown">
+      <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+        <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
+        <strong>mdo</strong>
+      </a>
+      <ul class="dropdown-menu dropdown-menu-dark text-small shadow">
+        <li><a class="dropdown-item" href="#">New project...</a></li>
+        <li><a class="dropdown-item" href="#">Settings</a></li>
+        <li><a class="dropdown-item" href="#">Profile</a></li>
+        <li><hr class="dropdown-divider"></li>
+        <li><a class="dropdown-item" href="#">Sign out</a></li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="b-example-divider b-example-vr"></div>
+
+  <div class="d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary" style="width: 280px;">
+    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
+      <svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+      <span class="fs-4">Sidebar</span>
+    </a>
+    <hr>
+    <ul class="nav nav-pills flex-column mb-auto">
+      <li class="nav-item">
+        <a href="#" class="nav-link active" aria-current="page">
+          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"/></svg>
+          Home
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link link-body-emphasis">
+          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
+          Dashboard
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link link-body-emphasis">
+          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg>
+          Orders
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link link-body-emphasis">
+          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
+          Products
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link link-body-emphasis">
+          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
+          Customers
+        </a>
+      </li>
+    </ul>
+    <hr>
+    <div class="dropdown">
+      <a href="#" class="d-flex align-items-center link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+        <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
+        <strong>mdo</strong>
+      </a>
+      <ul class="dropdown-menu text-small shadow">
+        <li><a class="dropdown-item" href="#">New project...</a></li>
+        <li><a class="dropdown-item" href="#">Settings</a></li>
+        <li><a class="dropdown-item" href="#">Profile</a></li>
+        <li><hr class="dropdown-divider"></li>
+        <li><a class="dropdown-item" href="#">Sign out</a></li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="b-example-divider b-example-vr"></div>
+
+  <div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 4.5rem;">
+    <a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
+      <svg class="bi pe-none" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+      <span class="visually-hidden">Icon-only</span>
+    </a>
+    <ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
+      <li class="nav-item">
+        <a href="#" class="nav-link active py-3 border-bottom rounded-0" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
+          <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Home"><use xlink:href="#home"/></svg>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link py-3 border-bottom rounded-0" title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right">
+          <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Dashboard"><use xlink:href="#speedometer2"/></svg>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link py-3 border-bottom rounded-0" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right">
+          <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Orders"><use xlink:href="#table"/></svg>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link py-3 border-bottom rounded-0" title="Products" data-bs-toggle="tooltip" data-bs-placement="right">
+          <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Products"><use xlink:href="#grid"/></svg>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link py-3 border-bottom rounded-0" title="Customers" data-bs-toggle="tooltip" data-bs-placement="right">
+          <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Customers"><use xlink:href="#people-circle"/></svg>
+        </a>
+      </li>
+    </ul>
+    <div class="dropdown border-top">
+      <a href="#" class="d-flex align-items-center justify-content-center p-3 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+        <img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle">
+      </a>
+      <ul class="dropdown-menu text-small shadow">
+        <li><a class="dropdown-item" href="#">New project...</a></li>
+        <li><a class="dropdown-item" href="#">Settings</a></li>
+        <li><a class="dropdown-item" href="#">Profile</a></li>
+        <li><hr class="dropdown-divider"></li>
+        <li><a class="dropdown-item" href="#">Sign out</a></li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="b-example-divider b-example-vr"></div>
+
+  <div class="flex-shrink-0 p-3" style="width: 280px;">
+    <a href="/" class="d-flex align-items-center pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom">
+      <svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
+      <span class="fs-5 fw-semibold">Collapsible</span>
+    </a>
+    <ul class="list-unstyled ps-0">
+      <li class="mb-1">
+        <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true">
+          Home
+        </button>
+        <div class="collapse show" id="home-collapse">
+          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Overview</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Updates</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Reports</a></li>
+          </ul>
+        </div>
+      </li>
+      <li class="mb-1">
+        <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
+          Dashboard
+        </button>
+        <div class="collapse" id="dashboard-collapse">
+          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Overview</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Weekly</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Monthly</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Annually</a></li>
+          </ul>
+        </div>
+      </li>
+      <li class="mb-1">
+        <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">
+          Orders
+        </button>
+        <div class="collapse" id="orders-collapse">
+          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">New</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Processed</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Shipped</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Returned</a></li>
+          </ul>
+        </div>
+      </li>
+      <li class="border-top my-3"></li>
+      <li class="mb-1">
+        <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
+          Account
+        </button>
+        <div class="collapse" id="account-collapse">
+          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">New...</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Profile</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Settings</a></li>
+            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Sign out</a></li>
+          </ul>
+        </div>
+      </li>
+    </ul>
+  </div>
+
+  <div class="b-example-divider b-example-vr"></div>
+
+  <div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-body-tertiary" style="width: 380px;">
+    <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
+      <svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
+      <span class="fs-5 fw-semibold">List group</span>
+    </a>
+    <div class="list-group list-group-flush border-bottom scrollarea">
+      <a href="#" class="list-group-item list-group-item-action active py-3 lh-sm" aria-current="true">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small>Wed</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-body-secondary">Tues</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-body-secondary">Mon</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-body-secondary">Wed</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-body-secondary">Tues</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-body-secondary">Mon</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-body-secondary">Wed</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-body-secondary">Tues</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-body-secondary">Mon</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-body-secondary">Wed</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-body-secondary">Tues</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-body-secondary">Mon</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+    </div>
+  </div>
+
+  <div class="b-example-divider b-example-vr"></div>
+</main>
diff --git a/site/content/docs/5.1/examples/sidebars/sidebars.css b/site/content/docs/5.3/examples/sidebars/sidebars.css
index 6949a379e..f6a8f1c53 100644
--- a/site/content/docs/5.1/examples/sidebars/sidebars.css
+++ b/site/content/docs/5.3/examples/sidebars/sidebars.css
@@ -8,8 +8,6 @@ html {
 }
 
 main {
-  display: flex;
-  flex-wrap: nowrap;
   height: 100vh;
   height: -webkit-fill-available;
   max-height: 100vh;
@@ -17,41 +15,18 @@ main {
   overflow-y: hidden;
 }
 
-.b-example-divider {
-  flex-shrink: 0;
-  width: 1.5rem;
-  height: 100vh;
-  background-color: rgba(0, 0, 0, .1);
-  border: solid rgba(0, 0, 0, .15);
-  border-width: 1px 0;
-  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
-}
-
-.bi {
-  vertical-align: -.125em;
-  pointer-events: none;
-  fill: currentColor;
-}
-
 .dropdown-toggle { outline: 0; }
 
-.nav-flush .nav-link {
-  border-radius: 0;
-}
-
 .btn-toggle {
-  display: inline-flex;
-  align-items: center;
   padding: .25rem .5rem;
   font-weight: 600;
-  color: rgba(0, 0, 0, .65);
+  color: var(--bs-emphasis-color);
   background-color: transparent;
-  border: 0;
 }
 .btn-toggle:hover,
 .btn-toggle:focus {
-  color: rgba(0, 0, 0, .85);
-  background-color: #d2f4ea;
+  color: rgba(var(--bs-emphasis-color-rgb), .85);
+  background-color: var(--bs-tertiary-bg);
 }
 
 .btn-toggle::before {
@@ -62,28 +37,27 @@ main {
   transform-origin: .5em 50%;
 }
 
+[data-bs-theme="dark"] .btn-toggle::before {
+  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+}
+
 .btn-toggle[aria-expanded="true"] {
-  color: rgba(0, 0, 0, .85);
+  color: rgba(var(--bs-emphasis-color-rgb), .85);
 }
 .btn-toggle[aria-expanded="true"]::before {
   transform: rotate(90deg);
 }
 
 .btn-toggle-nav a {
-  display: inline-flex;
   padding: .1875rem .5rem;
   margin-top: .125rem;
   margin-left: 1.25rem;
-  text-decoration: none;
 }
 .btn-toggle-nav a:hover,
 .btn-toggle-nav a:focus {
-  background-color: #d2f4ea;
+  background-color: var(--bs-tertiary-bg);
 }
 
 .scrollarea {
   overflow-y: auto;
 }
-
-.fw-semibold { font-weight: 600; }
-.lh-tight { line-height: 1.25; }
diff --git a/site/content/docs/5.3/examples/sidebars/sidebars.js b/site/content/docs/5.3/examples/sidebars/sidebars.js
new file mode 100644
index 000000000..4075f1f15
--- /dev/null
+++ b/site/content/docs/5.3/examples/sidebars/sidebars.js
@@ -0,0 +1,8 @@
+/* global bootstrap: false */
+(() => {
+  'use strict'
+  const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+  tooltipTriggerList.forEach(tooltipTriggerEl => {
+    new bootstrap.Tooltip(tooltipTriggerEl)
+  })
+})()
diff --git a/site/content/docs/5.1/examples/sign-in/index.html b/site/content/docs/5.3/examples/sign-in/index.html
index fb885ba41..8420c4527 100644
--- a/site/content/docs/5.1/examples/sign-in/index.html
+++ b/site/content/docs/5.3/examples/sign-in/index.html
@@ -2,12 +2,11 @@
 layout: examples
 title: Signin Template
 extra_css:
-  - "signin.css"
-body_class: "text-center"
-include_js: false
+  - "sign-in.css"
+body_class: "d-flex align-items-center py-4 bg-body-tertiary"
 ---
 
-<main class="form-signin">
+<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">
     <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
@@ -21,12 +20,13 @@ include_js: false
       <label for="floatingPassword">Password</label>
     </div>
 
-    <div class="checkbox mb-3">
-      <label>
-        <input type="checkbox" value="remember-me"> Remember me
+    <div class="form-check text-start my-3">
+      <input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault">
+      <label class="form-check-label" for="flexCheckDefault">
+        Remember me
       </label>
     </div>
-    <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
-    <p class="mt-5 mb-3 text-muted">&copy; 2017–{{< year >}}</p>
+    <button class="btn btn-primary w-100 py-2" type="submit">Sign in</button>
+    <p class="mt-5 mb-3 text-body-secondary">&copy; 2017–{{< year >}}</p>
   </form>
 </main>
diff --git a/site/content/docs/5.1/examples/sign-in/signin.css b/site/content/docs/5.3/examples/sign-in/sign-in.css
index 4732d1fb9..641f6d906 100644
--- a/site/content/docs/5.1/examples/sign-in/signin.css
+++ b/site/content/docs/5.3/examples/sign-in/sign-in.css
@@ -3,23 +3,9 @@ body {
   height: 100%;
 }
 
-body {
-  display: flex;
-  align-items: center;
-  padding-top: 40px;
-  padding-bottom: 40px;
-  background-color: #f5f5f5;
-}
-
 .form-signin {
-  width: 100%;
   max-width: 330px;
-  padding: 15px;
-  margin: auto;
-}
-
-.form-signin .checkbox {
-  font-weight: 400;
+  padding: 1rem;
 }
 
 .form-signin .form-floating:focus-within {
diff --git a/site/content/docs/5.3/examples/starter-template/index.html b/site/content/docs/5.3/examples/starter-template/index.html
new file mode 100644
index 000000000..75f029a56
--- /dev/null
+++ b/site/content/docs/5.3/examples/starter-template/index.html
@@ -0,0 +1,107 @@
+---
+layout: examples
+title: Starter Template
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+  <symbol id="arrow-right-circle" viewBox="0 0 16 16">
+    <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
+  </symbol>
+  <symbol id="bootstrap" viewBox="0 0 118 94">
+    <title>Bootstrap</title>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
+  </symbol>
+</svg>
+
+<div class="col-lg-8 mx-auto p-4 py-md-5">
+  <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
+    <a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
+      <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+      <span class="fs-4">Starter template</span>
+    </a>
+  </header>
+
+  <main>
+    <h1 class="text-body-emphasis">Get started with Bootstrap</h1>
+    <p class="fs-5 col-md-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p>
+
+    <div class="mb-5">
+      <a href="{{< docsref "/examples" >}}" class="btn btn-primary btn-lg px-4">Download examples</a>
+    </div>
+
+    <hr class="col-3 col-md-2 mb-5">
+
+    <div class="row g-5">
+      <div class="col-md-6">
+        <h2 class="text-body-emphasis">Starter projects</h2>
+        <p>Ready to go beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p>
+        <ul class="list-unstyled ps-0">
+          <li>
+            <a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/icons-font" rel="noopener" target="_blank">
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+              Bootstrap npm starter
+            </a>
+          </li>
+          <li>
+            <a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/parcel" rel="noopener" target="_blank">
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+              Bootstrap Parcel starter
+            </a>
+          </li>
+          <li>
+            <a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/vite" rel="noopener" target="_blank">
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+              Bootstrap Vite starter
+            </a>
+          </li>
+          <li>
+            <a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/webpack" rel="noopener" target="_blank">
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+              Bootstrap Webpack starter
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <div class="col-md-6">
+        <h2 class="text-body-emphasis">Guides</h2>
+        <p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p>
+        <ul class="list-unstyled ps-0">
+          <li>
+            <a class="icon-link mb-1" href="{{< docsref "/getting-started/introduction" >}}">
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+              Bootstrap quick start guide
+            </a>
+          </li>
+          <li>
+            <a class="icon-link mb-1" href="{{< docsref "/getting-started/webpack" >}}">
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+              Bootstrap Webpack guide
+            </a>
+          </li>
+          <li>
+            <a class="icon-link mb-1" href="{{< docsref "/getting-started/parcel" >}}">
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+              Bootstrap Parcel guide
+            </a>
+          </li>
+          <li>
+            <a class="icon-link mb-1" href="{{< docsref "/getting-started/vite" >}}">
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+              Bootstrap Vite guide
+            </a>
+          </li>
+          <li>
+            <a class="icon-link mb-1" href="{{< docsref "/getting-started/contribute" >}}">
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+              Contributing to Bootstrap
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </main>
+  <footer class="pt-5 my-5 text-body-secondary border-top">
+    Created by the Bootstrap team &middot; &copy; {{< year >}}
+  </footer>
+</div>
diff --git a/site/content/docs/5.1/examples/sticky-footer-navbar/index.html b/site/content/docs/5.3/examples/sticky-footer-navbar/index.html
index 1f807a6dc..36bbff50e 100644
--- a/site/content/docs/5.1/examples/sticky-footer-navbar/index.html
+++ b/site/content/docs/5.3/examples/sticky-footer-navbar/index.html
@@ -24,7 +24,7 @@ body_class: "d-flex flex-column h-100"
             <a class="nav-link" href="#">Link</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link disabled">Disabled</a>
+            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
         </ul>
         <form class="d-flex" role="search">
@@ -45,8 +45,8 @@ body_class: "d-flex flex-column h-100"
   </div>
 </main>
 
-<footer class="footer mt-auto py-3 bg-light">
+<footer class="footer mt-auto py-3 bg-body-tertiary">
   <div class="container">
-    <span class="text-muted">Place sticky footer content here.</span>
+    <span class="text-body-secondary">Place sticky footer content here.</span>
   </div>
 </footer>
diff --git a/site/content/docs/5.1/examples/sticky-footer-navbar/sticky-footer-navbar.css b/site/content/docs/5.3/examples/sticky-footer-navbar/sticky-footer-navbar.css
index 3087ead7d..3087ead7d 100644
--- a/site/content/docs/5.1/examples/sticky-footer-navbar/sticky-footer-navbar.css
+++ b/site/content/docs/5.3/examples/sticky-footer-navbar/sticky-footer-navbar.css
diff --git a/site/content/docs/5.1/examples/sticky-footer/index.html b/site/content/docs/5.3/examples/sticky-footer/index.html
index 7a6e127cd..631addabe 100644
--- a/site/content/docs/5.1/examples/sticky-footer/index.html
+++ b/site/content/docs/5.3/examples/sticky-footer/index.html
@@ -5,7 +5,6 @@ extra_css:
   - "sticky-footer.css"
 html_class: "h-100"
 body_class: "d-flex flex-column h-100"
-include_js: false
 ---
 
 <!-- Begin page content -->
@@ -17,8 +16,8 @@ include_js: false
   </div>
 </main>
 
-<footer class="footer mt-auto py-3 bg-light">
+<footer class="footer mt-auto py-3 bg-body-tertiary">
   <div class="container">
-    <span class="text-muted">Place sticky footer content here.</span>
+    <span class="text-body-secondary">Place sticky footer content here.</span>
   </div>
 </footer>
diff --git a/site/content/docs/5.1/examples/sticky-footer/sticky-footer.css b/site/content/docs/5.3/examples/sticky-footer/sticky-footer.css
index f8be43729..f8be43729 100644
--- a/site/content/docs/5.1/examples/sticky-footer/sticky-footer.css
+++ b/site/content/docs/5.3/examples/sticky-footer/sticky-footer.css
diff --git a/site/content/docs/5.1/extend/approach.md b/site/content/docs/5.3/extend/approach.md
index 033ab219f..392aef4d3 100644
--- a/site/content/docs/5.1/extend/approach.md
+++ b/site/content/docs/5.3/extend/approach.md
@@ -4,12 +4,12 @@ title: Approach
 description: Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself.
 group: extend
 aliases:
-  - "/docs/5.1/extend/"
+  - "/docs/5.3/extend/"
 ---
 
 While the getting started pages provide an introductory tour of the project and what it offers, this document focuses on _why_ we do the things we do in Bootstrap. It explains our philosophy to building on the web so that others can learn from us, contribute with us, and help us improve.
 
-See something that doesn't sound right, or perhaps could be done better? [Open an issue]({{< param repo >}}/issues/new)—we'd love to discuss it with you.
+See something that doesn't sound right, or perhaps could be done better? [Open an issue]({{< param repo >}}/issues/new/choose)—we'd love to discuss it with you.
 
 ## Summary
 
@@ -18,7 +18,7 @@ We'll dive into each of these more throughout, but at a high level, here's what
 - Components should be responsive and mobile-first
 - Components should be built with a base class and extended via modifier classes
 - Component states should obey a common z-index scale
-- Whenever possible, prefer a HTML and CSS implementation over JavaScript
+- Whenever possible, prefer an HTML and CSS implementation over JavaScript
 - Whenever possible, use utilities over custom styles
 - Whenever possible, avoid enforcing strict HTML requirements (children selectors)
 
@@ -65,11 +65,11 @@ This principle is our first-class JavaScript API using `data` attributes. You do
 
 Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a `.btn` class on nearly any element, but most elements don't provide any semantic value or browser functionality. So instead, we use `<button>`s and `<a>`s.
 
-The same goes for more complex components. While we *could* write our own form validation plugin to add classes to a parent element based on an input's state, thereby allowing us to style the text say red, we prefer using the `:valid`/`:invalid` pseudo-elements every browser provides us.
+The same goes for more complex components. While we _could_ write our own form validation plugin to add classes to a parent element based on an input's state, thereby allowing us to style the text say red, we prefer using the `:valid`/`:invalid` pseudo-elements every browser provides us.
 
 ## Utilities
 
-Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., `.d-block` represents `display: block;`). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.
+Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combating CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., `.d-block` represents `display: block;`). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.
 
 Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.
 
diff --git a/site/content/docs/5.1/extend/icons.md b/site/content/docs/5.3/extend/icons.md
index 1e26503bd..1e26503bd 100644
--- a/site/content/docs/5.1/extend/icons.md
+++ b/site/content/docs/5.3/extend/icons.md
diff --git a/site/content/docs/5.1/forms/checks-radios.md b/site/content/docs/5.3/forms/checks-radios.md
index efd040de0..fe1ed948e 100644
--- a/site/content/docs/5.1/forms/checks-radios.md
+++ b/site/content/docs/5.3/forms/checks-radios.md
@@ -3,7 +3,7 @@ layout: docs
 title: Checks and radios
 description: Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.
 group: forms
-aliases: "/docs/5.1/forms/checks/"
+aliases: "/docs/5.3/forms/checks/"
 toc: true
 ---
 
@@ -36,7 +36,7 @@ Our checks use custom Bootstrap icons to indicate checked or indeterminate state
 
 Checkboxes can utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
 
-{{< example class="bd-example-indeterminate">}}
+{{< example class="bd-example-indeterminate" stackblitz_add_js="true" >}}
 <div class="form-check">
   <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
   <label class="form-check-label" for="flexCheckIndeterminate">
@@ -49,7 +49,13 @@ Checkboxes can utilize the `:indeterminate` pseudo class when manually set via J
 
 Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.
 
-{{< example >}}
+{{< example class="bd-example-indeterminate" stackblitz_add_js="true" >}}
+<div class="form-check">
+  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled>
+  <label class="form-check-label" for="flexCheckIndeterminateDisabled">
+    Disabled indeterminate checkbox
+  </label>
+</div>
 <div class="form-check">
   <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
   <label class="form-check-label" for="flexCheckDisabled">
@@ -197,6 +203,30 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
 </div>
 {{< /example >}}
 
+## Reverse
+
+Put your checkboxes, radios, and switches on the opposite side with the `.form-check-reverse` modifier class.
+
+{{< example >}}
+<div class="form-check form-check-reverse">
+  <input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
+  <label class="form-check-label" for="reverseCheck1">
+    Reverse checkbox
+  </label>
+</div>
+<div class="form-check form-check-reverse">
+  <input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
+  <label class="form-check-label" for="reverseCheck2">
+    Disabled reverse checkbox
+  </label>
+</div>
+
+<div class="form-check form-switch form-check-reverse">
+  <input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse">
+  <label class="form-check-label" for="flexSwitchCheckReverse">Reverse switch checkbox input</label>
+</div>
+{{< /example >}}
+
 ## Without labels
 
 Omit the wrapping `.form-check` for checkboxes and radios that have no label text. Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`). See the [forms overview accessibility]({{< docsref "/forms/overview#accessibility" >}}) section for details.
@@ -220,18 +250,25 @@ Create button-like checkboxes and radio buttons by using `.btn` styles rather th
 {{< example >}}
 <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
 <label class="btn btn-primary" for="btn-check">Single toggle</label>
-{{< /example >}}
 
-{{< example >}}
 <input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
 <label class="btn btn-primary" for="btn-check-2">Checked</label>
-{{< /example >}}
 
-{{< example >}}
 <input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
 <label class="btn btn-primary" for="btn-check-3">Disabled</label>
 {{< /example >}}
 
+{{< example >}}
+<input type="checkbox" class="btn-check" id="btn-check-4" autocomplete="off">
+<label class="btn" for="btn-check-4">Single toggle</label>
+
+<input type="checkbox" class="btn-check" id="btn-check-5" checked autocomplete="off">
+<label class="btn" for="btn-check-5">Checked</label>
+
+<input type="checkbox" class="btn-check" id="btn-check-6" autocomplete="off" disabled>
+<label class="btn" for="btn-check-6">Disabled</label>
+{{< /example >}}
+
 {{< callout info >}}
 Visually, these checkbox toggle buttons are identical to the [button plugin toggle buttons]({{< docsref "/components/buttons#button-plugin" >}}). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as "checked"/"not checked" (since, despite their appearance, they are fundamentally still checkboxes), whereas the button plugin toggle buttons will be announced as "button"/"button pressed". The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.
 {{< /callout >}}
@@ -252,9 +289,23 @@ Visually, these checkbox toggle buttons are identical to the [button plugin togg
 <label class="btn btn-secondary" for="option4">Radio</label>
 {{< /example >}}
 
+{{< example >}}
+<input type="radio" class="btn-check" name="options-base" id="option5" autocomplete="off" checked>
+<label class="btn" for="option5">Checked</label>
+
+<input type="radio" class="btn-check" name="options-base" id="option6" autocomplete="off">
+<label class="btn" for="option6">Radio</label>
+
+<input type="radio" class="btn-check" name="options-base" id="option7" autocomplete="off" disabled>
+<label class="btn" for="option7">Disabled</label>
+
+<input type="radio" class="btn-check" name="options-base" id="option8" autocomplete="off">
+<label class="btn" for="option8">Radio</label>
+{{< /example >}}
+
 ### Outlined styles
 
-Different variants of `.btn`, such at the various outlined styles, are supported.
+Different variants of `.btn`, such as the various outlined styles, are supported.
 
 {{< example >}}
 <input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
@@ -270,8 +321,14 @@ Different variants of `.btn`, such at the various outlined styles, are supported
 <label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
 {{< /example >}}
 
-## Sass
+## CSS
+
+### Sass variables
 
-### Variables
+Variables for checks:
 
 {{< scss-docs name="form-check-variables" file="scss/_variables.scss" >}}
+
+Variables for switches:
+
+{{< scss-docs name="form-switch-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.1/forms/floating-labels.md b/site/content/docs/5.3/forms/floating-labels.md
index 2ac675204..9a390e4ff 100644
--- a/site/content/docs/5.1/forms/floating-labels.md
+++ b/site/content/docs/5.3/forms/floating-labels.md
@@ -75,6 +75,78 @@ Other than `.form-control`, floating labels are only available on `.form-select`
 </div>
 {{< /example >}}
 
+## Disabled
+
+Add the `disabled` boolean attribute on an input, a textarea or a select to give it a grayed out appearance, remove pointer events, and prevent focusing.
+
+{{< example >}}
+<div class="form-floating mb-3">
+  <input type="email" class="form-control" id="floatingInputDisabled" placeholder="[email protected]" disabled>
+  <label for="floatingInputDisabled">Email address</label>
+</div>
+<div class="form-floating mb-3">
+  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled" disabled></textarea>
+  <label for="floatingTextareaDisabled">Comments</label>
+</div>
+<div class="form-floating mb-3">
+  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2Disabled" style="height: 100px" disabled>Disabled textarea with some text inside</textarea>
+  <label for="floatingTextarea2Disabled">Comments</label>
+</div>
+<div class="form-floating">
+  <select class="form-select" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled>
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+  <label for="floatingSelectDisabled">Works with selects</label>
+</div>
+{{< /example >}}
+
+## Readonly plaintext
+
+Floating labels also support `.form-control-plaintext`, which can be helpful for toggling from an editable `<input>` to a plaintext value without affecting the page layout.
+
+{{< example >}}
+<div class="form-floating mb-3">
+  <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]">
+  <label for="floatingEmptyPlaintextInput">Empty input</label>
+</div>
+<div class="form-floating mb-3">
+  <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="[email protected]" value="[email protected]">
+  <label for="floatingPlaintextInput">Input with value</label>
+</div>
+{{< /example >}}
+
+## Input groups
+
+Floating labels also support `.input-group`.
+
+{{< example >}}
+<div class="input-group mb-3">
+  <span class="input-group-text">@</span>
+  <div class="form-floating">
+    <input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
+    <label for="floatingInputGroup1">Username</label>
+  </div>
+</div>
+{{< /example >}}
+
+When using `.input-group` and `.form-floating` along with form validation, the `-feedback` should be placed outside of the `.form-floating`, but inside of the `.input-group`. This means that the feedback will need to be shown using javascript.
+
+{{< example >}}
+<div class="input-group has-validation">
+  <span class="input-group-text">@</span>
+  <div class="form-floating is-invalid">
+    <input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username" required>
+    <label for="floatingInputGroup2">Username</label>
+  </div>
+  <div class="invalid-feedback">
+    Please choose a username.
+  </div>
+</div>
+{{< /example >}}
+
 ## Layout
 
 When working with the Bootstrap grid system, be sure to place form elements within column classes.
@@ -101,8 +173,8 @@ When working with the Bootstrap grid system, be sure to place form elements with
 </div>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
 
 {{< scss-docs name="form-floating-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.1/forms/form-control.md b/site/content/docs/5.3/forms/form-control.md
index 9c1c495b1..1f3474dac 100644
--- a/site/content/docs/5.1/forms/form-control.md
+++ b/site/content/docs/5.3/forms/form-control.md
@@ -8,6 +8,8 @@ toc: true
 
 ## Example
 
+Form controls are styled with a mix of Sass and CSS variables, allowing them to adapt to color modes and support any customization method.
+
 {{< example >}}
 <div class="mb-3">
   <label for="exampleFormControlInput1" class="form-label">Email address</label>
@@ -29,9 +31,45 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`.
 <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
 {{< /example >}}
 
+## Form text
+
+Block-level or inline-level form text can be created using `.form-text`.
+
+{{< callout warning >}}
+Form text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
+{{< /callout >}}
+
+Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.
+
+{{< example >}}
+<label for="inputPassword5" class="form-label">Password</label>
+<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
+<div id="passwordHelpBlock" class="form-text">
+  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
+</div>
+{{< /example >}}
+
+Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`, or something else) with nothing more than the `.form-text` class.
+
+{{< example >}}
+<div class="row g-3 align-items-center">
+  <div class="col-auto">
+    <label for="inputPassword6" class="col-form-label">Password</label>
+  </div>
+  <div class="col-auto">
+    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
+  </div>
+  <div class="col-auto">
+    <span id="passwordHelpInline" class="form-text">
+      Must be 8-20 characters long.
+    </span>
+  </div>
+</div>
+{{< /example >}}
+
 ## Disabled
 
-Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.
+Add the `disabled` boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing.
 
 {{< example >}}
 <input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
@@ -40,7 +78,7 @@ Add the `disabled` boolean attribute on an input to give it a grayed out appeara
 
 ## Readonly
 
-Add the `readonly` boolean attribute on an input to prevent modification of the input's value.
+Add the `readonly` boolean attribute on an input to prevent modification of the input's value. `readonly` inputs can still be focused and selected, while `disabled` inputs cannot.
 
 {{< example >}}
 <input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>
@@ -48,7 +86,7 @@ Add the `readonly` boolean attribute on an input to prevent modification of the
 
 ## Readonly plain text
 
-If you want to have `<input readonly>` elements in your form styled as plain text, use the `.form-control-plaintext` class to remove the default form field styling and preserve the correct margin and padding.
+If you want to have `<input readonly>` elements in your form styled as plain text, replace `.form-control` with `.form-control-plaintext` to remove the default form field styling and preserve the correct `margin` and `padding`.
 
 {{< example >}}
   <div class="mb-3 row">
@@ -108,6 +146,8 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
 
 ## Color
 
+Set the `type="color"` and add `.form-control-color` to the `<input>`. We use the modifier class to set fixed `height`s and override some inconsistencies between browsers.
+
 {{< example >}}
 <label for="exampleColorInput" class="form-label">Color picker</label>
 <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
@@ -131,9 +171,9 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist).
 </datalist>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
 
 `$input-*` are shared across most of our form controls (and not buttons).
 
diff --git a/site/content/docs/5.1/forms/input-group.md b/site/content/docs/5.3/forms/input-group.md
index 00e9eeec9..d984a485b 100644
--- a/site/content/docs/5.1/forms/input-group.md
+++ b/site/content/docs/5.3/forms/input-group.md
@@ -21,10 +21,13 @@ Place one add-on or button on either side of an input. You may also place one on
   <span class="input-group-text" id="basic-addon2">@example.com</span>
 </div>
 
-<label for="basic-url" class="form-label">Your vanity URL</label>
-<div class="input-group mb-3">
-  <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
-  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
+<div class="mb-3">
+  <label for="basic-url" class="form-label">Your vanity URL</label>
+  <div class="input-group">
+    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
+    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3 basic-addon4">
+  </div>
+  <div class="form-text" id="basic-addon4">Example help text goes outside the input group.</div>
 </div>
 
 <div class="input-group mb-3">
@@ -309,8 +312,8 @@ Input groups include support for custom selects and custom file inputs. Browser
 </div>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
 
 {{< scss-docs name="input-group-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.1/forms/layout.md b/site/content/docs/5.3/forms/layout.md
index 47e2f8ab7..3b27e3f1c 100644
--- a/site/content/docs/5.1/forms/layout.md
+++ b/site/content/docs/5.3/forms/layout.md
@@ -12,7 +12,6 @@ Every group of form fields should reside in a `<form>` element. Bootstrap provid
 
 - New to browser forms? Consider reviewing [the MDN form docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) for an overview and complete list of available attributes.
 - `<button>`s within a `<form>` default to `type="submit"`, so strive to be specific and always include a `type`.
-- You can disable every form element within a form with the `disabled` attribute on the `<form>`.
 
 Since Bootstrap applies `display: block` and `width: 100%` to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.
 
@@ -292,7 +291,7 @@ You can then remix that once again with size-specific column classes.
 
 ## Inline forms
 
-Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding [gutter modifier classes]({{< docsref "/layout/gutters" >}}), we'll have gutters in horizontal and vertical directions. On narrow mobile viewports, the `.col-12` helps stack the form controls and more. The `.align-items-center` aligns the form elements to the middle, making the `.form-checkbox` align properly.
+Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding [gutter modifier classes]({{< docsref "/layout/gutters" >}}), we'll have gutters in horizontal and vertical directions. On narrow mobile viewports, the `.col-12` helps stack the form controls and more. The `.align-items-center` aligns the form elements to the middle, making the `.form-check` align properly.
 
 {{< example >}}
 <form class="row row-cols-lg-auto g-3 align-items-center">
diff --git a/site/content/docs/5.1/forms/overview.md b/site/content/docs/5.3/forms/overview.md
index c60cf1ccc..f4d2f63db 100644
--- a/site/content/docs/5.1/forms/overview.md
+++ b/site/content/docs/5.3/forms/overview.md
@@ -4,7 +4,7 @@ title: Forms
 description: Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
 group: forms
 toc: true
-aliases: "/docs/5.1/forms/"
+aliases: "/docs/5.3/forms/"
 sections:
   - title: Form control
     description: Style textual inputs and textareas with support for multiple states.
@@ -51,44 +51,6 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
 </form>
 {{< /example >}}
 
-## Form text
-
-Block-level or inline-level form text can be created using `.form-text`.
-
-{{< callout warning >}}
-##### Associating form text with form controls
-
-Form text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
-{{< /callout >}}
-
-Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.
-
-{{< example >}}
-<label for="inputPassword5" class="form-label">Password</label>
-<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
-<div id="passwordHelpBlock" class="form-text">
-  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
-</div>
-{{< /example >}}
-
-Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`, or something else) with nothing more than the `.form-text` class.
-
-{{< example >}}
-<div class="row g-3 align-items-center">
-  <div class="col-auto">
-    <label for="inputPassword6" class="col-form-label">Password</label>
-  </div>
-  <div class="col-auto">
-    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
-  </div>
-  <div class="col-auto">
-    <span id="passwordHelpInline" class="form-text">
-      Must be 8-20 characters long.
-    </span>
-  </div>
-</div>
-{{< /example >}}
-
 ## Disabled forms
 
 Add the `disabled` boolean attribute on an input to prevent user interactions and make it appear lighter.
@@ -143,12 +105,12 @@ If none of these are present, assistive technologies may resort to using the `pl
 
 While using visually hidden content (`.visually-hidden`, `aria-label`, and even `placeholder` content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.
 
-## Sass
+## CSS
 
-Many form variables are set at a general level to be re-used and extended by individual form components. You'll see these most often as `$btn-input-*` and `$input-*` variables.
+Many form variables are set at a general level to be re-used and extended by individual form components. You'll see these most often as `$input-btn-*` and `$input-*` variables.
 
-### Variables
+### Sass variables
 
-`$btn-input-*` variables are shared global variables between our [buttons]({{< docsref "/components/buttons" >}}) and our form components. You'll find these frequently reassigned as values to other component-specific variables.
+`$input-btn-*` variables are shared global variables between our [buttons]({{< docsref "/components/buttons" >}}) and our form components. You'll find these frequently reassigned as values to other component-specific variables.
 
 {{< scss-docs name="input-btn-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.1/forms/range.md b/site/content/docs/5.3/forms/range.md
index d7ac6965c..31edb0a8d 100644
--- a/site/content/docs/5.1/forms/range.md
+++ b/site/content/docs/5.3/forms/range.md
@@ -17,7 +17,7 @@ Create custom `<input type="range">` controls with `.form-range`. The track (the
 
 ## Disabled
 
-Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.
+Add the `disabled` boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing.
 
 {{< example >}}
 <label for="disabledRange" class="form-label">Disabled range</label>
@@ -42,8 +42,8 @@ By default, range inputs "snap" to integer values. To change this, you can speci
 <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
 
 {{< scss-docs name="form-range-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.1/forms/select.md b/site/content/docs/5.3/forms/select.md
index 7f0c255ef..c58fdf75e 100644
--- a/site/content/docs/5.1/forms/select.md
+++ b/site/content/docs/5.3/forms/select.md
@@ -24,14 +24,14 @@ Custom `<select>` menus need only a custom class, `.form-select` to trigger the
 You may also choose from small and large custom selects to match our similarly sized text inputs.
 
 {{< example >}}
-<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
+<select class="form-select form-select-lg mb-3" aria-label="Large select example">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
 </select>
 
-<select class="form-select form-select-sm" aria-label=".form-select-sm example">
+<select class="form-select form-select-sm" aria-label="Small select example">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
@@ -42,7 +42,7 @@ You may also choose from small and large custom selects to match our similarly s
 The `multiple` attribute is also supported:
 
 {{< example >}}
-<select class="form-select" multiple aria-label="multiple select example">
+<select class="form-select" multiple aria-label="Multiple select example">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
@@ -53,7 +53,7 @@ The `multiple` attribute is also supported:
 As is the `size` attribute:
 
 {{< example >}}
-<select class="form-select" size="3" aria-label="size 3 select example">
+<select class="form-select" size="3" aria-label="Size 3 select example">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
@@ -74,8 +74,8 @@ Add the `disabled` boolean attribute on a select to give it a grayed out appeara
 </select>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
 
 {{< scss-docs name="form-select-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.1/forms/validation.md b/site/content/docs/5.3/forms/validation.md
index c4bc1b5db..c66bbaf87 100644
--- a/site/content/docs/5.1/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.1/assets/js/validate-forms.js"
+  - src: "/docs/5.3/assets/js/validate-forms.js"
     async: true
 ---
 
@@ -19,7 +19,7 @@ Here's how form validation works with Bootstrap:
 
 - HTML form validation is applied via CSS's two pseudo-classes, `:invalid` and `:valid`. It applies to `<input>`, `<select>`, and `<textarea>` elements.
 - Bootstrap scopes the `:invalid` and `:valid` styles to parent `.was-validated` class, usually applied to the `<form>`. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).
-- To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the `.was-validated` class from the `<form>` again after submission.
+- To reset the appearance of the form (for instance, in the case of dynamic form submissions using Ajax), remove the `.was-validated` class from the `<form>` again after submission.
 - As a fallback, `.is-invalid` and `.is-valid` classes may be used instead of the pseudo-classes for [server-side validation](#server-side). They do not require a `.was-validated` parent class.
 - Due to constraints in how CSS works, we cannot (at present) apply styles to a `<label>` that comes before a form control in the DOM without the help of custom JavaScript.
 - All modern browsers support the [constraint validation API](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-constraint-validation-api), a series of JavaScript methods for validating form controls.
@@ -127,7 +127,7 @@ While these feedback styles cannot be styled with CSS, you can still customize t
     <label for="validationDefaultUsername" class="form-label">Username</label>
     <div class="input-group">
       <span class="input-group-text" id="inputGroupPrepend2">@</span>
-      <input type="text" class="form-control" id="validationDefaultUsername"  aria-describedby="inputGroupPrepend2" required>
+      <input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required>
     </div>
   </div>
   <div class="col-md-6">
@@ -159,13 +159,13 @@ While these feedback styles cannot be styled with CSS, you can still customize t
 </form>
 {{< /example >}}
 
-## Server side
+## Server-side
 
 We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with `.is-invalid` and `.is-valid`. Note that `.invalid-feedback` is also supported with these classes.
 
 For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using `aria-describedby` (noting that this attribute allows more than one `id` to be referenced, in case the field already points to additional form text).
 
-To fix [issues with border radii](https://github.com/twbs/bootstrap/issues/25110), input groups require an additional `.has-validation` class.
+To fix [issues with border radius](https://github.com/twbs/bootstrap/issues/25110), input groups require an additional `.has-validation` class.
 
 {{< example >}}
 <form class="row g-3">
@@ -246,7 +246,7 @@ Validation styles are available for the following form controls and components:
 <form class="was-validated">
   <div class="mb-3">
     <label for="validationTextarea" class="form-label">Textarea</label>
-    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
+    <textarea class="form-control" id="validationTextarea" placeholder="Required example textarea" required></textarea>
     <div class="invalid-feedback">
       Please enter a message in the textarea.
     </div>
@@ -349,19 +349,33 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
 </form>
 {{< /example >}}
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.3.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, forms now use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="root-form-validation-variables" file="scss/_root.scss" >}}
+
+These variables are also color mode adaptive, meaning they change color while in dark mode.
+
+### Sass variables
+
 {{< scss-docs name="form-feedback-variables" file="scss/_variables.scss" >}}
 
-### Mixins
+{{< scss-docs name="form-validation-colors" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="form-validation-colors-dark" file="scss/_variables-dark.scss" >}}
 
-Two mixins are combined together, through our [loop](#loop), to generate our form validation feedback styles.
+### Sass mixins
+
+Two mixins are combined, through our [loop](#sass-loops), to generate our form validation feedback styles.
 
 {{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}}
 
-### Map
+### Sass maps
 
 This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states.
 
@@ -369,7 +383,7 @@ This is the validation Sass map from `_variables.scss`. Override or extend this
 
 Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles.
 
-### Loop
+### Sass loops
 
 Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop.
 
@@ -378,5 +392,3 @@ Used to iterate over `$form-validation-states` map values to generate our valida
 ### Customizing
 
 Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
-
-Please note that **we do not recommend customizing `$form-validation-states` values without also modifying the `form-validation-state` mixin**.
diff --git a/site/content/docs/5.1/getting-started/accessibility.md b/site/content/docs/5.3/getting-started/accessibility.md
index e9f1cb316..d9c410544 100644
--- a/site/content/docs/5.1/getting-started/accessibility.md
+++ b/site/content/docs/5.3/getting-started/accessibility.md
@@ -10,7 +10,7 @@ Bootstrap provides an easy-to-use framework of ready-made styles, layout tools,
 
 ## Overview and limitations
 
-The overall accessibility of any project built with Bootstrap depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill [<abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1](https://www.w3.org/TR/WCAG/) (A/AA/AAA), [Section 508](https://www.section508.gov/), and similar accessibility standards and requirements.
+The overall accessibility of any project built with Bootstrap depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill [<abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.2](https://www.w3.org/TR/WCAG/) (A/AA/AAA), [Section 508](https://www.section508.gov/), and similar accessibility standards and requirements.
 
 ### Structural markup
 
@@ -24,7 +24,7 @@ Because Bootstrap's components are purposely designed to be fairly generic, auth
 
 ### Color contrast
 
-Some combinations of colors that currently make up Bootstrap's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to *insufficient* color contrast (below the recommended [WCAG 2.1 text color contrast ratio of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and the [WCAG 2.1 non-text color contrast ratio of 3:1](https://www.w3.org/TR/WCAG/#non-text-contrast)), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios.
+Some combinations of colors that currently make up Bootstrap's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to *insufficient* color contrast (below the recommended [WCAG 2.2 text color contrast ratio of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and the [WCAG 2.2 non-text color contrast ratio of 3:1](https://www.w3.org/TR/WCAG/#non-text-contrast)), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios.
 
 ### Visually hidden content
 
@@ -51,7 +51,7 @@ On browsers that support `prefers-reduced-motion`, and where the user has *not*
 
 ## Additional resources
 
-- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG/)
+- [Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG/)
 - [The A11Y Project](https://www.a11yproject.com/)
 - [MDN accessibility documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
 - [Tenon.io Accessibility Checker](https://tenon.io/)
diff --git a/site/content/docs/5.1/getting-started/best-practices.md b/site/content/docs/5.3/getting-started/best-practices.md
index e17fc1290..449d02a85 100644
--- a/site/content/docs/5.1/getting-started/best-practices.md
+++ b/site/content/docs/5.3/getting-started/best-practices.md
@@ -17,4 +17,4 @@ We've designed and developed Bootstrap to work in a number of environments. Here
 - Working with Sass files
 - Building new CSS components
 - Working with flexbox
-- Ask in [Slack](https://bootstrap-slack.herokuapp.com/)
+- Ask in [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions)
diff --git a/site/content/docs/5.1/getting-started/browsers-devices.md b/site/content/docs/5.3/getting-started/browsers-devices.md
index bdda154a3..0a4a6ce2f 100644
--- a/site/content/docs/5.1/getting-started/browsers-devices.md
+++ b/site/content/docs/5.3/getting-started/browsers-devices.md
@@ -26,68 +26,23 @@ We use [Autoprefixer](https://github.com/postcss/autoprefixer) to handle intende
 
 Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported.
 
-<table class="table">
-  <thead>
-    <tr>
-      <th scope="col"></th>
-      <th scope="col">Chrome</th>
-      <th scope="col">Firefox</th>
-      <th scope="col">Safari</th>
-      <th scope="col">Android Browser &amp; WebView</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">Android</th>
-      <td>Supported</td>
-      <td>Supported</td>
-      <td class="text-muted">&mdash;</td>
-      <td>v6.0+</td>
-    </tr>
-    <tr>
-      <th scope="row">iOS</th>
-      <td>Supported</td>
-      <td>Supported</td>
-      <td>Supported</td>
-      <td class="text-muted">&mdash;</td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table "table" >}}
+| | Chrome | Firefox | Safari | Android Browser &amp; WebView |
+| --- | --- | --- | --- | --- |
+| **Android** | Supported | Supported | <span class="text-body-secondary">&mdash;</span> | v6.0+ |
+| **iOS** | Supported | Supported | Supported | <span class="text-body-secondary">&mdash;</span> |
+{{< /bs-table >}}
 
 ### Desktop browsers
 
 Similarly, the latest versions of most desktop browsers are supported.
 
-<table class="table">
-  <thead>
-    <tr>
-      <th scope="col"></th>
-      <th scope="col">Chrome</th>
-      <th scope="col">Firefox</th>
-      <th scope="col">Microsoft Edge</th>
-      <th scope="col">Opera</th>
-      <th scope="col">Safari</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">Mac</th>
-      <td>Supported</td>
-      <td>Supported</td>
-      <td>Supported</td>
-      <td>Supported</td>
-      <td>Supported</td>
-    </tr>
-    <tr>
-      <th scope="row">Windows</th>
-      <td>Supported</td>
-      <td>Supported</td>
-      <td>Supported</td>
-      <td>Supported</td>
-      <td class="text-muted">&mdash;</td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table "table" >}}
+| | Chrome | Firefox | Microsoft Edge | Opera | Safari |
+| --- | --- | --- | --- | --- | --- |
+| **Mac** | Supported | Supported | Supported | Supported | Supported |
+| **Windows** | Supported | Supported | Supported | Supported | <span class="text-body-secondary">&mdash;</span> |
+{{< /bs-table >}}
 
 For Firefox, in addition to the latest normal stable release, we also support the latest [Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/enterprise/) version of Firefox.
 
@@ -101,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
 
diff --git a/site/content/docs/5.3/getting-started/contents.md b/site/content/docs/5.3/getting-started/contents.md
new file mode 100644
index 000000000..b53bffc74
--- /dev/null
+++ b/site/content/docs/5.3/getting-started/contents.md
@@ -0,0 +1,111 @@
+---
+layout: docs
+title: Contents
+description: Discover what's included in Bootstrap, including our compiled and source code flavors.
+group: getting-started
+toc: true
+---
+
+## Compiled Bootstrap
+
+Once downloaded, unzip the compressed folder and you'll see something like this:
+
+<!-- NOTE: This info is intentionally duplicated in the README. Copy any changes made here over to the README too, but be sure to keep in mind to add the `dist` folder. -->
+
+```text
+bootstrap/
+├── css/
+│   ├── bootstrap-grid.css
+│   ├── bootstrap-grid.css.map
+│   ├── bootstrap-grid.min.css
+│   ├── bootstrap-grid.min.css.map
+│   ├── bootstrap-grid.rtl.css
+│   ├── bootstrap-grid.rtl.css.map
+│   ├── bootstrap-grid.rtl.min.css
+│   ├── bootstrap-grid.rtl.min.css.map
+│   ├── bootstrap-reboot.css
+│   ├── bootstrap-reboot.css.map
+│   ├── bootstrap-reboot.min.css
+│   ├── bootstrap-reboot.min.css.map
+│   ├── bootstrap-reboot.rtl.css
+│   ├── bootstrap-reboot.rtl.css.map
+│   ├── bootstrap-reboot.rtl.min.css
+│   ├── bootstrap-reboot.rtl.min.css.map
+│   ├── bootstrap-utilities.css
+│   ├── bootstrap-utilities.css.map
+│   ├── bootstrap-utilities.min.css
+│   ├── bootstrap-utilities.min.css.map
+│   ├── bootstrap-utilities.rtl.css
+│   ├── bootstrap-utilities.rtl.css.map
+│   ├── bootstrap-utilities.rtl.min.css
+│   ├── bootstrap-utilities.rtl.min.css.map
+│   ├── bootstrap.css
+│   ├── bootstrap.css.map
+│   ├── bootstrap.min.css
+│   ├── bootstrap.min.css.map
+│   ├── bootstrap.rtl.css
+│   ├── bootstrap.rtl.css.map
+│   ├── bootstrap.rtl.min.css
+│   └── bootstrap.rtl.min.css.map
+└── js/
+    ├── bootstrap.bundle.js
+    ├── bootstrap.bundle.js.map
+    ├── bootstrap.bundle.min.js
+    ├── bootstrap.bundle.min.js.map
+    ├── bootstrap.esm.js
+    ├── bootstrap.esm.js.map
+    ├── bootstrap.esm.min.js
+    ├── bootstrap.esm.min.js.map
+    ├── bootstrap.js
+    ├── bootstrap.js.map
+    ├── bootstrap.min.js
+    └── 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://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
+
+Bootstrap includes a handful of options for including some or all of our compiled CSS.
+
+{{< bs-table "table" >}}
+| CSS files | Layout | Content | Components | Utilities |
+| --- | --- | --- | --- | --- |
+| `bootstrap.css`<br> `bootstrap.min.css`<br> `bootstrap.rtl.css`<br> `bootstrap.rtl.min.css` | Included | Included | Included | Included |
+| `bootstrap-grid.css`<br> `bootstrap-grid.rtl.css`<br> `bootstrap-grid.min.css`<br> `bootstrap-grid.rtl.min.css` | [Only grid system]({{< docsref "/layout/grid" >}}) | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) |
+| `bootstrap-utilities.css`<br> `bootstrap-utilities.rtl.css`<br> `bootstrap-utilities.min.css`<br> `bootstrap-utilities.rtl.min.css` | — | — | — | Included |
+| `bootstrap-reboot.css`<br> `bootstrap-reboot.rtl.css`<br> `bootstrap-reboot.min.css`<br> `bootstrap-reboot.rtl.min.css` | — | [Only Reboot]({{< docsref "/content/reboot" >}}) | — | — |
+{{< /bs-table >}}
+
+### JS files
+
+Similarly, we have options for including some or all of our compiled JavaScript.
+
+{{< bs-table "table" >}}
+| JS Files | Popper |
+| --- | --- |
+| `bootstrap.bundle.js`<br> `bootstrap.bundle.min.js`<br> | Included |
+| `bootstrap.js`<br> `bootstrap.min.js`<br> | – |
+{{< /bs-table >}}
+
+## Bootstrap source code
+
+The Bootstrap source code download includes the compiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:
+
+```text
+bootstrap/
+├── dist/
+│   ├── css/
+│   └── js/
+├── site/
+│   └──content/
+│      └── docs/
+│          └── {{< param docs_version >}}/
+│              └── examples/
+├── js/
+└── scss/
+```
+
+The `scss/` and `js/` are the source code for our CSS and JavaScript. The `dist/` folder includes everything listed in the compiled download section above. The `site/content/docs/` folder includes the source code for our hosted documentation, including our live examples of Bootstrap usage.
+
+Beyond that, any other included file provides support for packages, license information, and development.
diff --git a/site/content/docs/5.1/getting-started/contribute.md b/site/content/docs/5.3/getting-started/contribute.md
index 337bb2a43..5ab3f0aa3 100644
--- a/site/content/docs/5.1/getting-started/contribute.md
+++ b/site/content/docs/5.3/getting-started/contribute.md
@@ -4,7 +4,10 @@ title: Contribute
 description: Help develop Bootstrap with our documentation build scripts and tests.
 group: getting-started
 toc: true
-aliases: "/docs/5.1/getting-started/build-tools/"
+aliases: "/docs/5.3/getting-started/build-tools/"
+added:
+  show_badge: false
+  version: "5.1"
 ---
 
 ## Tooling setup
@@ -14,7 +17,7 @@ Bootstrap uses [npm scripts](https://docs.npmjs.com/misc/scripts/) to build the
 To use our build system and run our documentation locally, you'll need a copy of Bootstrap's source files and Node. Follow these steps and you should be ready to rock:
 
 1. [Download and install Node.js](https://nodejs.org/en/download/), which we use to manage our dependencies.
-2. Either [download Bootstrap's sources]({{< param "download.source" >}}) or fork [Bootstrap's repository]({{< param repo >}}).
+2. Either [download Bootstrap's sources]({{< param "download.source" >}}) or fork and clone [Bootstrap's repository]({{< param repo >}}).
 3. Navigate to the root `/bootstrap` directory and run `npm install` to install our local dependencies listed in [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json).
 
 When completed, you'll be able to run the various commands provided from the command line.
@@ -23,68 +26,34 @@ When completed, you'll be able to run the various commands provided from the com
 
 Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json) includes numerous tasks for developing the project. Run `npm run` to see all the npm scripts in your terminal. **Primary tasks include:**
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>Task</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <code>npm start</code>
-      </td>
-      <td>
-        Compiles CSS and JavaScript, builds the documentation, and starts a local server.
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>npm run dist</code>
-      </td>
-      <td>
-       Creates the <code>dist/</code> directory with compiled files. Requires <a href="https://sass-lang.com/">Sass</a>, <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a>, and <a href="https://github.com/terser/terser">terser</a>.
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>npm test</code>
-      </td>
-      <td>
-        Runs tests locally after running <code>npm run dist</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>npm run docs-serve</code>
-      </td>
-      <td>
-        Builds and runs the documentation locally.
-      </td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table >}}
+| Task | Description |
+| --- | --- |
+| `npm start` | Compiles CSS and JavaScript, builds the documentation, and starts a local server. |
+| `npm run dist` | Creates the `dist/` directory with compiled files. Uses [Sass](https://sass-lang.com/), [Autoprefixer](https://github.com/postcss/autoprefixer), and [terser](https://github.com/terser/terser). |
+| `npm test` | Runs tests locally after running `npm run dist` |
+| `npm run docs-serve` | Builds and runs the documentation locally. |
+{{< /bs-table >}}
 
 {{< callout info >}}
-{{< partial "callout-info-npm-starter.md" >}}
+{{< partial "callouts/info-npm-starter.md" >}}
 {{< /callout >}}
 
 ## 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.
 
 ## Autoprefixer
 
-Bootstrap uses [Autoprefixer][autoprefixer] (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
+Bootstrap uses [Autoprefixer](https://github.com/postcss/autoprefixer) (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
 
 We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [.browserslistrc]({{< param repo >}}/blob/v{{< param current_version >}}/.browserslistrc) for details.
 
 ## RTLCSS
 
-Bootstrap uses [RTLCSS](https://rtlcss.com/) to process compiled CSS and convert them to RTL – basically replacing horizontal direction aware properties (eg. `padding-left`) with their opposite. It allows us only write our CSS a single time and make minor tweaks using RTLCSS [control](https://rtlcss.com/learn/usage-guide/control-directives/) and [value](https://rtlcss.com/learn/usage-guide/value-directives/) directives.
+Bootstrap uses [RTLCSS](https://rtlcss.com/) to process compiled CSS and convert them to RTL – basically replacing horizontal direction aware properties (e.g. `padding-left`) with their opposite. It allows us only write our CSS a single time and make minor tweaks using RTLCSS [control](https://rtlcss.com/learn/usage-guide/control-directives/) and [value](https://rtlcss.com/learn/usage-guide/value-directives/) directives.
 
 ## Local documentation
 
@@ -99,5 +68,3 @@ Learn more about using Hugo by reading its [documentation](https://gohugo.io/doc
 ## Troubleshooting
 
 Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.
-
-[autoprefixer]: https://github.com/postcss/autoprefixer
diff --git a/site/content/docs/5.1/getting-started/download.md b/site/content/docs/5.3/getting-started/download.md
index 8a4c8f215..2d0d62762 100644
--- a/site/content/docs/5.1/getting-started/download.md
+++ b/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
 
@@ -50,6 +50,24 @@ If you're using our compiled JavaScript and prefer to include Popper separately,
 <script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
 ```
 
+### Alternative CDNs
+
+We recommend [jsDelivr](https://www.jsdelivr.com/) and use it ourselves in our documentation. However, in some cases—like in some specific countries or environments—you may need to use other CDN providers like [cdnjs](https://cdnjs.com/) or [unpkg](https://unpkg.com/).
+
+You'll find the same files on these CDN providers, albeit with different URLs. With cdnjs, you can [use this direct Bootstrap package link](https://cdnjs.com/libraries/bootstrap) to copy and paste ready-to-use HTML snippets for each dist file from any version of Bootstrap.
+
+{{< callout warning>}}
+**If the SRI hashes differ for a given file, you shouldn't use the files from that CDN, because it means that the file was modified by someone else.**
+{{< /callout >}}
+
+Note that you should compare same length hashes, e.g. `sha384` with `sha384`, otherwise it's expected for them to be different.
+As such, you can use an online tool like [SRI Hash Generator](https://www.srihash.org/) to make sure that the hashes are the same for a given file.
+Alternatively, assuming you have OpenSSL installed, you can achieve the same from the CLI, for example:
+
+```sh
+openssl dgst -sha384 -binary bootstrap.min.js | openssl base64 -A
+```
+
 ## Package managers
 
 Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a [Sass compiler]({{< docsref "/getting-started/contribute#sass" >}}) and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions.
@@ -59,7 +77,7 @@ Pull in Bootstrap's **source files** into nearly any project with some of the mo
 Install Bootstrap in your Node.js powered apps with [the npm package](https://www.npmjs.com/package/bootstrap):
 
 ```sh
-npm install bootstrap
+npm install bootstrap@{{< param "current_version" >}}
 ```
 
 `const bootstrap = require('bootstrap')` or `import bootstrap from 'bootstrap'` will load all of Bootstrap's plugins onto a `bootstrap` object.
@@ -68,10 +86,10 @@ The `bootstrap` module itself exports all of our plugins. You can manually load
 Bootstrap's `package.json` contains some additional metadata under the following keys:
 
 - `sass` - path to Bootstrap's main [Sass](https://sass-lang.com/) source file
-- `style` - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)
+- `style` - path to Bootstrap's non-minified CSS that's been compiled using the default settings (no customization)
 
 {{< callout info >}}
-{{< partial "callout-info-npm-starter.md" >}}
+{{< partial "callouts/info-npm-starter.md" >}}
 {{< /callout >}}
 
 ### yarn
@@ -79,12 +97,12 @@ Bootstrap's `package.json` contains some additional metadata under the following
 Install Bootstrap in your Node.js powered apps with [the yarn package](https://yarnpkg.com/en/package/bootstrap):
 
 ```sh
-yarn add bootstrap
+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 >}}'
@@ -96,7 +114,7 @@ Alternatively, if you're not using Bundler, you can install the gem by running t
 gem install bootstrap -v {{< param current_ruby_version >}}
 ```
 
-[See the gem's README](https://github.com/twbs/bootstrap-rubygem/blob/master/README.md) for further details.
+[See the gem's README](https://github.com/twbs/bootstrap-rubygem/blob/main/README.md) for further details.
 
 ### Composer
 
@@ -108,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
diff --git a/site/content/docs/5.3/getting-started/introduction.md b/site/content/docs/5.3/getting-started/introduction.md
new file mode 100644
index 000000000..96318ebce
--- /dev/null
+++ b/site/content/docs/5.3/getting-started/introduction.md
@@ -0,0 +1,156 @@
+---
+layout: docs
+title: Get started with Bootstrap
+description: Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.
+group: getting-started
+aliases:
+  - "/docs/5.3/getting-started/"
+  - "/docs/getting-started/"
+  - "/getting-started/"
+toc: true
+---
+
+## Quick start
+
+Get started by including Bootstrap's production-ready CSS and JavaScript via CDN without the need for any build steps. See it in practice with this [Bootstrap CodePen demo](https://codepen.io/team/bootstrap/pen/qBamdLj).
+
+<br>
+
+1. **Create a new `index.html` file in your project root.** Include the `<meta name="viewport">` tag as well for [proper responsive behavior](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag) in mobile devices.
+
+   ```html
+   <!doctype html>
+   <html lang="en">
+     <head>
+       <meta charset="utf-8">
+       <meta name="viewport" content="width=device-width, initial-scale=1">
+       <title>Bootstrap demo</title>
+     </head>
+     <body>
+       <h1>Hello, world!</h1>
+     </body>
+   </html>
+   ```
+
+2. **Include Bootstrap's CSS and JS.** Place the `<link>` tag in the `<head>` for our CSS, and the `<script>` tag for our JavaScript bundle (including Popper for positioning dropdowns, popovers, and tooltips) before the closing `</body>`. Learn more about our [CDN links](#cdn-links).
+
+   ```html
+   <!doctype html>
+   <html lang="en">
+     <head>
+       <meta charset="utf-8">
+       <meta name="viewport" content="width=device-width, initial-scale=1">
+       <title>Bootstrap demo</title>
+       <link href="{{< param "cdn.css" >}}" rel="stylesheet" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
+     </head>
+     <body>
+       <h1>Hello, world!</h1>
+       <script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
+     </body>
+   </html>
+   ```
+
+   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>
+   <script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
+   ```
+
+3. **Hello, world!** Open the page in your browser of choice to see your Bootstrapped page. Now you can start building with Bootstrap by creating your own [layout]({{< docsref "/layout/grid" >}}), adding dozens of [components]({{< docsref "/components/buttons" >}}), and utilizing [our official examples]({{< docsref "/examples" >}}).
+
+## CDN links
+
+As reference, here are our primary CDN links.
+
+{{< bs-table >}}
+| Description | URL |
+| --- | --- |
+| CSS | `{{< param "cdn.css" >}}` |
+| JS | `{{< param "cdn.js_bundle" >}}` |
+{{< /bs-table >}}
+
+You can also use the CDN to fetch any of our [additional builds listed in the Contents page]({{< docsref "/getting-started/contents" >}}).
+
+## Next steps
+
+- Read a bit more about some [important global environment settings](#important-globals) that Bootstrap utilizes.
+- Read about what's included in Bootstrap in our [contents section]({{< docsref "/getting-started/contents/" >}}) and the list of [components that require JavaScript](#js-components) below.
+- Need a little more power? Consider building with Bootstrap by [including the source files via package manager]({{< docsref "/getting-started/download#package-managers" >}}).
+- Looking to use Bootstrap as a module with `<script type="module">`? Please refer to our [using Bootstrap as a module]({{< docsref "/getting-started/javascript#using-bootstrap-as-a-module" >}}) section.
+
+## JS components
+
+Curious which components explicitly require our JavaScript and Popper? If you're at all unsure about the general page structure, keep reading for an example page template.
+
+- Accordions for extending our Collapse plugin
+- Alerts for dismissing
+- 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/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/docs/v2/))
+
+## Important globals
+
+Bootstrap employs a handful of important global styles and settings, all of which are almost exclusively geared towards the *normalization* of cross browser styles. Let's dive in.
+
+### HTML5 doctype
+
+Bootstrap requires the use of the HTML5 doctype. Without it, you'll see some funky and incomplete styling.
+
+```html
+<!doctype html>
+<html lang="en">
+  ...
+</html>
+```
+
+### Viewport meta
+
+Bootstrap is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your `<head>`.
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1">
+```
+
+You can see an example of this in action in the [quick start](#quick-start).
+
+### Box-sizing
+
+For more straightforward sizing in CSS, we switch the global `box-sizing` value from `content-box` to `border-box`. This ensures `padding` does not affect the final computed width of an element, but it can cause problems with some third-party software like Google Maps and Google Custom Search Engine.
+
+On the rare occasion you need to override it, use something like the following:
+
+```css
+.selector-for-some-widget {
+  box-sizing: content-box;
+}
+```
+
+With the above snippet, nested elements—including generated content via `::before` and `::after`—will all inherit the specified `box-sizing` for that `.selector-for-some-widget`.
+
+Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box-sizing/).
+
+### Reboot
+
+For improved cross-browser rendering, we use [Reboot]({{< docsref "/content/reboot" >}}) to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
+
+## Community
+
+Stay up-to-date on the development of Bootstrap and reach out to the community with these helpful resources.
+
+- 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://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.
+
+You can also follow [@getbootstrap on Twitter](https://twitter.com/{{< param twitter >}}) for the latest gossip and awesome music videos.
diff --git a/site/content/docs/5.3/getting-started/javascript.md b/site/content/docs/5.3/getting-started/javascript.md
new file mode 100644
index 000000000..47f7341c3
--- /dev/null
+++ b/site/content/docs/5.3/getting-started/javascript.md
@@ -0,0 +1,311 @@
+---
+layout: docs
+title: JavaScript
+description: Bring Bootstrap to life with our optional JavaScript plugins. Learn about each plugin, our data and programmatic API options, and more.
+group: getting-started
+toc: true
+---
+
+## Individual or compiled
+
+Plugins can be included individually (using Bootstrap's individual `js/dist/*.js`), or all at once using `bootstrap.js` or the minified `bootstrap.min.js` (don't include both).
+
+If you use a bundler (Webpack, Parcel, Vite...), you can use `/js/dist/*.js` files which are UMD ready.
+
+## Usage with JavaScript frameworks
+
+While the Bootstrap CSS can be used with any framework, **the Bootstrap JavaScript is not fully compatible with JavaScript frameworks like React, Vue, and Angular** which assume full knowledge of the DOM. Both Bootstrap and the framework may attempt to mutate the same DOM element, resulting in bugs like dropdowns that are stuck in the "open" position.
+
+A better alternative for those using this type of frameworks is to use a framework-specific package **instead of** the Bootstrap JavaScript. Here are some of the most popular options:
+
+- React: [React Bootstrap](https://react-bootstrap.github.io/)
+  {{< callout >}}
+  **Try it yourself!** Download the source code and working demo for using Bootstrap with React, Next.js, and React Bootstrap from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/react-nextjs). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/react-nextjs?file=src%2Fpages%2Findex.tsx).
+  {{< /callout >}}
+- Vue: [BootstrapVue](https://bootstrap-vue.org/) (Bootstrap 4)
+- Vue 3: [BootstrapVueNext](https://bootstrap-vue-next.github.io/bootstrap-vue-next/) (Bootstrap 5, currently in alpha)
+- Angular: [ng-bootstrap](https://ng-bootstrap.github.io/)
+
+## Using Bootstrap as a module
+
+{{< callout >}}
+**Try it yourself!** Download the source code and working demo for using Bootstrap as an ES module from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/sass-js-esm). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/sass-js-esm?file=index.html).
+{{< /callout >}}
+
+We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootstrap.esm.min.js`) which allows you to use Bootstrap as a module in the browser, if your [targeted browsers support it](https://caniuse.com/es6-module).
+
+<!-- eslint-skip -->
+```html
+<script type="module">
+  import { Toast } from 'bootstrap.esm.min.js'
+
+  Array.from(document.querySelectorAll('.toast'))
+    .forEach(toastNode => new Toast(toastNode))
+</script>
+```
+
+Compared to JS bundlers, using ESM in the browser requires you to use the full path and filename instead of the module name. [Read more about JS modules in the browser.](https://v8.dev/features/modules#specifiers) That's why we use `'bootstrap.esm.min.js'` instead of `'bootstrap'` above. However, this is further complicated by our Popper dependency, which imports Popper into our JavaScript like so:
+
+<!-- eslint-skip -->
+```js
+import * as Popper from "@popperjs/core"
+```
+
+If you try this as-is, you'll see an error in the console like the following:
+
+```text
+Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".
+```
+
+To fix this, you can use an `importmap` to resolve the arbitrary module names to complete paths. If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap`, you'll need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) project. Here's how it works for Bootstrap and Popper:
+
+<!-- eslint-skip -->
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="{{< param "cdn.css" >}}" rel="stylesheet" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
+    <title>Hello, modularity!</title>
+  </head>
+  <body>
+    <h1>Hello, modularity!</h1>
+    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>
+
+    <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
+    <script type="importmap">
+    {
+      "imports": {
+        "@popperjs/core": "{{< param "cdn.popper_esm" >}}",
+        "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@{{< param "current_version" >}}/dist/js/bootstrap.esm.min.js"
+      }
+    }
+    </script>
+    <script type="module">
+      import * as bootstrap from 'bootstrap'
+
+      new bootstrap.Popover(document.getElementById('popoverButton'))
+    </script>
+  </body>
+</html>
+```
+
+## Dependencies
+
+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/docs/v2/).
+
+## Data attributes
+
+Nearly all Bootstrap plugins can be enabled and configured through HTML alone with data attributes (our preferred way of using JavaScript functionality). Be sure to **only use one set of data attributes on a single element** (e.g., you cannot trigger a tooltip and modal from the same button.)
+
+{{< markdown >}}
+{{< partial "js-data-attributes.md" >}}
+{{< /markdown >}}
+
+## Selectors
+
+We use the native `querySelector` and `querySelectorAll` methods to query DOM elements for performance reasons, so you must use [valid selectors](https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier). If you use special selectors like `collapse:Example`, be sure to escape them.
+
+## Events
+
+Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. `show`) is triggered at the start of an event, and its past participle form (ex. `shown`) is triggered on the completion of an action.
+
+All infinitive events provide [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) functionality. This provides the ability to stop the execution of an action before it starts. Returning false from an event handler will also automatically call `preventDefault()`.
+
+```js
+const myModal = document.querySelector('#myModal')
+
+myModal.addEventListener('show.bs.modal', event => {
+  return event.preventDefault() // stops modal from being shown
+})
+```
+
+## Programmatic API
+
+All constructors accept an optional options object or nothing (which initiates a plugin with its default behavior):
+
+```js
+const myModalEl = document.querySelector('#myModal')
+const modal = new bootstrap.Modal(myModalEl) // initialized with defaults
+
+const configObject = { keyboard: false }
+const modal1 = new bootstrap.Modal(myModalEl, configObject) // initialized with no keyboard
+```
+
+If you'd like to get a particular plugin instance, each plugin exposes a `getInstance` method. For example, to retrieve an instance directly from an element:
+
+```js
+bootstrap.Popover.getInstance(myPopoverEl)
+```
+
+This method will return `null` if an instance is not initiated over the requested element.
+
+Alternatively, `getOrCreateInstance` can be used to get the instance associated with a DOM element, or create a new one in case it wasn't initialized.
+
+```js
+bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)
+```
+
+In case an instance wasn't initialized, it may accept and use an optional configuration object as second argument.
+
+### CSS selectors in constructors
+
+In addition to the `getInstance` and `getOrCreateInstance` methods, all plugin constructors can accept a DOM element or a valid [CSS selector](#selectors) as the first argument. Plugin elements are found with the `querySelector` method since our plugins only support a single element.
+
+```js
+const modal = new bootstrap.Modal('#myModal')
+const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
+const offcanvas = bootstrap.Offcanvas.getInstance('#myOffcanvas')
+const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
+```
+
+### Asynchronous functions and transitions
+
+All programmatic API methods are **asynchronous** and return to the caller once the transition is started, but **before it ends**. In order to execute an action once the transition is complete, you can listen to the corresponding event.
+
+```js
+const myCollapseEl = document.querySelector('#myCollapse')
+
+myCollapseEl.addEventListener('shown.bs.collapse', event => {
+  // Action to execute once the collapsible area is expanded
+})
+```
+
+In addition, a method call on a **transitioning component will be ignored**.
+
+```js
+const myCarouselEl = document.querySelector('#myCarousel')
+const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance
+
+myCarouselEl.addEventListener('slid.bs.carousel', event => {
+  carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
+})
+
+carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
+carousel.to('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!
+```
+
+#### `dispose` method
+
+While it may seem correct to use the `dispose` method immediately after `hide()`, it will lead to incorrect results. Here's an example of the problem use:
+
+```js
+const myModal = document.querySelector('#myModal')
+myModal.hide() // it is asynchronous
+
+myModal.addEventListener('shown.bs.hidden', event => {
+  myModal.dispose()
+})
+```
+
+### Default settings
+
+You can change the default settings for a plugin by modifying the plugin's `Constructor.Default` object:
+
+```js
+// changes default for the modal plugin's `keyboard` option to false
+bootstrap.Modal.Default.keyboard = false
+```
+
+## Methods and properties
+
+Every Bootstrap plugin exposes the following methods and static properties.
+
+{{< bs-table "table" >}}
+| Method | Description |
+| --- | --- |
+| `dispose` | Destroys an element's modal. (Removes stored data on the DOM element) |
+| `getInstance` | *Static* method which allows you to get the modal instance associated with a DOM element. |
+| `getOrCreateInstance` | *Static* method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn't initialized. |
+{{< /bs-table >}}
+
+{{< bs-table "table" >}}
+| Static property | Description |
+| --- | --- |
+| `NAME` | Returns the plugin name. (Example: `bootstrap.Tooltip.NAME`) |
+| `VERSION` | The version of each of Bootstrap's plugins can be accessed via the `VERSION` property of the plugin's constructor (Example: `bootstrap.Tooltip.VERSION`) |
+{{< /bs-table >}}
+
+## Sanitizer
+
+Tooltips and Popovers use our built-in sanitizer to sanitize options which accept HTML.
+
+The default `allowList` value is the following:
+
+{{< js-docs name="allow-list" file="js/src/util/sanitizer.js" >}}
+
+If you want to add new values to this default `allowList` you can do the following:
+
+```js
+const myDefaultAllowList = bootstrap.Tooltip.Default.allowList
+
+// To allow table elements
+myDefaultAllowList.table = []
+
+// To allow td elements and data-bs-option attributes on td elements
+myDefaultAllowList.td = ['data-bs-option']
+
+// You can push your custom regex to validate your attributes.
+// Be careful about your regular expressions being too lax
+const myCustomRegex = /^data-my-app-[\w-]+/
+myDefaultAllowList['*'].push(myCustomRegex)
+```
+
+If you want to bypass our sanitizer because you prefer to use a dedicated library, for example [DOMPurify](https://www.npmjs.com/package/dompurify), you should do the following:
+
+```js
+const yourTooltipEl = document.querySelector('#yourTooltip')
+const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
+  sanitizeFn(content) {
+    return DOMPurify.sanitize(content)
+  }
+})
+```
+
+## Optionally using jQuery
+
+**You don't need jQuery in Bootstrap 5**, but it's still possible to use our components with jQuery. If Bootstrap detects `jQuery` in the `window` object, it'll add all of our components in jQuery's plugin system. This allows you to do the following:
+
+```js
+// to enable tooltips with the default configuration
+$('[data-bs-toggle="tooltip"]').tooltip()
+
+// to initialize tooltips with given configuration
+$('[data-bs-toggle="tooltip"]').tooltip({
+  boundary: 'clippingParents',
+  customClass: 'myClass'
+})
+
+// to trigger the `show` method
+$('#myTooltip').tooltip('show')
+```
+
+The same goes for our other components.
+
+### No conflict
+
+Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call `.noConflict` on the plugin you wish to revert the value of.
+
+```js
+const bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
+$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
+```
+
+Bootstrap does not officially support third-party JavaScript libraries like Prototype or jQuery UI. Despite `.noConflict` and namespaced events, there may be compatibility problems that you need to fix on your own.
+
+### jQuery events
+
+Bootstrap will detect jQuery if `jQuery` is present in the `window` object and there is no `data-bs-no-jquery` attribute set on `<body>`. If jQuery is found, Bootstrap will emit events thanks to jQuery's event system. So if you want to listen to Bootstrap's events, you'll have to use the jQuery methods (`.on`, `.one`) instead of `addEventListener`.
+
+```js
+$('#myTab a').on('shown.bs.tab', () => {
+  // do something...
+})
+```
+
+## Disabled JavaScript
+
+Bootstrap's plugins have no special fallback when JavaScript is disabled. If you care about the user experience in this case, use [`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript) to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.
diff --git a/site/content/docs/5.3/getting-started/parcel.md b/site/content/docs/5.3/getting-started/parcel.md
new file mode 100644
index 000000000..73de599c9
--- /dev/null
+++ b/site/content/docs/5.3/getting-started/parcel.md
@@ -0,0 +1,159 @@
+---
+layout: docs
+title: Bootstrap and Parcel
+description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Parcel.
+group: getting-started
+toc: true
+thumbnail: guides/[email protected]
+---
+
+<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png, /docs/{{< param docs_version >}}/assets/img/guides/[email protected] 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png" width="800" height="400" 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.
+{{< /callout >}}
+
+## Setup
+
+We're building a Parcel project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
+
+1. **Create a project folder and set up npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
+
+   ```sh
+   mkdir my-project && cd my-project
+   npm init -y
+   ```
+
+2. **Install Parcel.** Unlike our Webpack guide, there's only a single build tool dependency here. Parcel will automatically install language transformers (like Sass) as it detects them. We use `--save-dev` to signal that this dependency is only for development use and not for production.
+
+   ```sh
+   npm i --save-dev parcel
+   ```
+
+3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Popper since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don't plan on using those components, you can omit Popper here.
+
+   ```sh
+   npm i --save bootstrap @popperjs/core
+   ```
+
+Now that we have all the necessary dependencies installed, we can get to work creating the project files and importing Bootstrap.
+
+## Project structure
+
+We've already created the `my-project` folder and initialized npm. Now we'll also create our `src` folder, stylesheet, and JavaScript file to round out the project structure. Run the following from `my-project`, or manually create the folder and file structure shown below.
+
+```sh
+mkdir {src,src/js,src/scss}
+touch src/index.html src/js/main.js src/scss/styles.scss
+```
+
+When you're done, your complete project should look like this:
+
+```text
+my-project/
+├── src/
+│   ├── js/
+│   │   └── main.js
+│   ├── scss/
+│   │   └── styles.scss
+│   └── index.html
+├── package-lock.json
+└── package.json
+```
+
+At this point, everything is in the right place, but Parcel needs an HTML page and npm script to start our server.
+
+## Configure Parcel
+
+With dependencies installed and our project folder ready for us to start coding, we can now configure Parcel and run our project locally. Parcel itself requires no configuration file by design, but we do need an npm script and an HTML file to start our server.
+
+1. **Fill in the `src/index.html` file.** Parcel needs a page to render, so we use our `index.html` page to set up some basic HTML, including our CSS and JavaScript files.
+
+   ```html
+   <!doctype html>
+   <html lang="en">
+     <head>
+       <meta charset="utf-8">
+       <meta name="viewport" content="width=device-width, initial-scale=1">
+       <title>Bootstrap w/ Parcel</title>
+       <link rel="stylesheet" href="scss/styles.scss">
+       <script type="module" src="js/main.js"></script>
+     </head>
+     <body>
+       <div class="container py-4 px-3 mx-auto">
+         <h1>Hello, Bootstrap and Parcel!</h1>
+         <button class="btn btn-primary">Primary button</button>
+       </div>
+     </body>
+   </html>
+   ```
+
+   We're including a little bit of Bootstrap styling here with the `div class="container"` and `<button>` so that we see when Bootstrap's CSS is loaded by Parcel.
+
+   Parcel will automatically detect we're using Sass and install the [Sass Parcel plugin](https://parceljs.org/languages/sass/) to support it. However, if you wish, you can also manually run `npm i --save-dev @parcel/transformer-sass`.
+
+2. **Add the Parcel npm scripts.** Open the `package.json` and add the following `start` script to the `scripts` object. We'll use this script to start our Parcel development server and render the HTML file we created after it's compiled into the `dist` directory.
+
+   ```json
+   {
+      // ...
+      "scripts": {
+        "start": "parcel serve src/index.html --public-url / --dist-dir dist",
+        "test": "echo \"Error: no test specified\" && exit 1"
+      },
+      // ...
+   }
+   ```
+
+3. **And finally, we can start Parcel.** From the `my-project` folder in your terminal, run that newly added npm script:
+
+   ```sh
+   npm start
+   ```
+
+   ![Parcel dev server running](/assets/img/guides/parcel-dev-server.png)
+
+In the next and final section to this guide, we'll import all of Bootstrap's CSS and JavaScript.
+
+## Import Bootstrap
+
+Importing Bootstrap into Parcel requires two imports, one into our `styles.scss` and one into our `main.js`.
+
+1. **Import Bootstrap's CSS.** Add the following to `src/scss/styles.scss` to import all of Bootstrap's source Sass.
+
+   ```scss
+   // Import all of Bootstrap's CSS
+   @import "bootstrap/scss/bootstrap";
+   ```
+
+   *You can also import our stylesheets individually if you want. [Read our Sass import docs]({{< docsref "/customize/sass#importing" >}}) for details.*
+
+2. **Import Bootstrap's JS.** Add the following to `src/js/main.js` to import all of Bootstrap's JS. Popper will be imported automatically through Bootstrap.
+
+   <!-- eslint-skip -->
+   ```js
+   // Import all of Bootstrap's JS
+   import * as bootstrap from 'bootstrap'
+   ```
+
+   You can also import JavaScript plugins individually as needed to keep bundle sizes down:
+
+   <!-- eslint-skip -->
+   ```js
+   import Alert from 'bootstrap/js/dist/alert'
+
+   // or, specify which plugins you need:
+   import { Tooltip, Toast, Popover } from 'bootstrap'
+   ```
+
+   *[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Bootstrap's plugins.*
+
+3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:
+
+   ![Parcel dev server running with Bootstrap](/assets/img/guides/parcel-dev-server-bootstrap.png)
+
+   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.
+
+{{< markdown >}}
+{{< partial "guide-footer.md" >}}
+{{< /markdown >}}
diff --git a/site/content/docs/5.1/getting-started/rfs.md b/site/content/docs/5.3/getting-started/rfs.md
index 5aa6840a4..5aa6840a4 100644
--- a/site/content/docs/5.1/getting-started/rfs.md
+++ b/site/content/docs/5.3/getting-started/rfs.md
diff --git a/site/content/docs/5.1/getting-started/rtl.md b/site/content/docs/5.3/getting-started/rtl.md
index b1a0534cf..bf4f617e9 100644
--- a/site/content/docs/5.1/getting-started/rtl.md
+++ b/site/content/docs/5.3/getting-started/rtl.md
@@ -13,9 +13,7 @@ We recommend getting familiar with Bootstrap first by reading through our [Getti
 You may also want to read up on [the RTLCSS project](https://rtlcss.com/), as it powers our approach to RTL.
 
 {{< callout warning >}}
-### Experimental feature
-
-The RTL feature is still **experimental** and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? [Open an issue]({{< param repo >}}/issues/new), we'd love to get your insights.
+**Bootstrap's RTL feature is still experimental** and will evolve based on user feedback. Spotted something or have an improvement to suggest? [Open an issue]({{< param repo >}}/issues/new/choose), we'd love to get your insights.
 {{< /callout >}}
 
 ## Required HTML
@@ -111,7 +109,7 @@ dt {
 
 In the case you're using a custom font, be aware that not all fonts support the non-Latin alphabet. To switch from Pan-European to Arabic family, you may need to use `/*rtl:insert: {value}*/` in your font stack to modify the names of font families.
 
-For example, to switch from `Helvetica Neue Webfont` for LTR to `Helvetica Neue Arabic` for RTL, your Sass code look like this:
+For example, to switch from `Helvetica Neue` font for LTR to `Helvetica Neue Arabic` for RTL, your Sass code could look like this:
 
 ```scss
 $font-family-sans-serif:
@@ -163,18 +161,26 @@ Need both LTR and RTL on the same page? Thanks to [RTLCSS String Maps](https://r
 After running Sass then RTLCSS, each selector in your CSS files will be prepended by `.ltr`, and `.rtl` for RTL files. Now you're able to use both files on the same page, and simply use `.ltr` or `.rtl` on your components wrappers to use one or the other direction.
 
 {{< callout warning >}}
-#### Edge cases and known limitations
-
-While this approach is understandable, please pay attention to the following:
+**Edge cases and known limitations** to consider when working with a combined LTR and RTL implementation:
 
 1. When switching `.ltr` and `.rtl`, make sure you add `dir` and `lang` attributes accordingly.
 2. Loading both files can be a real performance bottleneck: consider some [optimization]({{< docsref "/customize/optimize" >}}), and maybe try to [load one of those files asynchronously](https://www.filamentgroup.com/lab/load-css-simpler/).
 3. Nesting styles this way will prevent our `form-validation-state()` mixin from working as intended, thus require you tweak it a bit by yourself. [See #31223](https://github.com/twbs/bootstrap/issues/31223).
 {{< /callout >}}
 
+Do you want to automate this process and address several edge cases involving both directions within a single stylesheet? Then, consider using [PostCSS RTLCSS](https://github.com/elchininet/postcss-rtlcss) as a [PostCSS](https://github.com/postcss/postcss) plugin to process your source files. PostCSS RTLCSS uses [RTLCSS](https://rtlcss.com) behind the scenes to manage the direction flipping process, but it separates the flipped declarations into rules with a different prefix for LTR and RTL, something that allows you to have both directions within the same stylesheet file. By doing this, you can switch between LTR and RTL orientations by simply changing the `dir` of the page (or even by modifying a specific class if you configure the plugin accordingly).
+
+{{< callout warning >}}
+**Important things to take into account** when using PostCSS RTLCSS to build a combined LTR and RTL implementation:
+
+1. It is recommended that you add the `dir` attribute to the `html` element. This way, the entire page will be affected when you change the direction. Also, make sure you add the `lang` attribute accordingly.
+2. Having a single bundle with both directions will increase the size of the final stylesheet (on average, by 20%-30%): consider some [optimization]({{< docsref "/customize/optimize" >}}).
+3. Take into account that PostCSS RTLCSS is not compatible with `/* rtl:remove */` directives because it doesn't remove any CSS rule. You should replace your `/* rtl:remove */`, `/* rtl:begin:remove */` and `/* rtl:end:remove */` directives with `/* rtl:ignore */`, `/* rtl:begin:ignore */` and `/* rtl:end:ignore */` directives respectively. These directives will ignore the rule and will not create an RTL counterpart (same result as the `remove` ones in RTLCSS).
+{{< /callout >}}
+
 ## 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
 
diff --git a/site/content/docs/5.3/getting-started/vite.md b/site/content/docs/5.3/getting-started/vite.md
new file mode 100644
index 000000000..380f56bc8
--- /dev/null
+++ b/site/content/docs/5.3/getting-started/vite.md
@@ -0,0 +1,184 @@
+---
+layout: docs
+title: Bootstrap and Vite
+description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Vite.
+group: getting-started
+toc: true
+thumbnail: guides/[email protected]
+added:
+  show_badge: false
+  version: "5.2"
+---
+
+<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png, /docs/{{< param docs_version >}}/assets/img/guides/[email protected] 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png" width="800" height="400" 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.
+{{< /callout >}}
+
+## Setup
+
+We're building a Vite project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
+
+1. **Create a project folder and set up npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
+
+   ```sh
+   mkdir my-project && cd my-project
+   npm init -y
+   ```
+
+2. **Install Vite.** Unlike our Webpack guide, there’s only a single build tool dependency here. We use `--save-dev` to signal that this dependency is only for development use and not for production.
+
+   ```sh
+   npm i --save-dev vite
+   ```
+
+3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Popper since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don't plan on using those components, you can omit Popper here.
+
+   ```sh
+   npm i --save bootstrap @popperjs/core
+   ```
+
+4. **Install additional dependency.** In addition to Vite and Bootstrap, we need another dependency (Sass) to properly import and bundle Bootstrap's CSS.
+
+   ```sh
+   npm i --save-dev sass
+   ```
+
+Now that we have all the necessary dependencies installed and set up, we can get to work creating the project files and importing Bootstrap.
+
+## Project structure
+
+We've already created the `my-project` folder and initialized npm. Now we'll also create our `src` folder, stylesheet, and JavaScript file to round out the project structure. Run the following from `my-project`, or manually create the folder and file structure shown below.
+
+```sh
+mkdir {src,src/js,src/scss}
+touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
+```
+
+When you're done, your complete project should look like this:
+
+```text
+my-project/
+├── src/
+│   ├── js/
+│   │   └── main.js
+│   └── scss/
+│   |   └── styles.scss
+|   └── index.html
+├── package-lock.json
+├── package.json
+└── vite.config.js
+```
+
+At this point, everything is in the right place, but Vite won't work because we haven't filled in our `vite.config.js` yet.
+
+## Configure Vite
+
+With dependencies installed and our project folder ready for us to start coding, we can now configure Vite and run our project locally.
+
+1. **Open `vite.config.js` in your editor.** Since it's blank, we'll need to add some boilerplate config to it so we can start our server. This part of the config tells Vite where to look for our project's JavaScript and how the development server should behave (pulling from the `src` folder with hot reload).
+
+   <!-- eslint-skip -->
+   ```js
+   import { resolve } from 'path'
+
+   export default {
+     root: resolve(__dirname, 'src'),
+     build: {
+       outDir: '../dist'
+     },
+     server: {
+       port: 8080
+     }
+   }
+   ```
+
+2. **Next we fill in `src/index.html`.** This is the HTML page Vite will load in the browser to utilize the bundled CSS and JS we'll add to it in later steps.
+
+   ```html
+   <!doctype html>
+   <html lang="en">
+     <head>
+       <meta charset="utf-8">
+       <meta name="viewport" content="width=device-width, initial-scale=1">
+       <title>Bootstrap w/ Vite</title>
+       <script type="module" src="./js/main.js"></script>
+     </head>
+     <body>
+       <div class="container py-4 px-3 mx-auto">
+         <h1>Hello, Bootstrap and Vite!</h1>
+         <button class="btn btn-primary">Primary button</button>
+       </div>
+     </body>
+   </html>
+   ```
+
+   We're including a little bit of Bootstrap styling here with the `div class="container"` and `<button>` so that we see when Bootstrap's CSS is loaded by Vite.
+
+3. **Now we need an npm script to run Vite.** Open `package.json` and add the `start` script shown below (you should already have the test script). We'll use this script to start our local Vite dev server.
+
+   ```json
+   {
+     // ...
+     "scripts": {
+       "start": "vite",
+       "test": "echo \"Error: no test specified\" && exit 1"
+     },
+     // ...
+   }
+   ```
+
+4. **And finally, we can start Vite.** From the `my-project` folder in your terminal, run that newly added npm script:
+
+   ```sh
+   npm start
+   ```
+
+   ![Vite dev server running](/assets/img/guides/vite-dev-server.png)
+
+In the next and final section to this guide, we’ll import all of Bootstrap’s CSS and JavaScript.
+
+## Import Bootstrap
+
+1. **Import Bootstrap's CSS.** Add the following to `src/scss/styles.scss` to import all of Bootstrap's source Sass.
+
+   ```scss
+   // Import all of Bootstrap's CSS
+   @import "bootstrap/scss/bootstrap";
+   ```
+
+   *You can also import our stylesheets individually if you want. [Read our Sass import docs]({{< docsref "/customize/sass#importing" >}}) for details.*
+
+2. **Next we load the CSS and import Bootstrap's JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap's JS. Popper will be imported automatically through Bootstrap.
+
+   <!-- eslint-skip -->
+   ```js
+   // Import our custom CSS
+   import '../scss/styles.scss'
+
+   // Import all of Bootstrap's JS
+   import * as bootstrap from 'bootstrap'
+   ```
+
+   You can also import JavaScript plugins individually as needed to keep bundle sizes down:
+
+   <!-- eslint-skip -->
+   ```js
+   import Alert from 'bootstrap/js/dist/alert';
+
+   // or, specify which plugins you need:
+   import { Tooltip, Toast, Popover } from 'bootstrap';
+   ```
+
+   *[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Bootstrap's plugins.*
+
+3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:
+
+   ![Vite dev server running with Bootstrap](/assets/img/guides/vite-dev-server-bootstrap.png)
+
+   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.
+
+{{< markdown >}}
+{{< partial "guide-footer.md" >}}
+{{< /markdown >}}
diff --git a/site/content/docs/5.3/getting-started/webpack.md b/site/content/docs/5.3/getting-started/webpack.md
new file mode 100644
index 000000000..af1cbfa83
--- /dev/null
+++ b/site/content/docs/5.3/getting-started/webpack.md
@@ -0,0 +1,347 @@
+---
+layout: docs
+title: Bootstrap and Webpack
+description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Webpack.
+group: getting-started
+toc: true
+thumbnail: guides/[email protected]
+---
+
+<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png, /docs/{{< param docs_version >}}/assets/img/guides/[email protected] 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png" width="800" height="400" 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.
+{{< /callout >}}
+
+## Setup
+
+We're building a Webpack project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
+
+1. **Create a project folder and set up npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
+
+   ```sh
+   mkdir my-project && cd my-project
+   npm init -y
+   ```
+
+2. **Install Webpack.** Next we need to install our Webpack development dependencies: `webpack` for the core of Webpack, `webpack-cli` so we can run Webpack commands from the terminal, and `webpack-dev-server` so we can run a local development server. Additionally, we'll install `html-webpack-plugin` to be able to store our `index.html` in `src` directory instead of the default `dist` one. We use `--save-dev` to signal that these dependencies are only for development use and not for production.
+
+   ```sh
+   npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
+   ```
+
+3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Popper since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don't plan on using those components, you can omit Popper here.
+
+   ```sh
+   npm i --save bootstrap @popperjs/core
+   ```
+
+4. **Install additional dependencies.** In addition to Webpack and Bootstrap, we need a few more dependencies to properly import and bundle Bootstrap's CSS and JS with Webpack. These include Sass, some loaders, and Autoprefixer.
+
+   ```sh
+   npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
+   ```
+
+Now that we have all the necessary dependencies installed, we can get to work creating the project files and importing Bootstrap.
+
+## Project structure
+
+We've already created the `my-project` folder and initialized npm. Now we'll also create our `src` and `dist` folders to round out the project structure. Run the following from `my-project`, or manually create the folder and file structure shown below.
+
+```sh
+mkdir {src,src/js,src/scss}
+touch src/index.html src/js/main.js src/scss/styles.scss webpack.config.js
+```
+
+When you're done, your complete project should look like this:
+
+```text
+my-project/
+├── src/
+│   ├── js/
+│   │   └── main.js
+│   ├── scss/
+│   │   └── styles.scss
+│   └── index.html
+├── package-lock.json
+├── package.json
+└── webpack.config.js
+```
+
+At this point, everything is in the right place, but Webpack won't work because we haven't filled in our `webpack.config.js` yet.
+
+## Configure Webpack
+
+With dependencies installed and our project folder ready for us to start coding, we can now configure Webpack and run our project locally.
+
+1. **Open `webpack.config.js` in your editor.** Since it's blank, we'll need to add some boilerplate config to it so we can start our server. This part of the config tells Webpack where to look for our project's JavaScript, where to output the compiled code to (`dist`), and how the development server should behave (pulling from the `dist` folder with hot reload).
+
+   ```js
+   'use strict'
+
+   const path = require('path')
+   const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+   module.exports = {
+     mode: 'development',
+     entry: './src/js/main.js',
+     output: {
+       filename: 'main.js',
+       path: path.resolve(__dirname, 'dist')
+     },
+     devServer: {
+       static: path.resolve(__dirname, 'dist'),
+       port: 8080,
+       hot: true
+     },
+     plugins: [
+       new HtmlWebpackPlugin({ template: './src/index.html' })
+     ]
+   }
+   ```
+
+2. **Next we fill in our `src/index.html`.** This is the HTML page Webpack will load in the browser to utilize the bundled CSS and JS we'll add to it in later steps. Before we can do that, we have to give it something to render and include the `output` JS from the previous step.
+
+   ```html
+   <!doctype html>
+   <html lang="en">
+     <head>
+       <meta charset="utf-8">
+       <meta name="viewport" content="width=device-width, initial-scale=1">
+       <title>Bootstrap w/ Webpack</title>
+     </head>
+     <body>
+       <div class="container py-4 px-3 mx-auto">
+         <h1>Hello, Bootstrap and Webpack!</h1>
+         <button class="btn btn-primary">Primary button</button>
+       </div>
+     </body>
+   </html>
+   ```
+
+   We're including a little bit of Bootstrap styling here with the `div class="container"` and `<button>` so that we see when Bootstrap's CSS is loaded by Webpack.
+
+3. **Now we need an npm script to run Webpack.** Open `package.json` and add the `start` script shown below (you should already have the test script). We'll use this script to start our local Webpack dev server. You can also add a `build` script shown below to build your project.
+
+   ```json
+   {
+     // ...
+     "scripts": {
+       "start": "webpack serve",
+       "build": "webpack build --mode=production",
+       "test": "echo \"Error: no test specified\" && exit 1"
+     },
+     // ...
+   }
+   ```
+
+4. **And finally, we can start Webpack.** From the `my-project` folder in your terminal, run that newly added npm script:
+
+   ```sh
+   npm start
+   ```
+
+   ![Webpack dev server running](/assets/img/guides/webpack-dev-server.png)
+
+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.
+
+## Import Bootstrap
+
+Importing Bootstrap into Webpack requires the loaders we installed in the first section. We've installed them with npm, but now Webpack needs to be configured to use them.
+
+1. **Set up the loaders in `webpack.config.js`.** Your configuration file is now complete and should match the snippet below. The only new part here is the `module` section.
+
+   ```js
+   'use strict'
+
+   const path = require('path')
+   const autoprefixer = require('autoprefixer')
+   const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+   module.exports = {
+     mode: 'development',
+     entry: './src/js/main.js',
+     output: {
+       filename: 'main.js',
+       path: path.resolve(__dirname, 'dist')
+     },
+     devServer: {
+       static: path.resolve(__dirname, 'dist'),
+       port: 8080,
+       hot: true
+     },
+     plugins: [
+       new HtmlWebpackPlugin({ template: './src/index.html' })
+     ],
+     module: {
+       rules: [
+         {
+           test: /\.(scss)$/,
+           use: [
+             {
+               // Adds CSS to the DOM by injecting a `<style>` tag
+               loader: 'style-loader'
+             },
+             {
+               // Interprets `@import` and `url()` like `import/require()` and will resolve them
+               loader: 'css-loader'
+             },
+             {
+               // Loader for webpack to process CSS with PostCSS
+               loader: 'postcss-loader',
+               options: {
+                 postcssOptions: {
+                   plugins: [
+                     autoprefixer
+                   ]
+                 }
+               }
+             },
+             {
+               // Loads a SASS/SCSS file and compiles it to CSS
+               loader: 'sass-loader'
+             }
+           ]
+         }
+       ]
+     }
+   }
+   ```
+
+   Here's a recap of why we need all these loaders. `style-loader` injects the CSS into a `<style>` element in the `<head>` of the HTML page, `css-loader` helps with using `@import` and `url()`, `postcss-loader` is required for Autoprefixer, and `sass-loader` allows us to use Sass.
+
+2. **Now, let's import Bootstrap's CSS.** Add the following to `src/scss/styles.scss` to import all of Bootstrap's source Sass.
+
+   ```scss
+   // Import all of Bootstrap's CSS
+   @import "bootstrap/scss/bootstrap";
+   ```
+
+   *You can also import our stylesheets individually if you want. [Read our Sass import docs]({{< docsref "/customize/sass#importing" >}}) for details.*
+
+3. **Next we load the CSS and import Bootstrap's JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap's JS. Popper will be imported automatically through Bootstrap.
+
+   <!-- eslint-skip -->
+   ```js
+   // Import our custom CSS
+   import '../scss/styles.scss'
+
+   // Import all of Bootstrap's JS
+   import * as bootstrap from 'bootstrap'
+   ```
+
+   You can also import JavaScript plugins individually as needed to keep bundle sizes down:
+
+   <!-- eslint-skip -->
+   ```js
+   import Alert from 'bootstrap/js/dist/alert'
+
+   // or, specify which plugins you need:
+   import { Tooltip, Toast, Popover } from 'bootstrap'
+   ```
+
+   *[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Bootstrap's plugins.*
+
+4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:
+
+   ![Webpack dev server running with Bootstrap](/assets/img/guides/webpack-dev-server-bootstrap.png)
+
+   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.
+
+## Production optimizations
+
+Depending on your setup, you may want to implement some additional security and speed optimizations useful for running the project in production. Note that these optimizations are not applied on [the Webpack example project](https://github.com/twbs/examples/tree/main/webpack) and are up to you to implement.
+
+### Extracting CSS
+
+The `style-loader` we configured above conveniently emits CSS into the bundle so that manually loading a CSS file in `dist/index.html` isn't necessary. This approach may not work with a strict Content Security Policy, however, and it may become a bottleneck in your application due to the large bundle size.
+
+To separate the CSS so that we can load it directly from `dist/index.html`, use the `mini-css-extract-loader` Webpack plugin.
+
+First, install the plugin:
+
+```sh
+npm install --save-dev mini-css-extract-plugin
+```
+
+Then instantiate and use the plugin in the Webpack configuration:
+
+```diff
+--- a/webpack.config.js
++++ b/webpack.config.js
+@@ -3,6 +3,7 @@
+ const path = require('path')
+ const autoprefixer = require('autoprefixer')
+ const HtmlWebpackPlugin = require('html-webpack-plugin')
++const miniCssExtractPlugin = require('mini-css-extract-plugin')
+
+ module.exports = {
+   mode: 'development',
+@@ -17,7 +18,8 @@ module.exports = {
+     hot: true
+   },
+   plugins: [
+-    new HtmlWebpackPlugin({ template: './src/index.html' })
++    new HtmlWebpackPlugin({ template: './src/index.html' }),
++    new miniCssExtractPlugin()
+   ],
+   module: {
+     rules: [
+@@ -25,8 +27,8 @@ module.exports = {
+         test: /\.(scss)$/,
+         use: [
+           {
+-            // Adds CSS to the DOM by injecting a `<style>` tag
+-            loader: 'style-loader'
++            // Extracts CSS for each JS file that includes CSS
++            loader: miniCssExtractPlugin.loader
+           },
+           {
+```
+
+After running `npm run build` again, there will be a new file `dist/main.css`, which will contain all of the CSS imported by `src/js/main.js`. If you view `dist/index.html` in your browser now, the style will be missing, as it is now in `dist/main.css`. You can include the generated CSS in `dist/index.html` like this:
+
+```diff
+--- a/dist/index.html
++++ b/dist/index.html
+@@ -3,6 +3,7 @@
+   <head>
+     <meta charset="utf-8">
+     <meta name="viewport" content="width=device-width, initial-scale=1">
++    <link rel="stylesheet" href="./main.css">
+     <title>Bootstrap w/ Webpack</title>
+   </head>
+   <body>
+```
+
+### Extracting SVG files
+
+Bootstrap's CSS includes multiple references to SVG files via inline `data:` URIs. If you define a Content Security Policy for your project that blocks `data:` URIs for images, then these SVG files will not load. You can get around this problem by extracting the inline SVG files using Webpack's asset modules feature.
+
+Configure Webpack to extract inline SVG files like this:
+
+```diff
+--- a/webpack.config.js
++++ b/webpack.config.js
+@@ -23,6 +23,14 @@ module.exports = {
+   },
+   module: {
+     rules: [
++      {
++        mimetype: 'image/svg+xml',
++        scheme: 'data',
++        type: 'asset/resource',
++        generator: {
++          filename: 'icons/[hash].svg'
++        }
++      },
+       {
+         test: /\.(scss)$/,
+         use: [
+```
+
+After running `npm run build` again, you'll find the SVG files extracted into `dist/icons` and properly referenced from CSS.
+
+{{< markdown >}}
+{{< partial "guide-footer.md" >}}
+{{< /markdown >}}
diff --git a/site/content/docs/5.1/helpers/clearfix.md b/site/content/docs/5.3/helpers/clearfix.md
index f1329d5b4..3aa61876e 100644
--- a/site/content/docs/5.1/helpers/clearfix.md
+++ b/site/content/docs/5.3/helpers/clearfix.md
@@ -3,7 +3,7 @@ layout: docs
 title: Clearfix
 description: Quickly and easily clear floated content within a container by adding a clearfix utility.
 group: helpers
-aliases: "/docs/5.1/helpers/"
+aliases: "/docs/5.3/helpers/"
 ---
 
 Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also be used as a mixin.
diff --git a/site/content/docs/5.3/helpers/color-background.md b/site/content/docs/5.3/helpers/color-background.md
new file mode 100644
index 000000000..780662e96
--- /dev/null
+++ b/site/content/docs/5.3/helpers/color-background.md
@@ -0,0 +1,55 @@
+---
+layout: docs
+title: Color and background
+description: Set a background color with contrasting foreground color.
+group: helpers
+toc: true
+added:
+  version: "5.2"
+---
+
+## Overview
+
+Color and background helpers combine the power of our [`.text-*` utilities]({{< docsref "/utilities/colors" >}}) and [`.bg-*` utilities]({{< docsref "/utilities/background" >}}) in one class. Using our Sass `color-contrast()` function, we automatically determine a contrasting `color` for a particular `background-color`.
+
+{{< callout warning >}}
+**Heads up!** There's currently no support for a CSS-native `color-contrast` function, so we use our own via Sass. This means that customizing our theme colors via CSS variables may cause color contrast issues with these utilities.
+{{< /callout >}}
+
+{{< example >}}
+{{< text-bg.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<div class="text-bg-{{ .name }} p-3">{{ .name | title }} with contrasting color</div>
+{{- end -}}
+{{< /text-bg.inline >}}
+{{< /example >}}
+
+{{< callout info >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
+{{< /callout >}}
+
+## With components
+
+Use them in place of combined `.text-*` and `.bg-*` classes, like on [badges]({{< docsref "/components/badge#background-colors" >}}):
+
+{{< example >}}
+<span class="badge text-bg-primary">Primary</span>
+<span class="badge text-bg-info">Info</span>
+{{< /example >}}
+
+Or on [cards]({{< docsref "/components/card#background-and-color" >}}):
+
+{{< example >}}
+<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
+  <div class="card-body">
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>
+<div class="card text-bg-info mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
+  <div class="card-body">
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>
+{{< /example >}}
diff --git a/site/content/docs/5.3/helpers/colored-links.md b/site/content/docs/5.3/helpers/colored-links.md
new file mode 100644
index 000000000..6a3dbe4b7
--- /dev/null
+++ b/site/content/docs/5.3/helpers/colored-links.md
@@ -0,0 +1,43 @@
+---
+layout: docs
+title: Colored links
+description: Colored links with hover states
+group: helpers
+toc: true
+---
+
+## Link colors
+
+You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
+
+{{< callout info >}}
+**Heads up!** `.link-body-emphasis` is currently the only colored link that adapts to color modes. It's treated as a special case until v6 arrives and we can more thoroughly rebuild our theme colors for color modes. Until then, it's a unique, high-contrast link color with custom `:hover` and `:focus` styles. However, it still responds to the new link utilities.
+{{< /callout >}}
+
+{{< example >}}
+{{< colored-links.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<p><a href="#" class="link-{{ .name }}">{{ .name | title }} link</a></p>
+{{- end -}}
+{{< /colored-links.inline >}}
+<p><a href="#" class="link-body-emphasis">Emphasis link</a></p>
+{{< /example >}}
+
+{{< callout info >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
+{{< /callout >}}
+
+## Link utilities
+
+{{< added-in "5.3.0" >}}
+
+Colored links can also be modified by our [link utilities]({{< docsref "/utilities/link/" >}}).
+
+{{< example >}}
+{{< colored-links.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<p><a href="#" class="link-{{ .name }} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">{{ .name | title }} link</a></p>
+{{- end -}}
+{{< /colored-links.inline >}}
+<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>
+{{< /example >}}
diff --git a/site/content/docs/5.3/helpers/focus-ring.md b/site/content/docs/5.3/helpers/focus-ring.md
new file mode 100644
index 000000000..5a4e0f0fa
--- /dev/null
+++ b/site/content/docs/5.3/helpers/focus-ring.md
@@ -0,0 +1,69 @@
+---
+layout: docs
+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:
+  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.
+
+## Example
+
+Click directly on the link below to see the focus ring in action, or into the example below and then press <kbd>Tab</kbd>.
+
+{{< example >}}
+<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
+  Custom focus ring
+</a>
+{{< /example >}}
+
+## Customize
+
+Modify the styling of a focus ring with our CSS variables, Sass variables, utilities, or custom styles.
+
+### CSS variables
+
+Modify the `--bs-focus-ring-*` CSS variables as needed to change the default appearance.
+
+{{< example >}}
+<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-color: rgba(var(--bs-success-rgb), .25)">
+  Green focus ring
+</a>
+{{< /example >}}
+
+`.focus-ring` sets styles via global CSS variables that can be overridden on any parent element, as shown above. These variables are generated from their Sass variable counterparts.
+
+{{< scss-docs name="root-focus-variables" file="scss/_root.scss" >}}
+
+By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values. Modify them to change the default appearance.
+
+{{< example >}}
+<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-x: 10px; --bs-focus-ring-y: 10px; --bs-focus-ring-blur: 4px">
+  Blurry offset focus ring
+</a>
+{{< /example >}}
+
+### Sass variables
+
+Customize the focus ring Sass variables to modify all usage of the focus ring styles across your Bootstrap-powered project.
+
+{{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}}
+
+### Sass utilities API
+
+In addition to `.focus-ring`, we have several `.focus-ring-*` utilities to modify the helper class defaults. Modify the color with any of our [theme colors]({{< docsref "/customize/color#theme-colors" >}}). Note that the light and dark variants may not be visible on all background colors given current color mode support.
+
+{{< example >}}
+{{< focus-ring.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<p><a href="#" class="d-inline-flex focus-ring focus-ring-{{ .name }} py-1 px-2 text-decoration-none border rounded-2">{{ title .name }} focus</a></p>
+{{- end -}}
+{{< /focus-ring.inline >}}
+{{< /example >}}
+
+Focus ring utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-focus-ring" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.3/helpers/icon-link.md b/site/content/docs/5.3/helpers/icon-link.md
new file mode 100644
index 000000000..1e5cc8b12
--- /dev/null
+++ b/site/content/docs/5.3/helpers/icon-link.md
@@ -0,0 +1,89 @@
+---
+layout: docs
+title: Icon link
+description: Quickly create stylized hyperlinks with Bootstrap Icons or other icons.
+group: helpers
+toc: true
+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`.
+
+Icon links assume [Bootstrap Icons](https://icons.getbootstrap.com) are being used, but you can use any icon or image you like.
+
+{{< callout >}}
+When icons are purely decorative, they should be hidden from assistive technologies using `aria-hidden="true"`, as we've done in our examples. For icons that convey meaning, provide an appropriate text alternative by adding `role="img"` and an appropriate `aria-label="..."` to the SVGs.
+{{< /callout >}}
+
+## Example
+
+Take a regular `<a>` element, add `.icon-link`, and insert an icon on either the left or right of your link text. The icon is automatically sized, placed, and colored.
+
+{{< example >}}
+<a class="icon-link" href="#">
+  <svg class="bi" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
+  Icon link
+</a>
+{{< /example >}}
+
+{{< example >}}
+<a class="icon-link" href="#">
+  Icon link
+  <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+</a>
+{{< /example >}}
+
+## Style on hover
+
+Add `.icon-link-hover` to move the icon to the right on hover.
+
+{{< example >}}
+<a class="icon-link icon-link-hover" href="#">
+  Icon link
+  <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+</a>
+{{< /example >}}
+
+## Customize
+
+Modify the styling of an icon link with our link CSS variables, Sass variables, utilities, or custom styles.
+
+### CSS variables
+
+Modify the `--bs-link-*` and `--bs-icon-link-*` CSS variables as needed to change the default appearance.
+
+Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS variable:
+
+{{< example >}}
+<a class="icon-link icon-link-hover" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);" href="#">
+  <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>
+  Icon link
+</a>
+{{< /example >}}
+
+Customize the color by overriding the `--bs-link-*` CSS variable:
+
+{{< example >}}
+<a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="#">
+  Icon link
+  <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+</a>
+{{< /example >}}
+
+### Sass variables
+
+Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project.
+
+{{< scss-docs name="icon-link-variables" file="scss/_variables.scss" >}}
+
+### Sass utilities API
+
+Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset.
+
+{{< example >}}
+<a class="icon-link icon-link-hover link-success link-underline-success link-underline-opacity-25" href="#">
+  Icon link
+  <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+</a>
+{{< /example >}}
diff --git a/site/content/docs/5.1/helpers/position.md b/site/content/docs/5.3/helpers/position.md
index d54c1c795..b4e1f71f9 100644
--- a/site/content/docs/5.1/helpers/position.md
+++ b/site/content/docs/5.3/helpers/position.md
@@ -24,7 +24,7 @@ Position an element at the bottom of the viewport, from edge to edge. Be sure yo
 
 ## Sticky top
 
-Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The `.sticky-top` utility uses CSS's `position: sticky`, which isn't fully supported in all browsers.
+Position an element at the top of the viewport, from edge to edge, but only after you scroll past it.
 
 ```html
 <div class="sticky-top">...</div>
@@ -39,4 +39,25 @@ Responsive variations also exist for `.sticky-top` utility.
 <div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
 <div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
 <div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>
+<div class="sticky-xxl-top">Stick to the top on viewports sized XXL (extra-extra-large) or wider</div>
+```
+
+## Sticky bottom
+
+Position an element at the bottom of the viewport, from edge to edge, but only after you scroll past it.
+
+```html
+<div class="sticky-bottom">...</div>
+```
+
+## Responsive sticky bottom
+
+Responsive variations also exist for `.sticky-bottom` utility.
+
+```html
+<div class="sticky-sm-bottom">Stick to the bottom on viewports sized SM (small) or wider</div>
+<div class="sticky-md-bottom">Stick to the bottom on viewports sized MD (medium) or wider</div>
+<div class="sticky-lg-bottom">Stick to the bottom on viewports sized LG (large) or wider</div>
+<div class="sticky-xl-bottom">Stick to the bottom on viewports sized XL (extra-large) or wider</div>
+<div class="sticky-xxl-bottom">Stick to the bottom on viewports sized XXL (extra-extra-large) or wider</div>
 ```
diff --git a/site/content/docs/5.1/helpers/ratio.md b/site/content/docs/5.3/helpers/ratio.md
index 771bc07cb..04b6eefea 100644
--- a/site/content/docs/5.1/helpers/ratio.md
+++ b/site/content/docs/5.3/helpers/ratio.md
@@ -74,7 +74,7 @@ This CSS variable makes it easy to modify the aspect ratio across breakpoints. T
 {{< /example >}}
 
 
-## Sass map
+## Sass maps
 
 Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$ratio-aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use.
 
diff --git a/site/content/docs/5.1/helpers/stacks.md b/site/content/docs/5.3/helpers/stacks.md
index 20ca86aa0..f85a7533e 100644
--- a/site/content/docs/5.1/helpers/stacks.md
+++ b/site/content/docs/5.3/helpers/stacks.md
@@ -4,23 +4,25 @@ 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:
+  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/).
 
 {{< callout warning >}}
-Heads up! Support for gap utilities with flexbox was recently added to Safari, so consider verifying your intended browser support. Grid layout should have no issues. [Read more](https://caniuse.com/flexbox-gap).
+**Heads up!** Support for gap utilities with flexbox was recently added to Safari, so consider verifying your intended browser support. Grid layout should have no issues. [Read more](https://caniuse.com/flexbox-gap).
 {{< /callout >}}
 
 ## Vertical
 
 Use `.vstack` to create vertical layouts. Stacked items are full-width by default. Use `.gap-*` utilities to add space between items.
 
-{{< example >}}
+{{< example class="bd-example-flex" >}}
 <div class="vstack gap-3">
-  <div class="bg-light border">First item</div>
-  <div class="bg-light border">Second item</div>
-  <div class="bg-light border">Third item</div>
+  <div class="p-2">First item</div>
+  <div class="p-2">Second item</div>
+  <div class="p-2">Third item</div>
 </div>
 {{< /example >}}
 
@@ -28,32 +30,32 @@ Use `.vstack` to create vertical layouts. Stacked items are full-width by defaul
 
 Use `.hstack` for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Use `.gap-*` utilities to add space between items.
 
-{{< example >}}
+{{< example class="bd-example-flex" >}}
 <div class="hstack gap-3">
-  <div class="bg-light border">First item</div>
-  <div class="bg-light border">Second item</div>
-  <div class="bg-light border">Third item</div>
+  <div class="p-2">First item</div>
+  <div class="p-2">Second item</div>
+  <div class="p-2">Third item</div>
 </div>
 {{< /example >}}
 
 Using horizontal margin utilities like `.ms-auto` as spacers:
 
-{{< example >}}
+{{< example class="bd-example-flex" >}}
 <div class="hstack gap-3">
-  <div class="bg-light border">First item</div>
-  <div class="bg-light border ms-auto">Second item</div>
-  <div class="bg-light border">Third item</div>
+  <div class="p-2">First item</div>
+  <div class="p-2 ms-auto">Second item</div>
+  <div class="p-2">Third item</div>
 </div>
 {{< /example >}}
 
 And with [vertical rules]({{< docsref "/helpers/vertical-rule" >}}):
 
-{{< example >}}
+{{< example class="bd-example-flex" >}}
 <div class="hstack gap-3">
-  <div class="bg-light border">First item</div>
-  <div class="bg-light border ms-auto">Second item</div>
+  <div class="p-2">First item</div>
+  <div class="p-2 ms-auto">Second item</div>
   <div class="vr"></div>
-  <div class="bg-light border">Third item</div>
+  <div class="p-2">Third item</div>
 </div>
 {{< /example >}}
 
@@ -79,6 +81,6 @@ Create an inline form with `.hstack`:
 </div>
 {{< /example >}}
 
-## Sass
+## CSS
 
 {{< scss-docs name="stacks" file="scss/helpers/_stacks.scss" >}}
diff --git a/site/content/docs/5.1/helpers/stretched-link.md b/site/content/docs/5.3/helpers/stretched-link.md
index 93bffeb31..21a11c030 100644
--- a/site/content/docs/5.1/helpers/stretched-link.md
+++ b/site/content/docs/5.3/helpers/stretched-link.md
@@ -36,7 +36,7 @@ Most custom components do not have `position: relative` by default, so we need t
 {{< /example >}}
 
 {{< example >}}
-<div class="row g-0 bg-light position-relative">
+<div class="row g-0 bg-body-secondary position-relative">
   <div class="col-md-6 mb-md-0 p-md-4">
     {{< placeholder width="100%" height="200" class="w-100" text="false" title="Generic placeholder image" >}}
   </div>
@@ -66,7 +66,7 @@ If the stretched link doesn't seem to work, the [containing block](https://devel
     <p class="card-text">
       <a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
     </p>
-    <p class="card-text bg-light" style="transform: rotate(0);">
+    <p class="card-text bg-body-tertiary" style="transform: rotate(0);">
       This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
     </p>
   </div>
diff --git a/site/content/docs/5.1/helpers/text-truncation.md b/site/content/docs/5.3/helpers/text-truncation.md
index 799f2059b..799f2059b 100644
--- a/site/content/docs/5.1/helpers/text-truncation.md
+++ b/site/content/docs/5.3/helpers/text-truncation.md
diff --git a/site/content/docs/5.1/helpers/vertical-rule.md b/site/content/docs/5.3/helpers/vertical-rule.md
index 8d0d6141f..9e5981f22 100644
--- a/site/content/docs/5.1/helpers/vertical-rule.md
+++ b/site/content/docs/5.3/helpers/vertical-rule.md
@@ -4,6 +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:
+  version: "5.1"
 ---
 
 ## How it works
@@ -34,11 +36,19 @@ Vertical rules scale their height in flex layouts:
 
 They can also be used in [stacks]({{< docsref "/helpers/stacks" >}}):
 
-{{< example >}}
+{{< example class="bd-example-flex" >}}
 <div class="hstack gap-3">
-  <div class="bg-light border">First item</div>
-  <div class="bg-light border ms-auto">Second item</div>
+  <div class="p-2">First item</div>
+  <div class="p-2 ms-auto">Second item</div>
   <div class="vr"></div>
-  <div class="bg-light border">Third item</div>
+  <div class="p-2">Third item</div>
 </div>
 {{< /example >}}
+
+## CSS
+
+### Sass variables
+
+Customize the vertical rule Sass variable to change its width.
+
+{{< scss-docs name="vr-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.1/helpers/visually-hidden.md b/site/content/docs/5.3/helpers/visually-hidden.md
index 245546994..917756034 100644
--- a/site/content/docs/5.1/helpers/visually-hidden.md
+++ b/site/content/docs/5.3/helpers/visually-hidden.md
@@ -3,7 +3,7 @@ layout: docs
 title: Visually hidden
 description: Use these helpers to visually hide elements but keep them accessible to assistive technologies.
 group: helpers
-aliases: "/docs/5.1/helpers/screen-readers/"
+aliases: "/docs/5.3/helpers/screen-readers/"
 ---
 
 Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). `.visually-hidden-focusable` can also be applied to a container–thanks to `:focus-within`, the container will be displayed when any child element of the container receives focus.
diff --git a/site/content/docs/5.1/layout/breakpoints.md b/site/content/docs/5.3/layout/breakpoints.md
index a11dfb050..1799503ba 100644
--- a/site/content/docs/5.1/layout/breakpoints.md
+++ b/site/content/docs/5.3/layout/breakpoints.md
@@ -3,7 +3,7 @@ layout: docs
 title: Breakpoints
 description: Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.
 group: layout
-aliases: "/docs/5.1/layout/"
+aliases: "/docs/5.3/layout/"
 toc: true
 ---
 
@@ -19,47 +19,17 @@ toc: true
 
 Bootstrap includes six default breakpoints, sometimes referred to as _grid tiers_, for building responsively. These breakpoints can be customized if you're using our source Sass files.
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>Breakpoint</th>
-      <th>Class infix</th>
-      <th>Dimensions</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>X-Small</td>
-      <td><em>None</em></td>
-      <td>&lt;576px</td>
-    </tr>
-    <tr>
-      <td>Small</td>
-      <td><code>sm</code></td>
-      <td>&ge;576px</td>
-    </tr>
-    <tr>
-      <td>Medium</td>
-      <td><code>md</code></td>
-      <td>&ge;768px</td>
-    </tr>
-    <tr>
-      <td>Large</td>
-      <td><code>lg</code></td>
-      <td>&ge;992px</td>
-    </tr>
-    <tr>
-      <td>Extra large</td>
-      <td><code>xl</code></td>
-      <td>&ge;1200px</td>
-    </tr>
-    <tr>
-      <td>Extra extra large</td>
-      <td><code>xxl</code></td>
-      <td>&ge;1400px</td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table "table" >}}
+| Breakpoint | Class infix | Dimensions |
+| --- | --- | --- |
+| Extra small | <em>None</em> |&lt;576px |
+| Small | `sm` | &ge;576px |
+| Medium | `md` | &ge;768px |
+| Large | `lg` | &ge;992px |
+| Extra large | `xl` | &ge;1200px |
+| Extra extra large | `xxl` | &ge;1400px |
+{{< /bs-table >}}
+
 
 Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don't specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.
 
@@ -67,11 +37,11 @@ These breakpoints are customizable via Sass—you'll find them in a Sass map in
 
 {{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
 
-For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).
+For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]({{< docsref "/layout/grid#css" >}}).
 
 ## 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
 
@@ -124,7 +94,7 @@ These Sass mixins translate in our compiled CSS using the values declared in our
 
 ### Max-width
 
-We occasionally use media queries that go in the other direction (the given screen size *or smaller*):
+We occasionally use media queries that go in the other direction (the given screen size _or smaller_):
 
 ```scss
 // No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@@ -165,7 +135,7 @@ These mixins take those declared breakpoints, subtract `.02px` from them, and us
 ```
 
 {{< callout warning >}}
-{{< partial "callout-info-mediaqueries-breakpoints.md" >}}
+{{< partial "callouts/info-mediaqueries-breakpoints.md" >}}
 {{< /callout >}}
 
 ### Single breakpoint
diff --git a/site/content/docs/5.1/layout/columns.md b/site/content/docs/5.3/layout/columns.md
index 5c859065a..e6f525563 100644
--- a/site/content/docs/5.1/layout/columns.md
+++ b/site/content/docs/5.3/layout/columns.md
@@ -24,8 +24,10 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
 
 ### Vertical alignment
 
+Change the vertical alignment with any of the responsive `align-items-*` classes.
+
 {{< example class="bd-example-row bd-example-row-flex-cols" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row align-items-start">
     <div class="col">
       One of three columns
@@ -37,6 +39,11 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
       One of three columns
     </div>
   </div>
+</div>
+{{< /example >}}
+
+{{< example class="bd-example-row bd-example-row-flex-cols" >}}
+<div class="container text-center">
   <div class="row align-items-center">
     <div class="col">
       One of three columns
@@ -48,6 +55,11 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
       One of three columns
     </div>
   </div>
+</div>
+{{< /example >}}
+
+{{< example class="bd-example-row bd-example-row-flex-cols" >}}
+<div class="container text-center">
   <div class="row align-items-end">
     <div class="col">
       One of three columns
@@ -62,8 +74,10 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
 </div>
 {{< /example >}}
 
+Or, change the alignment of each column individually with any of the responsive `.align-self-*` classes.
+
 {{< example class="bd-example-row bd-example-row-flex-cols" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row">
     <div class="col align-self-start">
       One of three columns
@@ -80,8 +94,10 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
 
 ### Horizontal alignment
 
+Change the horizontal alignment with any of the responsive `justify-content-*` classes.
+
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row justify-content-start">
     <div class="col-4">
       One of two columns
@@ -152,7 +168,7 @@ If more than 12 columns are placed within a single row, each group of extra colu
 Breaking columns to a new line in flexbox requires a small hack: add an element with `width: 100%` wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple `.row`s, but not every implementation method can account for this.
 
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row">
     <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
     <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
@@ -169,7 +185,7 @@ Breaking columns to a new line in flexbox requires a small hack: add an element
 You may also apply this break at specific breakpoints with our [responsive display utilities]({{< docsref "/utilities/display" >}}).
 
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row">
     <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
     <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
@@ -187,10 +203,10 @@ You may also apply this break at specific breakpoints with our [responsive displ
 
 ### Order classes
 
-Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers.
+Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers. If you need more `.order-*` classes, you can modify the default number via Sass variable.
 
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row">
     <div class="col">
       First in DOM, no order applied
@@ -208,7 +224,7 @@ Use `.order-` classes for controlling the **visual order** of your content. Thes
 There are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 6`, respectively. These classes can also be intermixed with the numbered `.order-*` classes as needed.
 
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row">
     <div class="col order-last">
       First in DOM, ordered last
@@ -232,7 +248,7 @@ You can offset grid columns in two ways: our responsive `.offset-` grid classes
 Move columns to the right using `.offset-md-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns.
 
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row">
     <div class="col-md-4">.col-md-4</div>
     <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
@@ -250,7 +266,7 @@ Move columns to the right using `.offset-md-*` classes. These classes increase t
 In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in [the grid example]({{< docsref "/examples/grid" >}}).
 
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row">
     <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
     <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
@@ -267,7 +283,7 @@ In addition to column clearing at responsive breakpoints, you may need to reset
 With the move to flexbox in v4, you can use margin utilities like `.me-auto` to force sibling columns away from one another.
 
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row">
     <div class="col-md-4">.col-md-4</div>
     <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
@@ -285,13 +301,14 @@ With the move to flexbox in v4, you can use margin utilities like `.me-auto` to
 
 ## Standalone column classes
 
-The `.col-*` classes can also be used outside a `.row` to give an element a specific width. Whenever column classes are used as non direct children of a row, the paddings are omitted.
+The `.col-*` classes can also be used outside a `.row` to give an element a specific width. Whenever column classes are used as non-direct children of a row, the paddings are omitted.
 
-{{< example >}}
-<div class="col-3 bg-light p-3 border">
+{{< example class="bd-example-row" >}}
+<div class="col-3 p-3 mb-2">
   .col-3: width of 25%
 </div>
-<div class="col-sm-9 bg-light p-3 border">
+
+<div class="col-sm-9 p-3">
   .col-sm-9: width of 75% above sm breakpoint
 </div>
 {{< /example >}}
diff --git a/site/content/docs/5.1/layout/containers.md b/site/content/docs/5.3/layout/containers.md
index 456225b94..e0e8d9aad 100644
--- a/site/content/docs/5.1/layout/containers.md
+++ b/site/content/docs/5.3/layout/containers.md
@@ -13,109 +13,24 @@ Containers are the most basic layout element in Bootstrap and are **required whe
 Bootstrap comes with three different containers:
 
 - `.container`, which sets a `max-width` at each responsive breakpoint
-- `.container-fluid`, which is `width: 100%` at all breakpoints
 - `.container-{breakpoint}`, which is `width: 100%` until the specified breakpoint
+- `.container-fluid`, which is `width: 100%` at all breakpoints
 
 The table below illustrates how each container's `max-width` compares to the original `.container` and `.container-fluid` across each breakpoint.
 
 See them in action and compare them in our [Grid example]({{< docsref "/examples/grid#containers" >}}).
 
-<table class="table">
-  <thead>
-    <tr>
-      <td class="border-dark"></td>
-      <th scope="col">
-        Extra small<br>
-        <span class="fw-normal">&lt;576px</span>
-      </th>
-      <th scope="col">
-        Small<br>
-        <span class="fw-normal">&ge;576px</span>
-      </th>
-      <th scope="col">
-        Medium<br>
-        <span class="fw-normal">&ge;768px</span>
-      </th>
-      <th scope="col">
-        Large<br>
-        <span class="fw-normal">&ge;992px</span>
-      </th>
-      <th scope="col">
-        X-Large<br>
-        <span class="fw-normal">&ge;1200px</span>
-      </th>
-      <th scope="col">
-        XX-Large<br>
-        <span class="fw-normal">&ge;1400px</span>
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row" class="fw-normal"><code>.container</code></th>
-      <td class="text-muted">100%</td>
-      <td>540px</td>
-      <td>720px</td>
-      <td>960px</td>
-      <td>1140px</td>
-      <td>1320px</td>
-    </tr>
-    <tr>
-      <th scope="row" class="fw-normal"><code>.container-sm</code></th>
-      <td class="text-muted">100%</td>
-      <td>540px</td>
-      <td>720px</td>
-      <td>960px</td>
-      <td>1140px</td>
-      <td>1320px</td>
-    </tr>
-    <tr>
-      <th scope="row" class="fw-normal"><code>.container-md</code></th>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td>720px</td>
-      <td>960px</td>
-      <td>1140px</td>
-      <td>1320px</td>
-    </tr>
-    <tr>
-      <th scope="row" class="fw-normal"><code>.container-lg</code></th>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td>960px</td>
-      <td>1140px</td>
-      <td>1320px</td>
-    </tr>
-    <tr>
-      <th scope="row" class="fw-normal"><code>.container-xl</code></th>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td>1140px</td>
-      <td>1320px</td>
-    </tr>
-    <tr>
-      <th scope="row" class="fw-normal"><code>.container-xxl</code></th>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td>1320px</td>
-    </tr>
-    <tr>
-      <th scope="row" class="fw-normal"><code>.container-fluid</code></th>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-      <td class="text-muted">100%</td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table "table" >}}
+|  | Extra small<div class="fw-normal">&lt;576px</div> | Small<div class="fw-normal">&ge;576px</div> | Medium<div class="fw-normal">&ge;768px</div> | Large<div class="fw-normal">&ge;992px</div> | X-Large<div class="fw-normal">&ge;1200px</div> | XX-Large<div class="fw-normal">&ge;1400px</div> |
+| --- | --- | --- | --- | --- | --- | --- |
+| `.container` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
+| `.container-sm` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
+| `.container-md` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 720px | 960px | 1140px | 1320px |
+| `.container-lg` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 960px | 1140px | 1320px |
+| `.container-xl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1140px | 1320px |
+| `.container-xxl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1320px |
+| `.container-fluid` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> |
+{{< /bs-table >}}
 
 ## Default container
 
@@ -149,12 +64,18 @@ Use `.container-fluid` for a full width container, spanning the entire width of
 </div>
 ```
 
-## Sass
+## CSS
+
+### Sass variables
 
 As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in `_variables.scss`) that powers them:
 
 {{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}}
 
+For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#css" >}}).
+
+### Sass mixins
+
 In addition to customizing the Sass, you can also create your own containers with our Sass mixin.
 
 ```scss
@@ -172,5 +93,3 @@ In addition to customizing the Sass, you can also create your own containers wit
   @include make-container();
 }
 ```
-
-For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).
diff --git a/site/content/docs/5.1/layout/css-grid.md b/site/content/docs/5.3/layout/css-grid.md
index c3a1831c1..c79c4ce0f 100644
--- a/site/content/docs/5.1/layout/css-grid.md
+++ b/site/content/docs/5.3/layout/css-grid.md
@@ -4,6 +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:
+  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.
@@ -47,7 +49,7 @@ Compared to the default grid system:
 Three equal-width columns across all viewports and devices can be created by using the `.g-col-4` classes. Add [responsive classes](#responsive) to change the layout by viewport size.
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid">
+<div class="grid text-center">
   <div class="g-col-4">.g-col-4</div>
   <div class="g-col-4">.g-col-4</div>
   <div class="g-col-4">.g-col-4</div>
@@ -59,7 +61,7 @@ Three equal-width columns across all viewports and devices can be created by usi
 Use responsive classes to adjust your layout across viewports. Here we start with two columns on the narrowest viewports, and then grow to three columns on medium viewports and above.
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid">
+<div class="grid text-center">
   <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
   <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
   <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
@@ -69,7 +71,7 @@ Use responsive classes to adjust your layout across viewports. Here we start wit
 Compare that to this two column layout at all viewports.
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid">
+<div class="grid text-center">
   <div class="g-col-6">.g-col-6</div>
   <div class="g-col-6">.g-col-6</div>
 </div>
@@ -80,7 +82,7 @@ Compare that to this two column layout at all viewports.
 Grid items automatically wrap to the next line when there's no more room horizontally. Note that the `gap` applies to horizontal and vertical gaps between grid items.
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid">
+<div class="grid text-center">
   <div class="g-col-6">.g-col-6</div>
   <div class="g-col-6">.g-col-6</div>
 
@@ -94,7 +96,7 @@ Grid items automatically wrap to the next line when there's no more room horizon
 Start classes aim to replace our default grid's offset classes, but they're not entirely the same. CSS Grid creates a grid template through styles that tell browsers to "start at this column" and "end at this column." Those properties are `grid-column-start` and `grid-column-end`. Start classes are shorthand for the former. Pair them with the column classes to size and align your columns however you need. Start classes begin at `1` as `0` is an invalid value for these properties.
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid">
+<div class="grid text-center">
   <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
   <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
 </div>
@@ -105,7 +107,7 @@ Start classes aim to replace our default grid's offset classes, but they're not
 When there are no classes on the grid items (the immediate children of a `.grid`), each grid item will automatically be sized to one column.
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid">
+<div class="grid text-center">
   <div>1</div>
   <div>1</div>
   <div>1</div>
@@ -124,7 +126,7 @@ When there are no classes on the grid items (the immediate children of a `.grid`
 This behavior can be mixed with grid column classes.
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid">
+<div class="grid text-center">
   <div class="g-col-6">.g-col-6</div>
   <div>1</div>
   <div>1</div>
@@ -147,7 +149,7 @@ Similar to our default grid system, our CSS Grid allows for easy nesting of `.gr
 In practice this allows for more complex and custom layouts when compared to our default grid system.
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid" style="--bs-columns: 3;">
+<div class="grid text-center" style="--bs-columns: 3;">
   <div>
     First auto-column
     <div class="grid">
@@ -186,7 +188,7 @@ These CSS variables have no default value; instead, they apply fallback values t
 Immediate children elements of `.grid` are grid items, so they'll be sized without explicitly adding a `.g-col` class.
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid" style="--bs-columns: 3;">
+<div class="grid text-center" style="--bs-columns: 3;">
   <div>Auto-column</div>
   <div>Auto-column</div>
   <div>Auto-column</div>
@@ -198,14 +200,14 @@ Immediate children elements of `.grid` are grid items, so they'll be sized witho
 Adjust the number of columns and the gap.
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid" style="--bs-columns: 4; --bs-gap: 5rem;">
+<div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
   <div class="g-col-2">.g-col-2</div>
   <div class="g-col-2">.g-col-2</div>
 </div>
 {{< /example >}}
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid" style="--bs-columns: 10; --bs-gap: 1rem;">
+<div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
   <div class="g-col-6">.g-col-6</div>
   <div class="g-col-4">.g-col-4</div>
 </div>
@@ -216,7 +218,7 @@ Adjust the number of columns and the gap.
 Adding more rows and changing the placement of columns:
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
+<div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
   <div>Auto-column</div>
   <div class="g-start-2" style="grid-row: 2">Auto-column</div>
   <div class="g-start-3" style="grid-row: 3">Auto-column</div>
@@ -228,7 +230,7 @@ Adding more rows and changing the placement of columns:
 Change the vertical gaps only by modifying the `row-gap`. Note that we use `gap` on `.grid`s, but `row-gap` and `column-gap` can be modified as needed.
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid" style="row-gap: 0;">
+<div class="grid text-center" style="row-gap: 0;">
   <div class="g-col-6">.g-col-6</div>
   <div class="g-col-6">.g-col-6</div>
 
@@ -240,7 +242,7 @@ Change the vertical gaps only by modifying the `row-gap`. Note that we use `gap`
 Because of that, you can have different vertical and horizontal `gap`s, which can take a single value (all sides) or a pair of values (vertical and horizontal). This can be applied with an inline style for `gap`, or with our `--bs-gap` CSS variable.
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid" style="--bs-gap: .25rem 1rem;">
+<div class="grid text-center" style="--bs-gap: .25rem 1rem;">
   <div class="g-col-6">.g-col-6</div>
   <div class="g-col-6">.g-col-6</div>
 
@@ -259,7 +261,7 @@ One limitation of the CSS Grid is that our default classes are still generated b
 For example, you can increase the column count and change the gap size, and then size your "columns" with a mix of inline styles and predefined CSS Grid column classes (e.g., `.g-col-4`).
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid" style="--bs-columns: 18; --bs-gap: .5rem;">
+<div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
   <div style="grid-column: span 14;">14 columns</div>
   <div class="g-col-4">.g-col-4</div>
 </div>
diff --git a/site/content/docs/5.1/layout/grid.md b/site/content/docs/5.3/layout/grid.md
index 05fc1bd65..1783410f9 100644
--- a/site/content/docs/5.1/layout/grid.md
+++ b/site/content/docs/5.3/layout/grid.md
@@ -15,7 +15,7 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout
 {{< /callout >}}
 
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row">
     <div class="col">
       Column
@@ -46,13 +46,13 @@ Breaking it down, here's how the grid system comes together:
 
 - **Gutters are also responsive and customizable.** [Gutter classes are available]({{< docsref "/layout/gutters" >}}) across all breakpoints, with all the same sizes as our [margin and padding spacing]({{< docsref "/utilities/spacing" >}}). Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters.
 
-- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#sass) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
+- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#sass-variables) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
 
 Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9).
 
 ## Grid options
 
-Bootstrap's grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follow:
+Bootstrap's grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follows:
 
 - Extra small (xs)
 - Small (sm)
@@ -63,77 +63,79 @@ Bootstrap's grid system can adapt across all six default breakpoints, and any br
 
 As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here's how the grid changes across these breakpoints:
 
-<table class="table mb-4">
-  <thead>
-    <tr>
-      <th scope="col"></th>
-      <th scope="col">
-        xs<br>
-        <span class="fw-normal">&lt;576px</span>
-      </th>
-      <th scope="col">
-        sm<br>
-        <span class="fw-normal">&ge;576px</span>
-      </th>
-      <th scope="col">
-        md<br>
-        <span class="fw-normal">&ge;768px</span>
-      </th>
-      <th scope="col">
-        lg<br>
-        <span class="fw-normal">&ge;992px</span>
-      </th>
-      <th scope="col">
-        xl<br>
-        <span class="fw-normal">&ge;1200px</span>
-      </th>
-      <th scope="col">
-        xxl<br>
-        <span class="fw-normal">&ge;1400px</span>
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th class="text-nowrap" scope="row">Container <code class="fw-normal">max-width</code></th>
-      <td>None (auto)</td>
-      <td>540px</td>
-      <td>720px</td>
-      <td>960px</td>
-      <td>1140px</td>
-      <td>1320px</td>
-    </tr>
-    <tr>
-      <th class="text-nowrap" scope="row">Class prefix</th>
-      <td><code>.col-</code></td>
-      <td><code>.col-sm-</code></td>
-      <td><code>.col-md-</code></td>
-      <td><code>.col-lg-</code></td>
-      <td><code>.col-xl-</code></td>
-      <td><code>.col-xxl-</code></td>
-    </tr>
-    <tr>
-      <th class="text-nowrap" scope="row"># of columns</th>
-      <td colspan="6">12</td>
-    </tr>
-    <tr>
-      <th class="text-nowrap" scope="row">Gutter width</th>
-      <td colspan="6">1.5rem (.75rem on left and right)</td>
-    </tr>
-    <tr>
-      <th class="text-nowrap" scope="row">Custom gutters</th>
-      <td colspan="6"><a href="{{< docsref "/layout/gutters" >}}">Yes</a></td>
-    </tr>
-    <tr>
-      <th class="text-nowrap" scope="row">Nestable</th>
-      <td colspan="6"><a href="#nesting">Yes</a></td>
-    </tr>
-    <tr>
-      <th class="text-nowrap" scope="row">Column ordering</th>
-      <td colspan="6"><a href="{{< docsref "/layout/columns#reordering" >}}">Yes</a></td>
-    </tr>
-  </tbody>
-</table>
+<div class="table-responsive">
+  <table class="table mb-4">
+    <thead>
+      <tr>
+        <th scope="col"></th>
+        <th scope="col">
+          xs<br>
+          <span class="fw-normal">&lt;576px</span>
+        </th>
+        <th scope="col">
+          sm<br>
+          <span class="fw-normal">&ge;576px</span>
+        </th>
+        <th scope="col">
+          md<br>
+          <span class="fw-normal">&ge;768px</span>
+        </th>
+        <th scope="col">
+          lg<br>
+          <span class="fw-normal">&ge;992px</span>
+        </th>
+        <th scope="col">
+          xl<br>
+          <span class="fw-normal">&ge;1200px</span>
+        </th>
+        <th scope="col">
+          xxl<br>
+          <span class="fw-normal">&ge;1400px</span>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th class="text-nowrap" scope="row">Container <code class="fw-normal">max-width</code></th>
+        <td>None (auto)</td>
+        <td>540px</td>
+        <td>720px</td>
+        <td>960px</td>
+        <td>1140px</td>
+        <td>1320px</td>
+      </tr>
+      <tr>
+        <th class="text-nowrap" scope="row">Class prefix</th>
+        <td><code>.col-</code></td>
+        <td><code>.col-sm-</code></td>
+        <td><code>.col-md-</code></td>
+        <td><code>.col-lg-</code></td>
+        <td><code>.col-xl-</code></td>
+        <td><code>.col-xxl-</code></td>
+      </tr>
+      <tr>
+        <th class="text-nowrap" scope="row"># of columns</th>
+        <td colspan="6">12</td>
+      </tr>
+      <tr>
+        <th class="text-nowrap" scope="row">Gutter width</th>
+        <td colspan="6">1.5rem (.75rem on left and right)</td>
+      </tr>
+      <tr>
+        <th class="text-nowrap" scope="row">Custom gutters</th>
+        <td colspan="6"><a href="{{< docsref "/layout/gutters" >}}">Yes</a></td>
+      </tr>
+      <tr>
+        <th class="text-nowrap" scope="row">Nestable</th>
+        <td colspan="6"><a href="#nesting">Yes</a></td>
+      </tr>
+      <tr>
+        <th class="text-nowrap" scope="row">Column ordering</th>
+        <td colspan="6"><a href="{{< docsref "/layout/columns#reordering" >}}">Yes</a></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 
 ## Auto-layout columns
 
@@ -144,7 +146,7 @@ Utilize breakpoint-specific column classes for easy column sizing without an exp
 For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xxl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
 
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row">
     <div class="col">
       1 of 2
@@ -172,7 +174,7 @@ For example, here are two grid layouts that apply to every device and viewport,
 Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
 
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row">
     <div class="col">
       1 of 3
@@ -203,7 +205,7 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
 Use `col-{breakpoint}-auto` classes to size columns based on the natural width of their content.
 
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row justify-content-md-center">
     <div class="col col-lg-2">
       1 of 3
@@ -238,7 +240,7 @@ Bootstrap's grid includes six tiers of predefined classes for building complex r
 For grids that are the same from the smallest of devices to the largest, use the `.col` and `.col-*` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to `.col`.
 
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row">
     <div class="col">col</div>
     <div class="col">col</div>
@@ -257,7 +259,7 @@ For grids that are the same from the smallest of devices to the largest, use the
 Using a single set of `.col-sm-*` classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (`sm`).
 
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row">
     <div class="col-sm-8">col-sm-8</div>
     <div class="col-sm-4">col-sm-4</div>
@@ -275,7 +277,7 @@ Using a single set of `.col-sm-*` classes, you can create a basic grid system th
 Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
 
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <!-- Stack the columns on mobile by making one full-width and the other half-width -->
   <div class="row">
     <div class="col-md-8">.col-md-8</div>
@@ -304,7 +306,7 @@ Use the responsive `.row-cols-*` classes to quickly set the number of columns th
 Use these row columns classes to quickly create basic grid layouts or to control your card layouts.
 
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row row-cols-2">
     <div class="col">Column</div>
     <div class="col">Column</div>
@@ -315,7 +317,7 @@ Use these row columns classes to quickly create basic grid layouts or to control
 {{< /example >}}
 
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row row-cols-3">
     <div class="col">Column</div>
     <div class="col">Column</div>
@@ -326,7 +328,7 @@ Use these row columns classes to quickly create basic grid layouts or to control
 {{< /example >}}
 
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row row-cols-auto">
     <div class="col">Column</div>
     <div class="col">Column</div>
@@ -337,7 +339,7 @@ Use these row columns classes to quickly create basic grid layouts or to control
 {{< /example >}}
 
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row row-cols-4">
     <div class="col">Column</div>
     <div class="col">Column</div>
@@ -348,7 +350,7 @@ Use these row columns classes to quickly create basic grid layouts or to control
 {{< /example >}}
 
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row row-cols-4">
     <div class="col">Column</div>
     <div class="col">Column</div>
@@ -359,7 +361,7 @@ Use these row columns classes to quickly create basic grid layouts or to control
 {{< /example >}}
 
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
     <div class="col">Column</div>
     <div class="col">Column</div>
@@ -388,7 +390,7 @@ You can also use the accompanying Sass mixin, `row-cols()`:
 To nest your content with the default grid, add a new `.row` and set of `.col-sm-*` columns within an existing `.col-sm-*` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
 
 {{< example class="bd-example-row" >}}
-<div class="container">
+<div class="container text-center">
   <div class="row">
     <div class="col-sm-3">
       Level 1: .col-sm-3
@@ -407,24 +409,25 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
 </div>
 {{< /example >}}
 
-## Sass
+## CSS
 
 When using Bootstrap's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
 
-### Variables
+### Sass variables
 
 Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
 
 ```scss
 $grid-columns:      12;
 $grid-gutter-width: 1.5rem;
+$grid-row-columns:  6;
 ```
 
 {{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
 
 {{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}}
 
-### Mixins
+### Sass mixins
 
 Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
 
@@ -497,11 +500,12 @@ Using our built-in grid Sass variables and maps, it's possible to completely cus
 
 ### Columns and gutters
 
-The number of grid columns can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` sets the width for the column gutters.
+The number of grid columns can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` sets the width for the column gutters. `$grid-row-columns` is used to set the maximum number of columns of `.row-cols-*`, any number over this limit is ignored.
 
 ```scss
 $grid-columns: 12 !default;
 $grid-gutter-width: 1.5rem !default;
+$grid-row-columns: 6 !default;
 ```
 
 ### Grid tiers
@@ -523,4 +527,4 @@ $container-max-widths: (
 );
 ```
 
-When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in `px` (not `rem`, `em`, or `%`).
+When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will output a brand-new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in `px` (not `rem`, `em`, or `%`).
diff --git a/site/content/docs/5.1/layout/gutters.md b/site/content/docs/5.3/layout/gutters.md
index 87d2731a4..0cb35a95c 100644
--- a/site/content/docs/5.1/layout/gutters.md
+++ b/site/content/docs/5.3/layout/gutters.md
@@ -18,14 +18,14 @@ toc: true
 
 `.gx-*` classes can be used to control the horizontal gutter widths. The `.container` or `.container-fluid` parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we've increased the padding with `.px-4`:
 
-{{< example >}}
-<div class="container px-4">
+{{< example class="bd-example-cols" >}}
+<div class="container px-4 text-center">
   <div class="row gx-5">
     <div class="col">
-     <div class="p-3 border bg-light">Custom column padding</div>
+     <div class="p-3">Custom column padding</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
   </div>
 </div>
@@ -33,14 +33,14 @@ toc: true
 
 An alternative solution is to add a wrapper around the `.row` with the `.overflow-hidden` class:
 
-{{< example >}}
-<div class="container overflow-hidden">
+{{< example class="bd-example-cols" >}}
+<div class="container overflow-hidden text-center">
   <div class="row gx-5">
     <div class="col">
-     <div class="p-3 border bg-light">Custom column padding</div>
+     <div class="p-3">Custom column padding</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
   </div>
 </div>
@@ -48,22 +48,22 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
 
 ## Vertical gutters
 
-`.gy-*` classes can be used to control the vertical gutter widths. Like the horizontal gutters, the vertical gutters can cause some overflow below the `.row` at the end of a page. If this occurs, you add a wrapper around `.row` with the `.overflow-hidden` class:
+`.gy-*` classes can be used to control the vertical gutter widths within a row when columns wrap to new lines. Like the horizontal gutters, the vertical gutters can cause some overflow below the `.row` at the end of a page. If this occurs, you add a wrapper around `.row` with the `.overflow-hidden` class:
 
-{{< example >}}
-<div class="container overflow-hidden">
+{{< example class="bd-example-cols" >}}
+<div class="container overflow-hidden text-center">
   <div class="row gy-5">
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
   </div>
 </div>
@@ -71,22 +71,22 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
 
 ## Horizontal & vertical gutters
 
-`.g-*` classes can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won't be a need to add the `.overflow-hidden` wrapper class.
+Use `.g-*` classes to control the horizontal and vertical grid gutters. In the example below, we use a smaller gutter width, so there isn't a need for the `.overflow-hidden` wrapper class.
 
-{{< example >}}
-<div class="container">
+{{< example class="bd-example-cols" >}}
+<div class="container text-center">
   <div class="row g-2">
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
   </div>
 </div>
@@ -96,38 +96,38 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
 
 Gutter classes can also be added to [row columns]({{< docsref "/layout/grid#row-columns" >}}). In the following example, we use responsive row columns and responsive gutter classes.
 
-{{< example >}}
-<div class="container">
+{{< example class="bd-example-cols" >}}
+<div class="container text-center">
   <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
   </div>
 </div>
@@ -137,12 +137,12 @@ Gutter classes can also be added to [row columns]({{< docsref "/layout/grid#row-
 
 The gutters between columns in our predefined grid classes can be removed with `.g-0`. This removes the negative `margin`s from `.row` and the horizontal `padding` from all immediate children columns.
 
-**Need an edge-to-edge design?** Drop the parent `.container` or `.container-fluid`.
+**Need an edge-to-edge design?** Drop the parent `.container` or `.container-fluid` and add `.mx-0` to the `.row` to prevent overflow.
 
-In practice, here's how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).
+In practice, here's how it looks. Note that you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).
 
 {{< example class="bd-example-row" >}}
-<div class="row g-0">
+<div class="row g-0 text-center">
   <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
   <div class="col-6 col-md-4">.col-6 .col-md-4</div>
 </div>
diff --git a/site/content/docs/5.1/layout/utilities.md b/site/content/docs/5.3/layout/utilities.md
index 009d2416d..009d2416d 100644
--- a/site/content/docs/5.1/layout/utilities.md
+++ b/site/content/docs/5.3/layout/utilities.md
diff --git a/site/content/docs/5.1/layout/z-index.md b/site/content/docs/5.3/layout/z-index.md
index 1870d05d2..1870d05d2 100644
--- a/site/content/docs/5.1/layout/z-index.md
+++ b/site/content/docs/5.3/layout/z-index.md
diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
new file mode 100644
index 000000000..9fbe4a377
--- /dev/null
+++ b/site/content/docs/5.3/migration.md
@@ -0,0 +1,738 @@
+---
+layout: docs
+title: Migrating to v5
+description: Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5.
+group: migration
+aliases: "/migration/"
+toc: true
+---
+
+## v5.3.0
+
+If you're migrating from our previous alpha releases of v5.3.0, please review their changes in addition to this section.
+
+### Helpers
+
+- [Colored links]({{< docsref "/helpers/colored-links" >}}) once again have `!important` so they work better with our newly added link utilities.
+
+### Utilities
+
+- Added new `.d-inline-grid` [display utility]({{< docsref "/utilities/display" >}}).
+
+## v5.3.0-alpha2
+
+If you're migrating from our previous alpha release of v5.3.0, please review the changes listed below.
+
+### CSS variables
+
+- Removed several duplicate and unused root CSS variables.
+
+### Color modes
+
+- Dark mode colors are now derived from our theme colors (e.g., `$primary`) in Sass, rather than color specific tints or shades (e.g., `$blue-300`). This allows for a more automated dark mode when customizing the default theme colors.
+
+- Added Sass maps for generating theme colors for dark mode text, subtle background, and subtle border.
+
+- [Snippet examples]({{< docsref "/examples#snippets" >}}) are now ready for dark mode with updated markup and reduced custom styles.
+
+- Added `color-scheme: dark` to dark mode CSS to change OS level controls like scrollbars
+
+- Form validation `border-color` and text `color` states now respond to dark mode, thanks to new Sass and CSS variables.
+
+- Dropped recently added form control background CSS variables and reassigned the Sass variables to use CSS variables instead. This simplifies the styling across color modes and avoids an issue where form controls in dark mode wouldn't update properly.
+
+- Our `box-shadow`s will once again always stay dark instead of inverting to white when in dark mode.
+
+- Improved HTML and JavaScript for our color mode toggle script. The selector for changing the active SVG has been improved, and the markup made more accessible with ARIA attributes.
+
+- Improved docs code syntax colors and more across light and dark modes.
+
+### Typography
+
+- We no longer set a color for `$headings-color-dark` or `--bs-heading-color` for dark mode. To avoid several problems of headings within components appearing the wrong color, we've set the Sass variable to `null` and added a `null` check like we use on the default light mode.
+
+### Components
+
+- Cards now have a `color` set on them to improve rendering across color modes.
+
+- Added new `.nav-underline` variant for our navigation with a simpler bottom border under the active nav link. [See the docs for an example.]({{< docsref "/components/navs-tabs#underline" >}})
+
+- Navs now have new `:focus-visible` styles that better match our custom button focus styles.
+
+### Helpers
+
+- Added new `.icon-link` helper to quickly place and align Bootstrap Icons alongside a textual link. Icon links support our new link utilities, too.
+
+- Added new focus ring helper for removing the default `outline` and setting a custom `box-shadow` focus ring.
+
+### Utilities
+
+- Renamed Sass and CSS variables `${color}-text` to `${color}-text-emphasis` to match their associated utilities.
+
+- Added new `.link-body-emphasis` helper alongside our [colored links]({{< docsref "/helpers/colored-links" >}}). This creates a colored link using our color mode responsive emphasis color.
+
+- Added new link utilities for link color opacity, underline offset, underline color, and underline opacity. [Explore the new links utilities.]({{< docsref "/utilities/link" >}})
+
+- CSS variable based `border-width` utilities have been reverted to set their property directly (as was done prior to v5.2.0). This avoids inheritance issues across nested elements, including tables.
+
+- Added new `.border-black` utility to match our `.text-black` and `.bg-black` utilities.
+
+- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> Deprecated the `.text-muted` utility and `$text-muted` Sass variable. It's been replaced by `.text-body-secondary` and `$body-secondary-color`.
+
+### Docs
+
+- Examples are now displayed with the appropriate light or dark color mode as dictated by the setting in our docs. Each example has an individual color mode picker.
+
+- Improved included JavaScript for live Toast demo.
+
+- Added `twbs/examples` repo contents to the top of the Examples page.
+
+### Tooling
+
+- Added SCSS testing via True to help test our utilities API and other customizations.
+
+- Replaced instances of our bootstrap-npm-starter project with the newer and more complete [twbs/examples repo](https://github.com/twbs/examples).
+
+<hr class="mb-4">
+
+For a complete list of changes, [see the v5.3.0-alpha2 project on GitHub](https://github.com/orgs/twbs/projects/13).
+
+## v5.3.0-alpha1
+
+<hr class="mb-4">
+
+### Color modes!
+
+Learn more by reading the new [color modes documentation]({{< docsref "/customize/color-modes" >}}).
+
+- **Global support for light (default) and dark color modes.** Set color mode globally on the `:root` element, on groups of elements and components with a wrapper class, or directly on components, with `data-bs-theme="light|dark"`. Also included is a new `color-mode()` mixin that can output a ruleset with the `data-bs-theme` selector or a media query, depending on your preference.
+
+  <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> Color modes replace dark variants for components, so  `.btn-close-white`, `.carousel-dark`, `.dropdown-menu-dark`, and `.navbar-dark` are deprecated.
+
+- **New extended color system.** We've added new theme colors (but not in `$theme-colors`) for a more nuanced, system-wide color palette with new secondary, tertiary, and emphasis colors for `color` and `background-color`. These new colors are available as Sass variables, CSS variables, and utilities.
+
+- We've also expanded our theme color Sass variables, CSS variables, and utilities to include text emphasis, subtle background colors, and subtle border colors. These are available as Sass variables, CSS variables, and utilities.
+
+- Adds new `_variables-dark.scss` stylesheet to house dark-mode specific overrides. This stylesheet should be imported immediately after the existing `_variables.scss` file in your import stack.
+
+  ```diff
+  diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
+  index 8f8296def..449d70487 100644
+  --- a/scss/bootstrap.scss
+  +++ b/scss/bootstrap.scss
+  @@ -6,6 +6,7 @@
+   // Configuration
+   @import "functions";
+   @import "variables";
+  +@import "variables-dark";
+   @import "maps";
+   @import "mixins";
+   @import "utilities";
+  ```
+
+### CSS variables
+
+- Restores CSS variables for breakpoints, though we don't use them in our media queries as they're not supported. However, these can be useful in JS-specific contexts.
+
+- Per the color modes update, we've added new utilities for new Sass CSS variables `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps) with the express goal of making it easier to customize across multiple colors modes like light and dark.
+
+- Adds additional variables for alerts, `.btn-close`, and `.offcanvas`.
+
+- The `--bs-heading-color` variable is back with an update and dark mode support. First, we now check for a `null` value on the associated Sass variable, `$headings-color`, before trying to output the CSS variable, so by default it's not present in our compiled CSS. Second, we use the CSS variable with a fallback value, `inherit`, allowing the original behavior to persist, but also allowing for overrides.
+
+- Converts links to use CSS variables for styling `color`, but not `text-decoration`. Colors are now set with `--bs-link-color-rgb` and `--bs-link-opacity` as `rgba()` color, allowing you to customize the translucency with ease. The `a:hover` pseudo-class now overrides `--bs-link-color-rgb` instead of explicitly setting the `color` property.
+
+- `--bs-border-width` is now being used in more components for greater control over default global styling.
+
+- Adds new root CSS variables for our `box-shadow`s, including `--bs-box-shadow`, `--bs-box-shadow-sm`, `--bs-box-shadow-lg`, and `--bs-box-shadow-inset`.
+
+### Components
+
+#### Alert
+
+- Alert variants are now styled via CSS variables.
+
+- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `alert-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/alerts#sass-loops" >}}) directly to modify the component's default CSS variables for each variant.
+
+#### List group
+
+- List group item variants are now styled via CSS variables.
+
+- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `list-group-item-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/list-group#sass-loops" >}}) directly to modify the component's default CSS variables for each variant.
+
+#### Dropdowns
+
+- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.dropdown-menu-dark` class has been deprecated and replaced with `data-bs-theme="dark"` on the dropdown or any parent element. [See the docs for an example.]({{< docsref "/components/dropdowns#dark-dropdowns" >}})
+
+#### Close button
+
+- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.btn-close-white` class has been deprecated and replaced with `data-bs-theme="dark"` on the close button or any parent element. [See the docs for an example.]({{< docsref "/components/close-button#dark-variant" >}})
+
+#### Navbar
+
+- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.navbar-dark` class has been deprecated and replaced with `data-bs-theme="dark"` on the navbar or any parent element. [See the docs for updated examples.]({{< docsref "/components/navbar#color-schemes" >}})
+
+### Progress bars
+
+The markup for [progress bars]({{< docsref "/components/progress" >}}) has been updated in v5.3.0. Due to the placement of `role` and various `aria-` attributes on the inner `.progress-bar` element, **some screen readers were not announcing zero value progress bars**. Now, `role="progressbar"` and the relevant `aria-*` attributes are on the outer `.progress` element, leaving the `.progress-bar` purely for the visual presentation of the bar and optional label.
+
+While we recommend adopting the new markup for improved compatibility with all screen readers, note that the legacy progress bar structure will continue to work as before.
+
+```html
+<!-- Previous markup -->
+<div class="progress">
+  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<!-- New markup -->
+<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar" style="width: 25%"></div>
+</div>
+```
+
+We've also introduced a new `.progress-stacked` class to more logically wrap [multiple progress bars]({{< docsref "/components/progress#multiple-bars" >}}) into a single stacked progress bar.
+
+```html
+<!-- Previous markup -->
+<div class="progress">
+  <div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
+  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<!-- New markup -->
+<div class="progress-stacked">
+  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
+    <div class="progress-bar"></div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
+    <div class="progress-bar bg-success"></div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
+    <div class="progress-bar bg-info"></div>
+  </div>
+</div>
+```
+
+### Forms
+
+- `.form-control` is now styled with CSS variables to support color modes. This includes the addition of two new root CSS variables for the default and disabled form control backgrounds.
+
+- `.form-check` and `.form-switch` components are now built with CSS variables for setting the `background-image`. The usage here differs from other components in that the various focus, active, etc states for each component aren't set on the base class. Instead, the states override one variable (e.g., `--bs-form-switch-bg`).
+
+- Floating form labels now have a `background-color` to fix support for `<textarea>` elements. Additional changes have been made to also support disabled states and more.
+
+- Fixed display of date and time inputs in WebKit based browsers.
+
+### Utilities
+
+- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> `.text-muted` will be replaced by `.text-body-secondary` in v6.
+
+  With the addition of the expanded theme colors and variables, the `.text-muted` variables and utility have been deprecated with v5.3.0. Its default value has also been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
+
+- Adds new `.overflow-x`, `.overflow-y`, and several `.object-fit-*` utilities. _The object-fit property is used to specify how an `<img>` or `<video>` should be resized to fit its container, giving us a responsive alternative to using `background-image` for a resizable fill/fit image._
+
+- Adds new `.fw-medium` utility.
+
+- Added new [`.z-*` utilities]({{< docsref "/utilities/z-index" >}}) for `z-index`.
+
+- [Box shadow utilities]({{< docsref "/utilities/shadows" >}}) (and Sass variables) have been updated for dark mode. They now use `--bs-body-color-rgb` to generate the `rgba()` color values, allowing them to easily adapt to color modes based on the specified foreground color.
+
+For a complete list of changes, [see the v5.3.0 project on GitHub](https://github.com/twbs/bootstrap/projects/).
+
+## v5.2.0
+
+<hr class="mb-4">
+
+### Refreshed design
+
+Bootstrap v5.2.0 features a subtle design update for a handful of components and properties across the project, **most notably through refined `border-radius` values on buttons and form controls**. Our documentation also has been updated with a new homepage, simpler docs layout that no longer collapses sections of the sidebar, and more prominent examples of [Bootstrap Icons](https://icons.getbootstrap.com).
+
+### More CSS variables
+
+**We've updated all our components to use CSS variables.** While Sass still underpins everything, each component has been updated to include CSS variables on the component base classes (e.g., `.btn`), allowing for more real-time customization of Bootstrap. In subsequent releases, we'll continue to expand our use of CSS variables into our layout, forms, helpers, and utilities. Read more about CSS variables in each component on their respective documentation pages.
+
+Our CSS variable usage will be somewhat incomplete until Bootstrap 6. While we'd love to fully implement these across the board, they do run the risk of causing breaking changes. For example, setting `$alert-border-width: var(--bs-border-width)` in our source code breaks potential Sass in your own code if you were doing `$alert-border-width * 2` for some reason.
+
+As such, wherever possible, we will continue to push towards more CSS variables, but please recognize our implementation may be slightly limited in v5.
+
+### New `_maps.scss`
+
+**Bootstrap v5.2.0 introduced a new Sass file with `_maps.scss`.** It pulls out several Sass maps from `_variables.scss` to fix an issue where updates to an original map were not applied to secondary maps that extend them. For example, updates to `$theme-colors` were not being applied to other theme maps that relied on `$theme-colors`, breaking key customization workflows. In short, Sass has a limitation where once a default variable or map has been _used_, it cannot be updated. _There's a similar shortcoming with CSS variables when they're used to compose other CSS variables._
+
+This is why variable customizations in Bootstrap have to come after `@import "functions"`, but before `@import "variables"` and the rest of our import stack. The same applies to Sass maps—you must override the defaults before they get used. The following maps have been moved to the new `_maps.scss`:
+
+- `$theme-colors-rgb`
+- `$utilities-colors`
+- `$utilities-text`
+- `$utilities-text-colors`
+- `$utilities-bg`
+- `$utilities-bg-colors`
+- `$negative-spacers`
+- `$gutters`
+
+Your custom Bootstrap CSS builds should now look something like this with a separate maps import.
+
+```diff
+  // Functions come first
+  @import "functions";
+
+  // Optional variable overrides here
++ $custom-color: #df711b;
++ $custom-theme-colors: (
++   "custom": $custom-color
++ );
+
+  // Variables come next
+  @import "variables";
+
++ // Optional Sass map overrides here
++ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
++
++ // Followed by our default maps
++ @import "maps";
++
+  // Rest of our imports
+  @import "mixins";
+  @import "utilities";
+  @import "root";
+  @import "reboot";
+  // etc
+```
+
+### New utilities
+
+- Expanded [`font-weight` utilities]({{< docsref "/utilities/text#font-weight-and-italics" >}}) to include `.fw-semibold` for semibold fonts.
+- Expanded [`border-radius` utilities]({{< docsref "/utilities/borders#sizes" >}}) to include two new sizes, `.rounded-4` and `.rounded-5`, for more options.
+
+### Additional changes
+
+- **Introduced new `$enable-container-classes` option. —** Now when opting into the experimental CSS Grid layout, `.container-*` classes will still be compiled, unless this option is set to `false`. Containers also now keep their gutter values.
+
+- **Offcanvas component now has [responsive variations]({{< docsref "/components/offcanvas#responsive" >}}).** The original `.offcanvas` class remains unchanged—it hides content across all viewports. To make it responsive, change that `.offcanvas` class to any `.offcanvas-{sm|md|lg|xl|xxl}` class.
+
+- **Thicker table dividers are now opt-in. —** We've removed the thicker and more difficult to override border between table groups and moved it to an optional class you can apply, `.table-group-divider`. [See the table docs for an example.]({{< docsref "/content/tables#table-group-dividers" >}})
+
+- **[Scrollspy has been rewritten](https://github.com/twbs/bootstrap/pull/33421) to use the Intersection Observer API**, which means you no longer need relative parent wrappers, deprecates `offset` config, and more. Look for your Scrollspy implementations to be more accurate and consistent in their nav highlighting.
+
+- **Popovers and tooltips now use CSS variables.** Some CSS variables have been updated from their Sass counterparts to reduce the number of variables. As a result, three variables have been deprecated in this release: `$popover-arrow-color`, `$popover-arrow-outer-color`, and `$tooltip-arrow-color`.
+
+- **Added new `.text-bg-{color}` helpers.** Instead of setting individual `.text-*` and `.bg-*` utilities, you can now use [the `.text-bg-*` helpers]({{< docsref "helpers/color-background" >}}) to set a `background-color` with contrasting foreground `color`.
+
+- Added `.form-check-reverse` modifier to flip the order of labels and associated checkboxes/radios.
+
+- Added [striped columns]({{< docsref "/content/tables#striped-columns" >}}) support to tables via the new `.table-striped-columns` class.
+
+For a complete list of changes, [see the v5.2.0 project on GitHub](https://github.com/twbs/bootstrap/projects/32).
+
+## v5.1.0
+
+<hr class="mb-4">
+
+- **Added experimental support for [CSS Grid layout]({{< docsref "/layout/css-grid" >}}). —** This is a work in progress, and is not yet ready for production use, but you can opt into the new feature via Sass. To enable it, disable the default grid, by setting `$enable-grid-classes: false` and enable the CSS Grid by setting `$enable-cssgrid: true`.
+
+- **Updated navbars to support offcanvas. —** Add [offcanvas drawers in any navbar]({{< docsref "/components/navbar#offcanvas" >}}) with the responsive `.navbar-expand-*` classes and some offcanvas markup.
+
+- **Added new [placeholder component]({{< docsref "/components/placeholders/" >}}). —** Our newest component, a way to provide temporary blocks in lieu of real content to help indicate that something is still loading in your site or app.
+
+- **Collapse plugin now supports [horizontal collapsing]({{< docsref "/components/collapse#horizontal" >}}). —** Add `.collapse-horizontal` to your `.collapse` to collapse the `width` instead of the `height`. Avoid browser repainting by setting a `min-height` or `height`.
+
+- **Added new stack and vertical rule helpers. —** Quickly apply multiple flexbox properties to quickly create custom layouts with [stacks]({{< docsref "/helpers/stacks/" >}}). Choose from horizontal (`.hstack`) and vertical (`.vstack`) stacks. Add vertical dividers similar to `<hr>` elements with the [new `.vr` helpers]({{< docsref "/helpers/vertical-rule/" >}}).
+
+- **Added new global `:root` CSS variables. —** Added several new CSS variables to the `:root` level for controlling `<body>` styles. More are in the works, including across our utilities and components, but for now read up [CSS variables in the Customize section]({{< docsref "/customize/css-variables/" >}}).
+
+- **Overhauled color and background utilities to use CSS variables, and added new [text opacity]({{< docsref "/utilities/text#opacity" >}}) and [background opacity]({{< docsref "/utilities/background#opacity" >}}) utilities. —** `.text-*` and `.bg-*` utilities are now built with CSS variables and `rgba()` color values, allowing you to easily customize any utility with new opacity utilities.
+
+- **Added new snippet examples based to show how to customize our components. —** Pull ready to use customized components and other common design patterns with our new [Snippets examples]({{< docsref "/examples#snippets" >}}). Includes [footers]({{< docsref "/examples/footers/" >}}), [dropdowns]({{< docsref "/examples/dropdowns/" >}}), [list groups]({{< docsref "/examples/list-groups/" >}}), and [modals]({{< docsref "/examples/modals/" >}}).
+
+- **Removed unused positioning styles from popovers and tooltips** as these are handled solely by Popper. `$tooltip-margin` has been deprecated and set to `null` in the process.
+
+Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.com/2021/08/04/bootstrap-5-1-0/)
+
+## v5.0.0
+
+<hr class="mb-4">
+
+{{< callout info >}}
+**Hey there!** Changes to our first major release of Bootstrap 5, v5.0.0, are documented below. They don't reflect the additional changes shown above.
+{{< /callout >}}
+
+### Dependencies
+
+- Dropped jQuery.
+- Upgraded from Popper v1.x to Popper v2.x.
+- Replaced Libsass with Dart Sass as our Sass compiler given Libsass was deprecated.
+- Migrated from Jekyll to Hugo for building our documentation
+
+### Browser support
+
+- Dropped Internet Explorer 10 and 11
+- Dropped Microsoft Edge < 16 (Legacy Edge)
+- Dropped Firefox < 60
+- Dropped Safari < 12
+- Dropped iOS Safari < 12
+- Dropped Chrome < 60
+
+<hr class="my-5">
+
+### Documentation changes
+
+- Redesigned homepage, docs layout, and footer.
+- Added [new Parcel guide]({{< docsref "/getting-started/parcel" >}}).
+- Added [new Customize section]({{< docsref "/customize/overview" >}}), replacing [v4's Theming page](https://getbootstrap.com/docs/4.6/getting-started/theming/), with new details on Sass, global configuration options, color schemes, CSS variables, and more.
+- Reorganized all form documentation into [new Forms section]({{< docsref "/forms/overview" >}}), breaking apart the content into more focused pages.
+- Similarly, updated [the Layout section]({{< docsref "/layout/breakpoints" >}}), to flesh out grid content more clearly.
+- Renamed "Navs" component page to "Navs & Tabs".
+- Renamed "Checks" page to "Checks & radios".
+- Redesigned the navbar and added a new subnav to make it easier to get around our sites and docs versions.
+- Added new keyboard shortcut for the search field: <kbd><kbd>Ctrl</kbd> + <kbd>/</kbd></kbd>.
+
+### Sass
+
+- We've ditched the default Sass map merges to make it easier to remove redundant values. Keep in mind you now have to define all values in the Sass maps like `$theme-colors`. Check out how to deal with [Sass maps]({{< docsref "/customize/sass#maps-and-loops" >}}).
+
+- <span class="badge text-bg-danger">Breaking</span> Renamed `color-yiq()` function and related variables to `color-contrast()` as it's no longer related to YIQ color space. [See #30168.](https://github.com/twbs/bootstrap/pull/30168/)
+  - `$yiq-contrasted-threshold` is renamed to `$min-contrast-ratio`.
+  - `$yiq-text-dark` and `$yiq-text-light` are respectively renamed to `$color-contrast-dark` and `$color-contrast-light`.
+
+- <span class="badge text-bg-danger">Breaking</span> Media query mixins parameters have changed for a more logical approach.
+  - `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint (e.g., `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` targets viewports smaller than `lg`).
+  - Similarly, the second parameter in `media-breakpoint-between()` also uses the breakpoint itself instead of the next breakpoint (e.g., `media-breakpoint-between(sm, lg)` instead of `media-breakpoint-between(sm, md)` targets viewports between `sm` and `lg`).
+
+- <span class="badge text-bg-danger">Breaking</span> Removed print styles and `$enable-print-styles` variable. Print display classes are still around. [See #28339](https://github.com/twbs/bootstrap/pull/28339).
+
+- <span class="badge text-bg-danger">Breaking</span> Dropped `color()`, `theme-color()`, and `gray()` functions in favor of variables. [See #29083](https://github.com/twbs/bootstrap/pull/29083).
+
+- <span class="badge text-bg-danger">Breaking</span> Renamed `theme-color-level()` function to `color-level()` and now accepts any color you want instead of only `$theme-color` colors. [See #29083](https://github.com/twbs/bootstrap/pull/29083) **Watch out:** `color-level()` was later on dropped in `v5.0.0-alpha3`.
+
+- <span class="badge text-bg-danger">Breaking</span> Renamed `$enable-prefers-reduced-motion-media-query` and `$enable-pointer-cursor-for-buttons` to `$enable-reduced-motion` and `$enable-button-pointers` for brevity.
+
+- <span class="badge text-bg-danger">Breaking</span> Removed the `bg-gradient-variant()` mixin. Use the `.bg-gradient` class to add gradients to elements instead of the generated `.bg-gradient-*` classes.
+
+- <span class="badge text-bg-danger">Breaking</span> **Removed previously deprecated mixins:**
+  - `hover`, `hover-focus`, `plain-hover-focus`, and `hover-focus-active`
+  - `float()`
+  - `form-control-mixin()`
+  - `nav-divider()`
+  - `retina-img()`
+  - `text-hide()` (also dropped the associated utility class, `.text-hide`)
+  - `visibility()`
+  - `form-control-focus()`
+
+- <span class="badge text-bg-danger">Breaking</span> Renamed `scale-color()` function to `shift-color()` to avoid collision with Sass's own color scaling function.
+
+- `box-shadow` mixins now allow `null` values and drop `none` from multiple arguments. [See #30394](https://github.com/twbs/bootstrap/pull/30394).
+
+- The `border-radius()` mixin now has a default value.
+
+### Color system
+
+- The color system which worked with `color-level()` and `$theme-color-interval` was removed in favor of a new color system. All `lighten()` and `darken()` functions in our codebase are replaced by `tint-color()` and `shade-color()`. These functions will mix the color with either white or black instead of changing its lightness by a fixed amount. The `shift-color()` will either tint or shade a color depending on whether its weight parameter is positive or negative. [See #30622](https://github.com/twbs/bootstrap/pull/30622) for more details.
+
+- Added new tints and shades for every color, providing nine separate colors for each base color, as new Sass variables.
+
+- Improved color contrast. Bumped color contrast ratio from 3:1 to 4.5:1 and updated blue, green, cyan, and pink colors to ensure WCAG 2.2 AA contrast. Also changed our color contrast color from `$gray-900` to `$black`.
+
+- To support our color system, we've added new custom `tint-color()` and `shade-color()` functions to mix our colors appropriately.
+
+### Grid updates
+
+- **New breakpoint!** Added new `xxl` breakpoint for `1400px` and up. No changes to all other breakpoints.
+
+- **Improved gutters.** Gutters are now set in rems, and are narrower than v4 (`1.5rem`, or about `24px`, down from `30px`). This aligns our grid system's gutters with our spacing utilities.
+  - Added new [gutter class]({{< docsref "/layout/gutters" >}}) (`.g-*`, `.gx-*`, and `.gy-*`) to control horizontal/vertical gutters, horizontal gutters, and vertical gutters.
+  - <span class="badge text-bg-danger">Breaking</span> Renamed `.no-gutters` to `.g-0` to match new gutter utilities.
+
+- Columns no longer have `position: relative` applied, so you may have to add `.position-relative` to some elements to restore that behavior.
+
+- <span class="badge text-bg-danger">Breaking</span> Dropped several `.order-*` classes that often went unused. We now only provide `.order-1` to `.order-5` out of the box.
+
+- <span class="badge text-bg-danger">Breaking</span> Dropped the `.media` component as it can be easily replicated with utilities. [See #28265](https://github.com/twbs/bootstrap/pull/28265) and the [flex utilities page for an example]({{< docsref "/utilities/flex#media-object" >}}).
+
+- <span class="badge text-bg-danger">Breaking</span> `bootstrap-grid.css` now only applies `box-sizing: border-box` to the column instead of resetting the global box-sizing. This way, our grid styles can be used in more places without interference.
+
+- `$enable-grid-classes` no longer disables the generation of container classes anymore. [See #29146.](https://github.com/twbs/bootstrap/pull/29146)
+
+- Updated the `make-col` mixin to default to equal columns without a specified size.
+
+### Content, Reboot, etc
+
+- **[RFS]({{< docsref "/getting-started/rfs" >}}) is now enabled by default.** Headings using the `font-size()` mixin will automatically adjust their `font-size` to scale with the viewport. _This feature was previously opt-in with v4._
+
+- <span class="badge text-bg-danger">Breaking</span> Overhauled our display typography to replace our `$display-*` variables and with a `$display-font-sizes` Sass map. Also removed the individual `$display-*-weight` variables for a single `$display-font-weight` and adjusted `font-size`s.
+
+- Added two new `.display-*` heading sizes, `.display-5` and `.display-6`.
+
+- **Links are underlined by default** (not just on hover), unless they're part of specific components.
+
+- **Redesigned tables** to refresh their styles and rebuild them with CSS variables for more control over styling.
+
+- <span class="badge text-bg-danger">Breaking</span> Nested tables do not inherit styles anymore.
+
+- <span class="badge text-bg-danger">Breaking</span> `.thead-light` and `.thead-dark` are dropped in favor of the `.table-*` variant classes which can be used for all table elements (`thead`, `tbody`, `tfoot`, `tr`, `th` and `td`).
+
+- <span class="badge text-bg-danger">Breaking</span> The `table-row-variant()` mixin is renamed to `table-variant()` and accepts only 2 parameters: `$color` (color name) and `$value` (color code). The border color and accent colors are automatically calculated based on the table factor variables.
+
+- Split table cell padding variables into `-y` and `-x`.
+
+- <span class="badge text-bg-danger">Breaking</span> Dropped `.pre-scrollable` class. [See #29135](https://github.com/twbs/bootstrap/pull/29135)
+
+- <span class="badge text-bg-danger">Breaking</span> `.text-*` utilities do not add hover and focus states to links anymore. `.link-*` helper classes can be used instead. [See #29267](https://github.com/twbs/bootstrap/pull/29267)
+
+- <span class="badge text-bg-danger">Breaking</span> Dropped `.text-justify` class. [See #29793](https://github.com/twbs/bootstrap/pull/29793)
+
+- <span class="badge text-bg-danger">Breaking</span> ~~`<hr>` elements now use `height` instead of `border` to better support the `size` attribute. This also enables use of padding utilities to create thicker dividers (e.g., `<hr class="py-1">`).~~
+
+- Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`.
+
+- Added `$enable-smooth-scroll`, which applies `scroll-behavior: smooth` globally—except for users asking for reduced motion through `prefers-reduced-motion` media query. [See #31877](https://github.com/twbs/bootstrap/pull/31877)
+
+### RTL
+
+- Horizontal direction specific variables, utilities, and mixins have all been renamed to use logical properties like those found in flexbox layouts—e.g., `start` and `end` in lieu of `left` and `right`.
+
+### Forms
+
+- **Added new floating forms!** We've promoted the Floating labels example to fully supported form components. [See the new Floating labels page.]({{< docsref "/forms/floating-labels" >}})
+
+- <span class="badge text-bg-danger">Breaking</span> **Consolidated native and custom form elements.** Checkboxes, radios, selects, and other inputs that had native and custom classes in v4 have been consolidated. Now nearly all our form elements are entirely custom, most without the need for custom HTML.
+  - `.custom-control.custom-checkbox` is now `.form-check`.
+  - `.custom-control.custom-radio` is now `.form-check`.
+  - `.custom-control.custom-switch` is now `.form-check.form-switch`.
+  - `.custom-select` is now `.form-select`.
+  - `.custom-file` and `.form-control-file` have been replaced by custom styles on top of `.form-control`.
+  - `.custom-range` is now `.form-range`.
+  - Dropped native `.form-control-file` and `.form-control-range`.
+
+- <span class="badge text-bg-danger">Breaking</span> Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups.
+
+- The longstanding [Missing border radius on input group with validation feedback bug](https://github.com/twbs/bootstrap/issues/25110) is finally fixed by adding an additional `.has-validation` class to input groups with validation.
+
+- <span class="badge text-bg-danger">Breaking</span> **Dropped form-specific layout classes for our grid system.** Use our grid and utilities instead of `.form-group`, `.form-row`, or `.form-inline`.
+
+- <span class="badge text-bg-danger">Breaking</span> Form labels now require `.form-label`.
+
+- <span class="badge text-bg-danger">Breaking</span> `.form-text` no longer sets `display`, allowing you to create inline or block help text as you wish just by changing the HTML element.
+
+- Form controls no longer used fixed `height` when possible, instead deferring to `min-height` to improve customization and compatibility with other components.
+
+- Validation icons are no longer applied to `<select>`s with `multiple`.
+
+- Rearranged source Sass files under `scss/forms/`, including input group styles.
+
+<hr class="my-5">
+
+### Components
+
+- Unified `padding` values for alerts, breadcrumbs, cards, dropdowns, list groups, modals, popovers, and tooltips to be based on our `$spacer` variable. [See #30564](https://github.com/twbs/bootstrap/pull/30564).
+
+#### Accordion
+
+- Added [new accordion component]({{< docsref "/components/accordion" >}}).
+
+#### Alerts
+
+- Alerts now have [examples with icons]({{< docsref "/components/alerts#icons" >}}).
+
+- Removed custom styles for `<hr>`s in each alert since they already use `currentColor`.
+
+#### Badges
+
+- <span class="badge text-bg-danger">Breaking</span> Dropped all `.badge-*` color classes for background utilities (e.g., use `.bg-primary` instead of `.badge-primary`).
+
+- <span class="badge text-bg-danger">Breaking</span> Dropped `.badge-pill`—use the `.rounded-pill` utility instead.
+
+- <span class="badge text-bg-danger">Breaking</span> Removed hover and focus styles for `<a>` and `<button>` elements.
+
+- Increased default padding for badges from `.25em`/`.5em` to `.35em`/`.65em`.
+
+#### Breadcrumbs
+
+- Simplified the default appearance of breadcrumbs by removing `padding`, `background-color`, and `border-radius`.
+
+- Added new CSS custom property `--bs-breadcrumb-divider` for easy customization without needing to recompile CSS.
+
+#### Buttons
+
+- <span class="badge text-bg-danger">Breaking</span> **[Toggle buttons]({{< docsref "/forms/checks-radios#toggle-buttons" >}}), with checkboxes or radios, no longer require JavaScript and have new markup.** We no longer require a wrapping element, add `.btn-check` to the `<input>`, and pair it with any `.btn` classes on the `<label>`. [See #30650](https://github.com/twbs/bootstrap/pull/30650). _The docs for this has moved from our Buttons page to the new Forms section._
+
+- <span class="badge text-bg-danger">Breaking</span> **Dropped `.btn-block` for utilities.** Instead of using `.btn-block` on the `.btn`, wrap your buttons with `.d-grid` and a `.gap-*` utility to space them as needed. Switch to responsive classes for even more control over them. [Read the docs for some examples.]({{< docsref "/components/buttons#block-buttons" >}})
+
+- Updated our `button-variant()` and `button-outline-variant()` mixins to support additional parameters.
+
+- Updated buttons to ensure increased contrast on hover and active states.
+
+- Disabled buttons now have `pointer-events: none;`.
+
+#### Card
+
+- <span class="badge text-bg-danger">Breaking</span> Dropped `.card-deck` in favor of our grid. Wrap your cards in column classes and add a parent `.row-cols-*` container to recreate card decks (but with more control over responsive alignment).
+
+- <span class="badge text-bg-danger">Breaking</span> Dropped `.card-columns` in favor of Masonry. [See #28922](https://github.com/twbs/bootstrap/pull/28922).
+
+- <span class="badge text-bg-danger">Breaking</span> Replaced the `.card` based accordion with a [new Accordion component]({{< docsref "/components/accordion" >}}).
+
+#### Carousel
+
+- Added new [`.carousel-dark` variant]({{< docsref "/components/carousel#dark-variant" >}}) for dark text, controls, and indicators (great for lighter backgrounds).
+
+- Replaced chevron icons for carousel controls with new SVGs from [Bootstrap Icons]({{< param "icons" >}}).
+
+#### Close button
+
+- <span class="badge text-bg-danger">Breaking</span> Renamed `.close` to `.btn-close` for a less generic name.
+
+- Close buttons now use a `background-image` (embedded SVG) instead of a `&times;` in the HTML, allowing for easier customization without the need to touch your markup.
+
+- Added new `.btn-close-white` variant that uses `filter: invert(1)` to enable higher contrast dismiss icons against darker backgrounds.
+
+#### Collapse
+
+- Removed scroll anchoring for accordions.
+
+#### Dropdowns
+
+- Added new `.dropdown-menu-dark` variant and associated variables for on-demand dark dropdowns.
+
+- Added new variable for `$dropdown-padding-x`.
+
+- Darkened the dropdown divider for improved contrast.
+
+- <span class="badge text-bg-danger">Breaking</span> All the events for the dropdown are now triggered on the dropdown toggle button and then bubbled up to the parent element.
+
+- Dropdown menus now have a `data-bs-popper="static"` attribute set when the positioning of the dropdown is static, or dropdown is in the navbar. This is added by our JavaScript and helps us use custom position styles without interfering with Popper's positioning.
+
+- <span class="badge text-bg-danger">Breaking</span> Dropped `flip` option for dropdown plugin in favor of native Popper configuration. You can now disable the flipping behavior by passing an empty array for [`fallbackPlacements`](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) option in [flip](https://popper.js.org/docs/v2/modifiers/flip/) modifier.
+
+- Dropdown menus can now be clickable with a new `autoClose` option to handle the [auto close behavior]({{< docsref "/components/dropdowns#auto-close-behavior" >}}). You can use this option to accept the click inside or outside the dropdown menu to make it interactive.
+
+- Dropdowns now support `.dropdown-item`s wrapped in `<li>`s.
+
+#### Jumbotron
+
+- <span class="badge text-bg-danger">Breaking</span> Dropped the jumbotron component as it can be replicated with utilities. [See our new Jumbotron example for a demo.]({{< docsref "/examples/jumbotron" >}})
+
+#### List group
+
+- Added new [`.list-group-numbered` modifier]({{< docsref "/components/list-group#numbered" >}}) to list groups.
+
+#### Navs and tabs
+
+- Added new `null` variables for `font-size`, `font-weight`, `color`, and `:hover` `color` to the `.nav-link` class.
+
+#### Navbars
+
+- <span class="badge text-bg-danger">Breaking</span> Navbars now require a container within (to drastically simplify spacing requirements and CSS required).
+- <span class="badge text-bg-danger">Breaking</span> The `.active` class can no longer be applied to `.nav-item`s, it must be applied directly on `.nav-link`s.
+
+#### Offcanvas
+
+- Added the new [offcanvas component]({{< docsref "/components/offcanvas" >}}).
+
+#### Pagination
+
+- Pagination links now have customizable `margin-left` that are dynamically rounded on all corners when separated from one another.
+
+- Added `transition`s to pagination links.
+
+#### Popovers
+
+- <span class="badge text-bg-danger">Breaking</span> Renamed `.arrow` to `.popover-arrow` in our default popover template.
+
+- Renamed `whiteList` option to `allowList`.
+
+#### Spinners
+
+- Spinners now honor `prefers-reduced-motion: reduce` by slowing down animations. [See #31882](https://github.com/twbs/bootstrap/pull/31882).
+
+- Improved spinner vertical alignment.
+
+#### Toasts
+
+- Toasts can now be [positioned]({{< docsref "/components/toasts#placement" >}}) in a `.toast-container` with the help of [positioning utilities]({{< docsref "/utilities/position" >}}).
+
+- Changed default toast duration to 5 seconds.
+
+- Removed `overflow: hidden` from toasts and replaced with proper `border-radius`s with `calc()` functions.
+
+#### Tooltips
+
+- <span class="badge text-bg-danger">Breaking</span> Renamed `.arrow` to `.tooltip-arrow` in our default tooltip template.
+
+- <span class="badge text-bg-danger">Breaking</span> The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of popper elements.
+
+- <span class="badge text-bg-danger">Breaking</span> Renamed `whiteList` option to `allowList`.
+
+### Utilities
+
+- <span class="badge text-bg-danger">Breaking</span> Renamed several utilities to use logical property names instead of directional names with the addition of RTL support:
+  - Renamed `.float-left` and `.float-right` to `.float-start` and `.float-end`.
+  - Renamed `.border-left` and `.border-right` to `.border-start` and `.border-end`.
+  - Renamed `.rounded-left` and `.rounded-right` to `.rounded-start` and `.rounded-end`.
+  - Renamed `.ml-*` and `.mr-*` to `.ms-*` and `.me-*`.
+  - Renamed `.pl-*` and `.pr-*` to `.ps-*` and `.pe-*`.
+  - Renamed `.text-*-left` and `.text-*-right` to `.text-*-start` and `.text-*-end`.
+
+- <span class="badge text-bg-danger">Breaking</span> Disabled negative margins by default.
+
+- Added new `.bg-body` class for quickly setting the `<body>`'s background to additional elements.
+
+- Added new [position utilities]({{< docsref "/utilities/position#arrange-elements" >}}) for `top`, `right`, `bottom`, and `left`. Values include `0`, `50%`, and `100%` for each property.
+
+- Added new `.translate-middle-x` & `.translate-middle-y` utilities to horizontally or vertically center absolute/fixed positioned elements.
+
+- Added new [`border-width` utilities]({{< docsref "/utilities/borders#border-width" >}}).
+
+- <span class="badge text-bg-danger">Breaking</span> Renamed `.text-monospace` to `.font-monospace`.
+
+- <span class="badge text-bg-danger">Breaking</span> Removed `.text-hide` as it's an antiquated method for hiding text that shouldn't be used anymore.
+
+- Added `.fs-*` utilities for `font-size` utilities (with RFS enabled). These use the same scale as HTML's default headings (1-6, large to small), and can be modified via Sass map.
+
+- <span class="badge text-bg-danger">Breaking</span> Renamed `.font-weight-*` utilities as `.fw-*` for brevity and consistency.
+
+- <span class="badge text-bg-danger">Breaking</span> Renamed `.font-italic` utility to `.fst-italic` for brevity and consistency with new `.fst-normal` utility.
+
+- Added `.d-grid` to display utilities and new `gap` utilities (`.gap`) for CSS Grid and flexbox layouts.
+
+- <span class="badge text-bg-danger">Breaking</span> Removed `.rounded-sm` and `rounded-lg`, and introduced a new scale of classes, `.rounded-0` to `.rounded-3`. [See #31687](https://github.com/twbs/bootstrap/pull/31687).
+
+- Added new `line-height` utilities: `.lh-1`, `.lh-sm`, `.lh-base` and `.lh-lg`. See [here]({{< docsref "/utilities/text#line-height" >}}).
+
+- Moved the `.d-none` utility in our CSS to give it more weight over other display utilities.
+
+- Extended the `.visually-hidden-focusable` helper to also work on containers, using `:focus-within`.
+
+### Helpers
+
+- <span class="badge text-bg-danger">Breaking</span> **Responsive embed helpers have been renamed to [ratio helpers]({{< docsref "/helpers/ratio" >}})** with new class names and improved behaviors, as well as a helpful CSS variable.
+  - Classes have been renamed to change `by` to `x` in the aspect ratio. For example, `.ratio-16by9` is now `.ratio-16x9`.
+  - We've dropped the `.embed-responsive-item` and element group selector in favor of a simpler `.ratio > *` selector. No more class is needed, and the ratio helper now works with any HTML element.
+  - The `$embed-responsive-aspect-ratios` Sass map has been renamed to `$aspect-ratios` and its values have been simplified to include the class name and the percentage as the `key: value` pair.
+  - CSS variables are now generated and included for each value in the Sass map. Modify the `--bs-aspect-ratio` variable on the `.ratio` to create any [custom aspect ratio]({{< docsref "/helpers/ratio#custom-ratios" >}}).
+
+- <span class="badge text-bg-danger">Breaking</span> **"Screen reader" classes are now ["visually hidden" classes]({{< docsref "/helpers/visually-hidden" >}}).**
+  - Changed the Sass file from `scss/helpers/_screenreaders.scss` to `scss/helpers/_visually-hidden.scss`
+  - Renamed `.sr-only` and `.sr-only-focusable` to `.visually-hidden` and `.visually-hidden-focusable`
+  - Renamed `sr-only()` and `sr-only-focusable()` mixins to `visually-hidden()` and `visually-hidden-focusable()`.
+
+- `bootstrap-utilities.css` now also includes our helpers. Helpers don't need to be imported in custom builds anymore.
+
+### JavaScript
+
+- **Dropped jQuery dependency** and rewrote plugins to be in regular JavaScript.
+
+- <span class="badge text-bg-danger">Breaking</span> Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use `data-bs-toggle` instead of `data-toggle`.
+
+- **All plugins can now accept a CSS selector as the first argument.** You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin:
+
+  ```js
+  const modal = new bootstrap.Modal('#myModal')
+  const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
+  ```
+
+- `popperConfig` can be passed as a function that accepts the Bootstrap's default Popper config as an argument, so that you can merge this default configuration in your way. **Applies to dropdowns, popovers, and tooltips.**
+
+- The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of Popper elements. **Applies to dropdowns, popovers, and tooltips.**
+
+- Removed underscore from public static methods like `_getInstance()` → `getInstance()`.
diff --git a/site/content/docs/5.1/utilities/api.md b/site/content/docs/5.3/utilities/api.md
index af8de6561..ec9e59331 100644
--- a/site/content/docs/5.1/utilities/api.md
+++ b/site/content/docs/5.3/utilities/api.md
@@ -3,21 +3,22 @@ layout: docs
 title: Utility API
 description: The utility API is a Sass-based tool to generate utility classes.
 group: utilities
-aliases: "/docs/5.1/utilities/"
+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:
 
-{{< bs-table "table text-start" >}}
+{{< bs-table "table table-utilities" >}}
 | Option | Type | Default&nbsp;value | Description |
 | --- | --- | --- | --- |
 | [`property`](#property) | **Required** | – | Name of the property, this can be a string or an array of strings (e.g., horizontal paddings or margins). |
-| [`values`](#values) | **Required** | – | List of values, or a map if you don't want the class name to be the same as the value. If `null` is used as map key, it isn't compiled. |
-| [`class`](#class) | Optional | null | Name of the generated class. If not provided and `property` is an array of strings, `class` will default to the first element of the `property` array. |
+| [`values`](#values) | **Required** | – | List of values, or a map if you don't want the class name to be the same as the value. If `null` is used as map key, `class` is not prepended to the class name. |
+| [`class`](#class) | Optional | null | Name of the generated class. If not provided and `property` is an array of strings, `class` will default to the first element of the `property` array. If not provided and `property` is a string, the `values` keys are used for the `class` names. |
 | [`css-var`](#css-variable-utilities) | Optional | `false` | Boolean to generate CSS variables instead of CSS rules. |
+| [`css-variable-name`](#css-variable-utilities) | Optional | null | Custom un-prefixed name for the CSS variable inside the ruleset. |
 | [`local-vars`](#local-css-variables) | Optional | null | Map of local CSS variables to generate in addition to the CSS rules. |
 | [`state`](#states) | Optional | null | List of pseudo-class variants (e.g., `:hover` or `:focus`) to generate. |
 | [`responsive`](#responsive) | Optional | `false` | Boolean indicating if responsive classes should be generated. |
@@ -134,14 +135,39 @@ Output:
 .o-100 { opacity: 1 !important; }
 ```
 
+If `class: null`, generates classes for each of the `values` keys:
+
+```scss
+$utilities: (
+  "visibility": (
+    property: visibility,
+    class: null,
+    values: (
+      visible: visible,
+      invisible: hidden,
+    )
+  )
+);
+```
+
+Output:
+
+```css
+.visible { visibility: visible !important; }
+.invisible { visibility: hidden !important; }
+```
+
 ### CSS variable utilities
 
-Set the `css-var` boolean option to `true` and the API will generate local CSS variables for the given selector instead of the usual `property: value` rules. Consider our `.text-opacity-*` utilities:
+Set the `css-var` boolean option to `true` and the API will generate local CSS variables for the given selector instead of the usual `property: value` rules. Add an optional `css-variable-name` to set a different CSS variable name than the class name.
+
+Consider our `.text-opacity-*` utilities. If we add the `css-variable-name` option, we'll get a custom output.
 
 ```scss
 $utilities: (
   "text-opacity": (
     css-var: true,
+    css-variable-name: text-alpha,
     class: text-opacity,
     values: (
       25: .25,
@@ -156,10 +182,10 @@ $utilities: (
 Output:
 
 ```css
-.text-opacity-25 { --bs-text-opacity: .25; }
-.text-opacity-50 { --bs-text-opacity: .5; }
-.text-opacity-75 { --bs-text-opacity: .75; }
-.text-opacity-100 { --bs-text-opacity: 1; }
+.text-opacity-25 { --bs-text-alpha: .25; }
+.text-opacity-50 { --bs-text-alpha: .5; }
+.text-opacity-75 { --bs-text-alpha: .75; }
+.text-opacity-100 { --bs-text-alpha: 1; }
 ```
 
 ### Local CSS variables
@@ -363,10 +389,10 @@ New utilities can be added to the default `$utilities` map with a `map-merge`. M
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
-@import "bootstrap/scss/utilities/api";
 
 $utilities: map-merge(
   $utilities,
@@ -379,6 +405,8 @@ $utilities: map-merge(
     )
   )
 );
+
+@import "bootstrap/scss/utilities/api";
 ```
 
 ### Modify utilities
@@ -388,10 +416,10 @@ Modify existing utilities in the default `$utilities` map with `map-get` and `ma
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
-@import "bootstrap/scss/utilities/api";
 
 $utilities: map-merge(
   $utilities,
@@ -407,6 +435,8 @@ $utilities: map-merge(
     ),
   )
 );
+
+@import "bootstrap/scss/utilities/api";
 ```
 
 #### Enable responsive
@@ -416,10 +446,10 @@ You can enable responsive classes for an existing set of utilities that are not
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
-@import "bootstrap/scss/utilities/api";
 
 $utilities: map-merge(
   $utilities, (
@@ -429,6 +459,8 @@ $utilities: map-merge(
     ),
   )
 );
+
+@import "bootstrap/scss/utilities/api";
 ```
 
 This will now generate responsive variations of `.border` and `.border-0` for each breakpoint. Your generated CSS will look like this:
@@ -470,10 +502,10 @@ Missing v4 utilities, or used to another naming convention? The utilities API ca
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
-@import "bootstrap/scss/utilities/api";
 
 $utilities: map-merge(
   $utilities, (
@@ -483,19 +515,37 @@ $utilities: map-merge(
     ),
   )
 );
+
+@import "bootstrap/scss/utilities/api";
 ```
 
 ### Remove utilities
 
-Remove any of the default utilities by setting the group key to `null`. For example, to remove all our `width` utilities, create a `$utilities` `map-merge` and add `"width": null` within.
+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";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
+
+// Remove multiple utilities with a comma-separated list
+$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.
+
+```scss
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
 
 $utilities: map-merge(
   $utilities,
@@ -503,6 +553,45 @@ $utilities: map-merge(
     "width": null
   )
 );
+
+@import "bootstrap/scss/utilities/api";
+```
+
+### 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.
+
+```scss
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+
+$utilities: map-merge(
+  $utilities,
+  (
+    // Remove the `width` utility
+    "width": null,
+
+    // Make an existing utility responsive
+    "border": map-merge(
+      map-get($utilities, "border"),
+      ( responsive: true ),
+    ),
+
+    // Add new utilities
+    "cursor": (
+      property: cursor,
+      class: cursor,
+      responsive: true,
+      values: auto pointer grab,
+    )
+  )
+);
+
+@import "bootstrap/scss/utilities/api";
 ```
 
 #### Remove utility in RTL
diff --git a/site/content/docs/5.1/utilities/background.md b/site/content/docs/5.3/utilities/background.md
index b6f7a8bdf..1239261b4 100644
--- a/site/content/docs/5.1/utilities/background.md
+++ b/site/content/docs/5.3/utilities/background.md
@@ -6,19 +6,31 @@ group: utilities
 toc: true
 ---
 
+{{< callout info >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
+{{< /callout >}}
+
 ## Background color
 
 Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` [color utilities]({{< docsref "/utilities/colors" >}}).
 
+{{< callout info >}}
+Background utilities like `.bg-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.bg-*-subtle` utility will. This will be resolved in v6.
+{{< /callout >}}
+
 {{< example >}}
 {{< colors.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
 <div class="p-3 mb-2 bg-{{ .name }}{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }}">.bg-{{ .name }}</div>
+<div class="p-3 mb-2 bg-{{ .name }}-subtle text-{{ .name }}-emphasis">.bg-{{ .name }}-subtle</div>
 {{- end -}}
 {{< /colors.inline >}}
-<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
+<div class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</div>
+<div class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</div>
+<div class="p-3 mb-2 bg-body text-body">.bg-body</div>
+<div class="p-3 mb-2 bg-black text-white">.bg-black</div>
 <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
-<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
+<div class="p-3 mb-2 bg-transparent text-body">.bg-transparent</div>
 {{< /example >}}
 
 ## Background gradient
@@ -33,11 +45,12 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
 <div class="p-3 mb-2 bg-{{ .name }} bg-gradient{{ with .contrast_color }} text-{{ . }}{{ else }} text-white{{ end }}">.bg-{{ .name }}.bg-gradient</div>
 {{- end -}}
 {{< /colors.inline >}}
+<div class="p-3 mb-2 bg-black bg-gradient text-white">.bg-black.bg-gradient</div>
 {{< /markdown >}}
 
 ## Opacity
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.1.0</small>
+{{< added-in "5.1.0" >}}
 
 As of v5.1.0, `background-color` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
 
@@ -73,11 +86,11 @@ Or, choose from any of the `.bg-opacity` utilities:
 <div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>
 {{< /example >}}
 
-## Sass
+## CSS
 
 In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.
 
-### Variables
+### Sass variables
 
 Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
 
@@ -91,7 +104,13 @@ Grayscale colors are also available, but only a subset are used to generate any
 
 {{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}}
 
-### Map
+Variables for setting `background-color` in `.bg-*-subtle` utilities in light and dark mode:
+
+{{< scss-docs name="theme-bg-subtle-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="theme-bg-subtle-dark-variables" file="scss/_variables-dark.scss" >}}
+
+### Sass maps
 
 Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
 
@@ -105,11 +124,17 @@ RGB colors are generated from a separate Sass map:
 
 {{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}}
 
-And background color opacities build on that with their own map that's consumed by the utilities API:
+Background color opacities build on that with their own map that's consumed by the utilities API:
 
 {{< scss-docs name="utilities-bg-colors" file="scss/_maps.scss" >}}
 
-### Mixins
+Color mode background colors are also available as a Sass map:
+
+{{< scss-docs name="theme-bg-subtle-map" file="scss/_maps.scss" >}}
+
+{{< scss-docs name="theme-bg-subtle-dark-map" file="scss/_maps.scss" >}}
+
+### Sass mixins
 
 **No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you'd like to create your own gradients.
 
@@ -117,7 +142,7 @@ And background color opacities build on that with their own map that's consumed
 
 {{< scss-docs name="gradient-mixins" file="scss/mixins/_gradients.scss" >}}
 
-### Utilities API
+### Sass utilities API
 
 Background utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.3/utilities/borders.md b/site/content/docs/5.3/utilities/borders.md
new file mode 100644
index 000000000..b4fa2f413
--- /dev/null
+++ b/site/content/docs/5.3/utilities/borders.md
@@ -0,0 +1,194 @@
+---
+layout: docs
+title: Borders
+description: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
+group: utilities
+toc: true
+---
+
+## Border
+
+Use border utilities to add or remove an element's borders. Choose from all borders or one at a time.
+
+### Additive
+
+Add borders to custom elements:
+
+{{< example class="bd-example-border-utils" >}}
+<span class="border"></span>
+<span class="border-top"></span>
+<span class="border-end"></span>
+<span class="border-bottom"></span>
+<span class="border-start"></span>
+{{< /example >}}
+
+### Subtractive
+
+Or remove borders:
+
+{{< example class="bd-example-border-utils" >}}
+<span class="border border-0"></span>
+<span class="border border-top-0"></span>
+<span class="border border-end-0"></span>
+<span class="border border-bottom-0"></span>
+<span class="border border-start-0"></span>
+{{< /example >}}
+
+## Color
+
+{{< callout info >}}
+Border utilities like `.border-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.border-*-subtle` utility will. This will be resolved in v6.
+{{< /callout >}}
+
+Change the border color using utilities built on our theme colors.
+
+{{< example class="bd-example-border-utils" >}}
+{{< border.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<span class="border border-{{ .name }}"></span>
+<span class="border border-{{ .name }}-subtle"></span>
+{{- end -}}
+{{< /border.inline >}}
+<span class="border border-black"></span>
+<span class="border border-white"></span>
+{{< /example >}}
+
+Or modify the default `border-color` of a component:
+
+{{< example >}}
+<div class="mb-4">
+  <label for="exampleFormControlInput1" class="form-label">Email address</label>
+  <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="[email protected]">
+</div>
+
+<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
+  Dangerous heading
+</div>
+
+<div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
+  Changing border color and width
+</div>
+{{< /example >}}
+
+## Opacity
+
+{{< added-in "5.2.0" >}}
+
+Bootstrap `border-{color}` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
+
+### How it works
+
+Consider our default `.border-success` utility.
+
+```css
+.border-success {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
+}
+```
+
+We use an RGB version of our `--bs-success` (with the value of `25, 135, 84`) CSS variable and attached a second CSS variable, `--bs-border-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.border-success` now, your computed `color` value is `rgba(25, 135, 84, 1)`. The local CSS variable inside each `.border-*` class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency.
+
+### Example
+
+To change that opacity, override `--bs-border-opacity` via custom styles or inline styles.
+
+{{< example >}}
+<div class="border border-success p-2 mb-2">This is default success border</div>
+<div class="border border-success p-2" style="--bs-border-opacity: .5;">This is 50% opacity success border</div>
+{{< /example >}}
+
+Or, choose from any of the `.border-opacity` utilities:
+
+{{< example >}}
+<div class="border border-success p-2 mb-2">This is default success border</div>
+<div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div>
+<div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div>
+<div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div>
+<div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>
+{{< /example >}}
+
+## Width
+
+{{< example class="bd-example-border-utils" >}}
+<span class="border border-1"></span>
+<span class="border border-2"></span>
+<span class="border border-3"></span>
+<span class="border border-4"></span>
+<span class="border border-5"></span>
+{{< /example >}}
+
+## Radius
+
+Add classes to an element to easily round its corners.
+
+{{< example class="bd-example-rounded-utils" >}}
+{{< placeholder width="75" height="75" class="rounded" title="Example rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
+{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
+{{< /example >}}
+
+### Sizes
+
+Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `5`, and can be configured by modifying the utilities API.
+
+{{< example class="bd-example-rounded-utils" >}}
+{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" >}}
+{{< /example >}}
+
+{{< example class="bd-example-rounded-utils" >}}
+{{< placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" >}}
+{{< placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" >}}
+{{< placeholder width="75" height="75" class="rounded-5 rounded-top-0" title="Example extra large bottom rounded image" >}}
+{{< /example >}}
+
+## CSS
+
+### Variables
+
+{{< added-in "5.2.0" >}}
+
+{{< scss-docs name="root-border-var" file="scss/_root.scss" >}}
+
+### Sass variables
+
+{{< scss-docs name="border-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}}
+
+Variables for setting `border-color` in `.border-*-subtle` utilities in light and dark mode:
+
+{{< scss-docs name="theme-border-subtle-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="theme-border-subtle-dark-variables" file="scss/_variables-dark.scss" >}}
+
+### Sass maps
+
+Color mode adaptive border colors are also available as a Sass map:
+
+{{< scss-docs name="theme-border-subtle-map" file="scss/_maps.scss" >}}
+
+{{< scss-docs name="theme-border-subtle-dark-map" file="scss/_maps.scss" >}}
+
+### Sass mixins
+
+{{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}}
+
+### Sass utilities API
+
+Border utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-borders" file="scss/_utilities.scss" >}}
+
+{{< scss-docs name="utils-border-radius" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.1/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md
index 95752ed64..775457d9a 100644
--- a/site/content/docs/5.1/utilities/colors.md
+++ b/site/content/docs/5.3/utilities/colors.md
@@ -6,20 +6,34 @@ group: utilities
 toc: true
 ---
 
+{{< callout info >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
+{{< /callout >}}
+
 ## Colors
 
 Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states.
 
+{{< callout info >}}
+Color utilities like `.text-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.text-*-emphasis` utility will. This will be resolved in v6.
+{{< /callout >}}
+
 {{< example >}}
 {{< colors.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
 <p class="text-{{ .name }}{{ with .contrast_color }} bg-{{ . }}{{ end }}">.text-{{ .name }}</p>
+<p class="text-{{ .name }}-emphasis">.text-{{ .name }}-emphasis</p>
 {{- end -}}
 {{< /colors.inline >}}
+
 <p class="text-body">.text-body</p>
-<p class="text-muted">.text-muted</p>
+<p class="text-body-emphasis">.text-body-emphasis</p>
+<p class="text-body-secondary">.text-body-secondary</p>
+<p class="text-body-tertiary">.text-body-tertiary</p>
+
+<p class="text-black bg-white">.text-black</p>
 <p class="text-white bg-dark">.text-white</p>
-<p class="text-black-50">.text-black-50</p>
+<p class="text-black-50 bg-white">.text-black-50</p>
 <p class="text-white-50 bg-dark">.text-white-50</p>
 {{< /example >}}
 
@@ -27,13 +41,13 @@ Colorize text with color utilities. If you want to colorize links, you can use t
 **Deprecation:** With the addition of `.text-opacity-*` utilities and CSS variables for text utilities, `.text-black-50` and `.text-white-50` are deprecated as of v5.1.0. They'll be removed in v6.0.0.
 {{< /callout >}}
 
-{{< callout info >}}
-{{< partial "callout-warning-color-assistive-technologies.md" >}}
+{{< callout warning >}}
+**Deprecation:** With the addition of the expanded theme colors and variables, the `.text-muted` utility has been deprecated as of v5.3.0. Its default value has also been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
 {{< /callout >}}
 
 ## Opacity
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.1.0</small>
+{{< added-in "5.1.0" >}}
 
 As of v5.1.0, text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
 
@@ -72,11 +86,11 @@ Or, choose from any of the `.text-opacity` utilities:
 
 Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` or more semantic element with the desired class.
 
-## Sass
+## CSS
 
 In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.
 
-### Variables
+### Sass variables
 
 Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
 
@@ -88,7 +102,15 @@ Grayscale colors are also available, but only a subset are used to generate any
 
 {{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}}
 
-### Map
+{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}}
+
+Variables for setting colors in `.text-*-emphasis` utilities in light and dark mode:
+
+{{< scss-docs name="theme-text-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="theme-text-dark-variables" file="scss/_variables-dark.scss" >}}
+
+### Sass maps
 
 Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
 
@@ -102,11 +124,17 @@ RGB colors are generated from a separate Sass map:
 
 {{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}}
 
-And color opacities build on that with their own map that's consumed by the utilities API:
+Color opacities build on that with their own map that's consumed by the utilities API:
 
 {{< scss-docs name="utilities-text-colors" file="scss/_maps.scss" >}}
 
-### Utilities API
+Color mode adaptive text colors are also available as a Sass map:
+
+{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}}
+
+{{< scss-docs name="theme-text-dark-map" file="scss/_maps.scss" >}}
+
+### Sass utilities API
 
 Color utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.1/utilities/display.md b/site/content/docs/5.3/utilities/display.md
index 9e5a5dfb2..41541b96f 100644
--- a/site/content/docs/5.1/utilities/display.md
+++ b/site/content/docs/5.3/utilities/display.md
@@ -26,26 +26,27 @@ Where *value* is one of:
 - `inline-block`
 - `block`
 - `grid`
+- `inline-grid`
 - `table`
 - `table-cell`
 - `table-row`
 - `flex`
 - `inline-flex`
 
-The display values can be altered by changing the `$displays` variable and recompiling the SCSS.
+The display values can be altered by changing the `display` values defined in `$utilities` and recompiling the SCSS.
 
 The media queries affect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on `lg`, `xl`, and `xxl` screens.
 
 ## Examples
 
 {{< example >}}
-<div class="d-inline p-2 bg-primary text-white">d-inline</div>
-<div class="d-inline p-2 bg-dark text-white">d-inline</div>
+<div class="d-inline p-2 text-bg-primary">d-inline</div>
+<div class="d-inline p-2 text-bg-dark">d-inline</div>
 {{< /example >}}
 
 {{< example >}}
-<span class="d-block p-2 bg-primary text-white">d-block</span>
-<span class="d-block p-2 bg-dark text-white">d-block</span>
+<span class="d-block p-2 text-bg-primary">d-block</span>
+<span class="d-block p-2 text-bg-dark">d-block</span>
 {{< /example >}}
 
 ## Hiding elements
@@ -56,72 +57,24 @@ To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,x
 
 To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-xxl-none` will hide the element for all screen sizes except on medium and large devices.
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>Screen size</th>
-      <th>Class</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Hidden on all</td>
-      <td><code>.d-none</code></td>
-    </tr>
-    <tr>
-      <td>Hidden only on xs</td>
-      <td><code>.d-none .d-sm-block</code></td>
-    </tr>
-    <tr>
-      <td>Hidden only on sm</td>
-      <td><code>.d-sm-none .d-md-block</code></td>
-    </tr>
-    <tr>
-      <td>Hidden only on md</td>
-      <td><code>.d-md-none .d-lg-block</code></td>
-    </tr>
-    <tr>
-      <td>Hidden only on lg</td>
-      <td><code>.d-lg-none .d-xl-block</code></td>
-    </tr>
-    <tr>
-      <td>Hidden only on xl</td>
-      <td><code>.d-xl-none .d-xxl-block</code></td>
-    </tr>
-    <tr>
-      <td>Hidden only on xxl</td>
-      <td><code>.d-xxl-none</code></td>
-    </tr>
-    <tr>
-      <td>Visible on all</td>
-      <td><code>.d-block</code></td>
-    </tr>
-    <tr>
-      <td>Visible only on xs</td>
-      <td><code>.d-block .d-sm-none</code></td>
-    </tr>
-    <tr>
-      <td>Visible only on sm</td>
-      <td><code>.d-none .d-sm-block .d-md-none</code></td>
-    </tr>
-    <tr>
-      <td>Visible only on md</td>
-      <td><code>.d-none .d-md-block .d-lg-none</code></td>
-    </tr>
-    <tr>
-      <td>Visible only on lg</td>
-      <td><code>.d-none .d-lg-block .d-xl-none</code></td>
-    </tr>
-    <tr>
-      <td>Visible only on xl</td>
-      <td><code>.d-none .d-xl-block .d-xxl-none</code></td>
-    </tr>
-    <tr>
-      <td>Visible only on xxl</td>
-      <td><code>.d-none .d-xxl-block</code></td>
-    </tr>
-  </tbody>
-</table>
+{{< bs-table >}}
+| Screen size | Class |
+| --- | --- |
+| Hidden on all | `.d-none` |
+| Hidden only on xs | `.d-none .d-sm-block` |
+| Hidden only on sm | `.d-sm-none .d-md-block` |
+| Hidden only on md | `.d-md-none .d-lg-block` |
+| Hidden only on lg | `.d-lg-none .d-xl-block` |
+| Hidden only on xl | `.d-xl-none .d-xxl-block` |
+| Hidden only on xxl | `.d-xxl-none` |
+| Visible on all | `.d-block` |
+| Visible only on xs | `.d-block .d-sm-none` |
+| Visible only on sm | `.d-none .d-sm-block .d-md-none` |
+| Visible only on md | `.d-none .d-md-block .d-lg-none` |
+| Visible only on lg | `.d-none .d-lg-block .d-xl-none` |
+| Visible only on xl | `.d-none .d-xl-block .d-xxl-none` |
+| Visible only on xxl | `.d-none .d-xxl-block` |
+{{< /bs-table >}}
 
 {{< example >}}
 <div class="d-lg-none">hide on lg and wider screens</div>
@@ -137,6 +90,7 @@ Change the `display` value of elements when printing with our print display util
 - `.d-print-inline-block`
 - `.d-print-block`
 - `.d-print-grid`
+- `.d-print-inline-grid`
 - `.d-print-table`
 - `.d-print-table-row`
 - `.d-print-table-cell`
@@ -151,9 +105,9 @@ The print and display classes can be combined.
 <div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Utilities API
+### Sass utilities API
 
 Display utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.3/utilities/flex.md b/site/content/docs/5.3/utilities/flex.md
new file mode 100644
index 000000000..d0a92e5b5
--- /dev/null
+++ b/site/content/docs/5.3/utilities/flex.md
@@ -0,0 +1,664 @@
+---
+layout: docs
+title: Flex
+description: Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
+group: utilities
+toc: true
+---
+
+## Enable flex behaviors
+
+Apply `display` utilities to create a flexbox container and transform **direct children elements** into flex items. Flex containers and items are able to be modified further with additional flex properties.
+
+{{< example class="bd-example-flex" >}}
+<div class="d-flex p-2">I'm a flexbox container!</div>
+{{< /example >}}
+
+{{< example class="bd-example-flex" >}}
+<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>
+{{< /example >}}
+
+Responsive variations also exist for `.d-flex` and `.d-inline-flex`.
+
+{{< markdown >}}
+{{< flex.inline >}}
+{{- range $.Site.Data.breakpoints }}
+- `.d{{ .abbr }}-flex`
+- `.d{{ .abbr }}-inline-flex`
+{{- end -}}
+{{< /flex.inline >}}
+{{< /markdown >}}
+
+## Direction
+
+Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is `row`. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).
+
+Use `.flex-row` to set a horizontal direction (the browser default), or `.flex-row-reverse` to start the horizontal direction from the opposite side.
+
+{{< example class="bd-example-flex" >}}
+<div class="d-flex flex-row mb-3">
+  <div class="p-2">Flex item 1</div>
+  <div class="p-2">Flex item 2</div>
+  <div class="p-2">Flex item 3</div>
+</div>
+<div class="d-flex flex-row-reverse">
+  <div class="p-2">Flex item 1</div>
+  <div class="p-2">Flex item 2</div>
+  <div class="p-2">Flex item 3</div>
+</div>
+{{< /example >}}
+
+Use `.flex-column` to set a vertical direction, or `.flex-column-reverse`  to start the vertical direction from the opposite side.
+
+{{< example class="bd-example-flex" >}}
+<div class="d-flex flex-column mb-3">
+  <div class="p-2">Flex item 1</div>
+  <div class="p-2">Flex item 2</div>
+  <div class="p-2">Flex item 3</div>
+</div>
+<div class="d-flex flex-column-reverse">
+  <div class="p-2">Flex item 1</div>
+  <div class="p-2">Flex item 2</div>
+  <div class="p-2">Flex item 3</div>
+</div>
+{{< /example >}}
+
+Responsive variations also exist for `flex-direction`.
+
+{{< markdown >}}
+{{< flex.inline >}}
+{{- range $.Site.Data.breakpoints }}
+- `.flex{{ .abbr }}-row`
+- `.flex{{ .abbr }}-row-reverse`
+- `.flex{{ .abbr }}-column`
+- `.flex{{ .abbr }}-column-reverse`
+{{- end -}}
+{{< /flex.inline >}}
+{{< /markdown >}}
+
+## Justify content
+
+Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `evenly`.
+
+<div class="bd-example bd-example-flex">
+  <div class="d-flex justify-content-start mb-3">
+    <div class="p-2 bd-highlight">Justify</div>
+    <div class="p-2 bd-highlight">Content</div>
+    <div class="p-2 bd-highlight">Start</div>
+  </div>
+  <div class="d-flex justify-content-end mb-3">
+    <div class="p-2 bd-highlight">Justify</div>
+    <div class="p-2 bd-highlight">Content</div>
+    <div class="p-2 bd-highlight">End</div>
+  </div>
+  <div class="d-flex justify-content-center mb-3">
+    <div class="p-2 bd-highlight">Justify</div>
+    <div class="p-2 bd-highlight">Content</div>
+    <div class="p-2 bd-highlight">Center</div>
+  </div>
+  <div class="d-flex justify-content-between mb-3">
+    <div class="p-2 bd-highlight">Justify</div>
+    <div class="p-2 bd-highlight">Content</div>
+    <div class="p-2 bd-highlight">Between</div>
+  </div>
+  <div class="d-flex justify-content-around mb-3">
+    <div class="p-2 bd-highlight">Justify</div>
+    <div class="p-2 bd-highlight">Content</div>
+    <div class="p-2 bd-highlight">Around</div>
+  </div>
+  <div class="d-flex justify-content-evenly">
+    <div class="p-2 bd-highlight">Justify</div>
+    <div class="p-2 bd-highlight">Content</div>
+    <div class="p-2 bd-highlight">Evenly</div>
+  </div>
+</div>
+
+```html
+<div class="d-flex justify-content-start">...</div>
+<div class="d-flex justify-content-end">...</div>
+<div class="d-flex justify-content-center">...</div>
+<div class="d-flex justify-content-between">...</div>
+<div class="d-flex justify-content-around">...</div>
+<div class="d-flex justify-content-evenly">...</div>
+```
+
+Responsive variations also exist for `justify-content`.
+
+{{< markdown >}}
+{{< flex.inline >}}
+{{- range $.Site.Data.breakpoints }}
+- `.justify-content{{ .abbr }}-start`
+- `.justify-content{{ .abbr }}-end`
+- `.justify-content{{ .abbr }}-center`
+- `.justify-content{{ .abbr }}-between`
+- `.justify-content{{ .abbr }}-around`
+- `.justify-content{{ .abbr }}-evenly`
+{{- end -}}
+{{< /flex.inline >}}
+{{< /markdown >}}
+
+## Align items
+
+Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
+
+<div class="bd-example bd-example-flex">
+  <div class="d-flex align-items-start mb-3" style="height: 100px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+  <div class="d-flex align-items-end mb-3" style="height: 100px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+  <div class="d-flex align-items-center mb-3" style="height: 100px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+  <div class="d-flex align-items-baseline mb-3" style="height: 100px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+  <div class="d-flex align-items-stretch" style="height: 100px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+</div>
+
+```html
+<div class="d-flex align-items-start">...</div>
+<div class="d-flex align-items-end">...</div>
+<div class="d-flex align-items-center">...</div>
+<div class="d-flex align-items-baseline">...</div>
+<div class="d-flex align-items-stretch">...</div>
+```
+
+Responsive variations also exist for `align-items`.
+
+{{< markdown >}}
+{{< flex.inline >}}
+{{- range $.Site.Data.breakpoints }}
+- `.align-items{{ .abbr }}-start`
+- `.align-items{{ .abbr }}-end`
+- `.align-items{{ .abbr }}-center`
+- `.align-items{{ .abbr }}-baseline`
+- `.align-items{{ .abbr }}-stretch`
+{{- end -}}
+{{< /flex.inline >}}
+{{< /markdown >}}
+
+## Align self
+
+Use `align-self` utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from the same options as `align-items`: `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
+
+<div class="bd-example bd-example-flex">
+  <div class="d-flex mb-3" style="height: 100px">
+    <div class="p-2">Flex item</div>
+    <div class="align-self-start p-2">Aligned flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+  <div class="d-flex mb-3" style="height: 100px">
+    <div class="p-2">Flex item</div>
+    <div class="align-self-end p-2">Aligned flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+  <div class="d-flex mb-3" style="height: 100px">
+    <div class="p-2">Flex item</div>
+    <div class="align-self-center p-2">Aligned flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+  <div class="d-flex mb-3" style="height: 100px">
+    <div class="p-2">Flex item</div>
+    <div class="align-self-baseline p-2">Aligned flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+  <div class="d-flex" style="height: 100px">
+    <div class="p-2">Flex item</div>
+    <div class="align-self-stretch p-2">Aligned flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+</div>
+
+```html
+<div class="align-self-start">Aligned flex item</div>
+<div class="align-self-end">Aligned flex item</div>
+<div class="align-self-center">Aligned flex item</div>
+<div class="align-self-baseline">Aligned flex item</div>
+<div class="align-self-stretch">Aligned flex item</div>
+```
+
+Responsive variations also exist for `align-self`.
+
+{{< markdown >}}
+{{< flex.inline >}}
+{{- range $.Site.Data.breakpoints }}
+- `.align-self{{ .abbr }}-start`
+- `.align-self{{ .abbr }}-end`
+- `.align-self{{ .abbr }}-center`
+- `.align-self{{ .abbr }}-baseline`
+- `.align-self{{ .abbr }}-stretch`
+{{- end -}}
+{{< /flex.inline >}}
+{{< /markdown >}}
+
+## Fill
+
+Use the `.flex-fill` class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.
+
+{{< example class="bd-example-flex" >}}
+<div class="d-flex">
+  <div class="p-2 flex-fill">Flex item with a lot of content</div>
+  <div class="p-2 flex-fill">Flex item</div>
+  <div class="p-2 flex-fill">Flex item</div>
+</div>
+{{< /example >}}
+
+Responsive variations also exist for `flex-fill`.
+
+{{< markdown >}}
+{{< flex.inline >}}
+{{- range $.Site.Data.breakpoints }}
+- `.flex{{ .abbr }}-fill`
+{{- end -}}
+{{< /flex.inline >}}
+{{< /markdown >}}
+
+## Grow and shrink
+
+Use `.flex-grow-*` utilities to toggle a flex item's ability to grow to fill available space. In the example below, the `.flex-grow-1` elements uses all available space it can, while allowing the remaining two flex items their necessary space.
+
+{{< example class="bd-example-flex" >}}
+<div class="d-flex">
+  <div class="p-2 flex-grow-1">Flex item</div>
+  <div class="p-2">Flex item</div>
+  <div class="p-2">Third flex item</div>
+</div>
+{{< /example >}}
+
+Use `.flex-shrink-*` utilities to toggle a flex item's ability to shrink if necessary. In the example below, the second flex item with `.flex-shrink-1` is forced to wrap its contents to a new line, "shrinking" to allow more space for the previous flex item with `.w-100`.
+
+{{< example class="bd-example-flex" >}}
+<div class="d-flex">
+  <div class="p-2 w-100">Flex item</div>
+  <div class="p-2 flex-shrink-1">Flex item</div>
+</div>
+{{< /example >}}
+
+Responsive variations also exist for `flex-grow` and `flex-shrink`.
+
+{{< markdown >}}
+{{< flex.inline >}}
+{{- range $.Site.Data.breakpoints }}
+- `.flex{{ .abbr }}-{grow|shrink}-0`
+- `.flex{{ .abbr }}-{grow|shrink}-1`
+{{- end -}}
+{{< /flex.inline >}}
+{{< /markdown >}}
+
+## Auto margins
+
+Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.me-auto`), and pushing two items to the left (`.ms-auto`).
+
+{{< example class="bd-example-flex" >}}
+<div class="d-flex mb-3">
+  <div class="p-2">Flex item</div>
+  <div class="p-2">Flex item</div>
+  <div class="p-2">Flex item</div>
+</div>
+
+<div class="d-flex mb-3">
+  <div class="me-auto p-2">Flex item</div>
+  <div class="p-2">Flex item</div>
+  <div class="p-2">Flex item</div>
+</div>
+
+<div class="d-flex mb-3">
+  <div class="p-2">Flex item</div>
+  <div class="p-2">Flex item</div>
+  <div class="ms-auto p-2">Flex item</div>
+</div>
+{{< /example >}}
+
+### With align-items
+
+Vertically move one flex item to the top or bottom of a container by mixing `align-items`, `flex-direction: column`, and `margin-top: auto` or `margin-bottom: auto`.
+
+{{< example class="bd-example-flex" >}}
+<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
+  <div class="mb-auto p-2">Flex item</div>
+  <div class="p-2">Flex item</div>
+  <div class="p-2">Flex item</div>
+</div>
+
+<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
+  <div class="p-2">Flex item</div>
+  <div class="p-2">Flex item</div>
+  <div class="mt-auto p-2">Flex item</div>
+</div>
+{{< /example >}}
+
+## Wrap
+
+Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, wrapping with `.flex-wrap`, or reverse wrapping with `.flex-wrap-reverse`.
+
+<div class="bd-example bd-example-flex">
+  <div class="d-flex flex-nowrap" style="width: 8rem;">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+</div>
+
+```html
+<div class="d-flex flex-nowrap">
+  ...
+</div>
+```
+
+<div class="bd-example bd-example-flex">
+  <div class="d-flex flex-wrap">
+    <div class="p-2">Flex item 1</div>
+    <div class="p-2">Flex item 2</div>
+    <div class="p-2">Flex item 3</div>
+    <div class="p-2">Flex item 4</div>
+    <div class="p-2">Flex item 5</div>
+    <div class="p-2">Flex item 6</div>
+    <div class="p-2">Flex item 7</div>
+    <div class="p-2">Flex item 8</div>
+    <div class="p-2">Flex item 9</div>
+    <div class="p-2">Flex item 10</div>
+    <div class="p-2">Flex item 11</div>
+    <div class="p-2">Flex item 12</div>
+    <div class="p-2">Flex item 13</div>
+    <div class="p-2">Flex item 14</div>
+  </div>
+</div>
+
+```html
+<div class="d-flex flex-wrap">
+  ...
+</div>
+```
+
+<div class="bd-example bd-example-flex">
+  <div class="d-flex flex-wrap-reverse">
+    <div class="p-2">Flex item 1</div>
+    <div class="p-2">Flex item 2</div>
+    <div class="p-2">Flex item 3</div>
+    <div class="p-2">Flex item 4</div>
+    <div class="p-2">Flex item 5</div>
+    <div class="p-2">Flex item 6</div>
+    <div class="p-2">Flex item 7</div>
+    <div class="p-2">Flex item 8</div>
+    <div class="p-2">Flex item 9</div>
+    <div class="p-2">Flex item 10</div>
+    <div class="p-2">Flex item 11</div>
+    <div class="p-2">Flex item 12</div>
+    <div class="p-2">Flex item 13</div>
+    <div class="p-2">Flex item 14</div>
+  </div>
+</div>
+
+```html
+<div class="d-flex flex-wrap-reverse">
+  ...
+</div>
+```
+
+
+Responsive variations also exist for `flex-wrap`.
+
+{{< markdown >}}
+{{< flex.inline >}}
+{{- range $.Site.Data.breakpoints }}
+- `.flex{{ .abbr }}-nowrap`
+- `.flex{{ .abbr }}-wrap`
+- `.flex{{ .abbr }}-wrap-reverse`
+{{- end -}}
+{{< /flex.inline >}}
+{{< /markdown >}}
+
+## Order
+
+Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As `order` takes any integer value from 0 to 5, add custom CSS for any additional values needed.
+
+{{< example class="bd-example-flex" >}}
+<div class="d-flex flex-nowrap">
+  <div class="order-3 p-2">First flex item</div>
+  <div class="order-2 p-2">Second flex item</div>
+  <div class="order-1 p-2">Third flex item</div>
+</div>
+{{< /example >}}
+
+Responsive variations also exist for `order`.
+
+{{< markdown >}}
+{{< flex.inline >}}
+{{- range $bp := $.Site.Data.breakpoints -}}
+{{- range (seq 0 5) }}
+- `.order{{ $bp.abbr }}-{{ . }}`
+{{- end -}}
+{{- end -}}
+{{< /flex.inline >}}
+{{< /markdown >}}
+
+Additionally there are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 6`, respectively.
+
+{{< markdown >}}
+{{< flex.inline >}}
+{{- range $bp := $.Site.Data.breakpoints -}}
+{{- range (slice "first" "last") }}
+- `.order{{ $bp.abbr }}-{{ . }}`
+{{- end -}}
+{{- end -}}
+{{< /flex.inline >}}
+{{< /markdown >}}
+
+## Align content
+
+Use `align-content` utilities on flexbox containers to align flex items _together_ on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we've enforced `flex-wrap: wrap` and increased the number of flex items.
+
+**Heads up!** This property has no effect on single rows of flex items.
+
+<div class="bd-example bd-example-flex">
+  <div class="d-flex align-content-start flex-wrap mb-3" style="height: 200px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+</div>
+
+```html
+<div class="d-flex align-content-start flex-wrap">
+  ...
+</div>
+```
+
+<div class="bd-example bd-example-flex">
+  <div class="d-flex align-content-end flex-wrap mb-3" style="height: 200px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+</div>
+
+```html
+<div class="d-flex align-content-end flex-wrap">...</div>
+```
+
+<div class="bd-example bd-example-flex">
+  <div class="d-flex align-content-center flex-wrap mb-3" style="height: 200px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+</div>
+
+```html
+<div class="d-flex align-content-center flex-wrap">...</div>
+```
+
+<div class="bd-example bd-example-flex">
+  <div class="d-flex align-content-between flex-wrap mb-3" style="height: 200px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+</div>
+
+```html
+<div class="d-flex align-content-between flex-wrap">...</div>
+```
+
+<div class="bd-example bd-example-flex">
+  <div class="d-flex align-content-around flex-wrap mb-3" style="height: 200px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+</div>
+
+```html
+<div class="d-flex align-content-around flex-wrap">...</div>
+```
+
+<div class="bd-example bd-example-flex">
+  <div class="d-flex align-content-stretch flex-wrap mb-3" style="height: 200px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+</div>
+
+```html
+<div class="d-flex align-content-stretch flex-wrap">...</div>
+```
+
+Responsive variations also exist for `align-content`.
+
+{{< markdown >}}
+{{< flex.inline >}}
+{{- range $.Site.Data.breakpoints }}
+- `.align-content{{ .abbr }}-start`
+- `.align-content{{ .abbr }}-end`
+- `.align-content{{ .abbr }}-center`
+- `.align-content{{ .abbr }}-between`
+- `.align-content{{ .abbr }}-around`
+- `.align-content{{ .abbr }}-stretch`
+{{- end -}}
+{{< /flex.inline >}}
+{{< /markdown >}}
+
+## Media object
+
+Looking to replicate the [media object component](https://getbootstrap.com/docs/4.6/components/media-object/) from Bootstrap 4? Recreate it in no time with a few flex utilities that allow even more flexibility and customization than before.
+
+{{< example >}}
+<div class="d-flex">
+  <div class="flex-shrink-0">
+    {{< placeholder width="100" height="100" color="#999" background="#e5e5e5" text="Image" >}}
+  </div>
+  <div class="flex-grow-1 ms-3">
+    This is some content from a media component. You can replace this with any content and adjust it as needed.
+  </div>
+</div>
+{{< /example >}}
+
+And say you want to vertically center the content next to the image:
+
+{{< example >}}
+<div class="d-flex align-items-center">
+  <div class="flex-shrink-0">
+    {{< placeholder width="100" height="100" color="#999" background="#e5e5e5" text="Image" >}}
+  </div>
+  <div class="flex-grow-1 ms-3">
+    This is some content from a media component. You can replace this with any content and adjust it as needed.
+  </div>
+</div>
+{{< /example >}}
+
+## CSS
+
+### Sass utilities API
+
+Flexbox utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-flex" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.1/utilities/float.md b/site/content/docs/5.3/utilities/float.md
index a18c21471..9e3a11f0c 100644
--- a/site/content/docs/5.1/utilities/float.md
+++ b/site/content/docs/5.3/utilities/float.md
@@ -16,15 +16,18 @@ These utility classes float an element to the left or right, or disable floating
 <div class="float-none">Don't float on all viewport sizes</div>
 {{< /example >}}
 
+Use the [clearfix helper]({{< docsref "/helpers/clearfix" >}}) on a parent element to clear floats.
+
 ## Responsive
 
 Responsive variations also exist for each `float` value.
 
 {{< example >}}
-<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
-<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
-<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
-<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>
+<div class="float-sm-end">Float end on viewports sized SM (small) or wider</div><br>
+<div class="float-md-end">Float end on viewports sized MD (medium) or wider</div><br>
+<div class="float-lg-end">Float end on viewports sized LG (large) or wider</div><br>
+<div class="float-xl-end">Float end on viewports sized XL (extra large) or wider</div><br>
+<div class="float-xxl-end">Float end on viewports sized XXL (extra extra large) or wider</div><br>
 {{< /example >}}
 
 Here are all the support classes:
@@ -39,9 +42,9 @@ Here are all the support classes:
 {{< /float.inline >}}
 {{< /markdown >}}
 
-## Sass
+## CSS
 
-### Utilities API
+### Sass utilities API
 
 Float utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.1/utilities/interactions.md b/site/content/docs/5.3/utilities/interactions.md
index 35ea2b995..d602850d1 100644
--- a/site/content/docs/5.1/utilities/interactions.md
+++ b/site/content/docs/5.3/utilities/interactions.md
@@ -31,11 +31,11 @@ The `.pe-none` class (and the `pointer-events` CSS property it sets) only preven
 If possible, the simpler solution is:
 
 - For form controls, add the `disabled` HTML attribute.
-* For links, remove the `href` attribute, making it a non-interactive anchor or placeholder link.
+- For links, remove the `href` attribute, making it a non-interactive anchor or placeholder link.
 
-## Sass
+## CSS
 
-### Utilities API
+### Sass utilities API
 
 Interaction utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.3/utilities/link.md b/site/content/docs/5.3/utilities/link.md
new file mode 100644
index 000000000..2623f8029
--- /dev/null
+++ b/site/content/docs/5.3/utilities/link.md
@@ -0,0 +1,106 @@
+---
+layout: docs
+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:
+  version: "5.3"
+---
+
+## Link opacity
+
+Change the alpha opacity of the link `rgba()` color value with utilities. Please be aware that changes to a color's opacity can lead to links with [*insufficient* contrast]({{< docsref "getting-started/accessibility#color-contrast" >}}).
+
+{{< example >}}
+<p><a class="link-opacity-10" href="#">Link opacity 10</a></p>
+<p><a class="link-opacity-25" href="#">Link opacity 25</a></p>
+<p><a class="link-opacity-50" href="#">Link opacity 50</a></p>
+<p><a class="link-opacity-75" href="#">Link opacity 75</a></p>
+<p><a class="link-opacity-100" href="#">Link opacity 100</a></p>
+{{< /example >}}
+
+You can even change the opacity level on hover.
+
+{{< example >}}
+<p><a class="link-opacity-10-hover" href="#">Link hover opacity 10</a></p>
+<p><a class="link-opacity-25-hover" href="#">Link hover opacity 25</a></p>
+<p><a class="link-opacity-50-hover" href="#">Link hover opacity 50</a></p>
+<p><a class="link-opacity-75-hover" href="#">Link hover opacity 75</a></p>
+<p><a class="link-opacity-100-hover" href="#">Link hover opacity 100</a></p>
+{{< /example >}}
+
+## Link underlines
+
+### Underline color
+
+Change the underline's color independent of the link text color.
+
+{{< example >}}
+{{< link-underline-colors.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<p><a href="#" class="link-underline-{{ .name }}">{{ .name | title }} underline</a></p>
+{{- end -}}
+{{< /link-underline-colors.inline >}}
+{{< /example >}}
+
+### Underline offset
+
+Change the underline's distance from your text. Offset is set in `em` units to automatically scale with the element's current `font-size`.
+
+{{< example >}}
+<p><a href="#">Default link</a></p>
+<p><a class="link-offset-1" href="#">Offset 1 link</a></p>
+<p><a class="link-offset-2" href="#">Offset 2 link</a></p>
+<p><a class="link-offset-3" href="#">Offset 3 link</a></p>
+{{< /example >}}
+
+### Underline opacity
+
+Change the underline's opacity. Requires adding `.link-underline` to first set an `rgba()` color we use to then modify the alpha opacity.
+
+{{< example >}}
+<p><a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Underline opacity 0</a></p>
+<p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p>
+<p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p>
+<p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p>
+<p><a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Underline opacity 75</a></p>
+<p><a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Underline opacity 100</a></p>
+{{< /example >}}
+
+### Hover variants
+
+Just like the `.link-opacity-*-hover` utilities, `.link-offset` and `.link-underline-opacity` utilities include `:hover` variants by default. Mix and match to create unique link styles.
+
+{{< example >}}
+<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#">
+  Underline opacity 0
+</a>
+{{< /example >}}
+
+## Colored links
+
+[Colored link helpers]({{< docsref "/helpers/colored-links/" >}}) have been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset.
+
+{{< example >}}
+{{< colored-links.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<p><a href="#" class="link-{{ .name }} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">{{ .name | title }} link</a></p>
+{{- end -}}
+{{< /colored-links.inline >}}
+<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>
+{{< /example >}}
+
+{{< callout info >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
+{{< /callout >}}
+
+## CSS
+
+In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.
+
+### Sass utilities API
+
+Link utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-links" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.3/utilities/object-fit.md b/site/content/docs/5.3/utilities/object-fit.md
new file mode 100644
index 000000000..732a8fec9
--- /dev/null
+++ b/site/content/docs/5.3/utilities/object-fit.md
@@ -0,0 +1,65 @@
+---
+layout: docs
+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
+
+Change the value of the [`object-fit` property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) with our responsive `object-fit` utility classes. This property tells the content to fill the parent container in a variety of ways, such as preserving the aspect ratio or stretching to take up as much space as possible.
+
+Classes for the value of `object-fit` are named using the format `.object-fit-{value}`. Choose from the following values:
+
+- `contain`
+- `cover`
+- `fill`
+- `scale` (for scale-down)
+- `none`
+
+## Examples
+
+Add the `object-fit-{value}` class to the [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element):
+
+{{< example class="d-flex overflow-auto" >}}
+{{< placeholder width="140" height="120" class="object-fit-contain border rounded" text="Object fit contain" markup="img" color="#868e96" background="#dee2e6" >}}
+{{< placeholder width="140" height="120" class="object-fit-cover border rounded" text="Object fit cover" markup="img" color="#868e96" background="#dee2e6" >}}
+{{< placeholder width="140" height="120" class="object-fit-fill border rounded" text="Object fit fill" markup="img" color="#868e96" background="#dee2e6" >}}
+{{< placeholder width="140" height="120" class="object-fit-scale border rounded" text="Object fit scale down" markup="img" color="#868e96" background="#dee2e6" >}}
+{{< placeholder width="140" height="120" class="object-fit-none border rounded" text="Object fit none" markup="img" color="#868e96" background="#dee2e6" >}}
+{{< /example >}}
+
+## Responsive
+
+Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `xxl`. Classes can be combined for various effects as you need.
+
+{{< example class="d-flex overflow-auto" >}}
+{{< placeholder width="140" height="80" class="object-fit-sm-contain border rounded" text="Contain on sm" markup="img" color="#868e96" background="#dee2e6" >}}
+{{< placeholder width="140" height="80" class="object-fit-md-contain border rounded" text="Contain on md" markup="img" color="#868e96" background="#dee2e6" >}}
+{{< placeholder width="140" height="80" class="object-fit-lg-contain border rounded" text="Contain on lg" markup="img" color="#868e96" background="#dee2e6" >}}
+{{< placeholder width="140" height="80" class="object-fit-xl-contain border rounded" text="Contain on xl" markup="img" color="#868e96" background="#dee2e6" >}}
+{{< placeholder width="140" height="80" class="object-fit-xxl-contain border rounded" text="Contain on xxl" markup="img" color="#868e96" background="#dee2e6" >}}
+{{< /example >}}
+
+## Video
+
+The `.object-fit-{value}` and responsive `.object-fit-{breakpoint}-{value}` utilities also work on `<video>` elements.
+
+```html
+<video src="..." class="object-fit-contain" autoplay></video>
+<video src="..." class="object-fit-cover" autoplay></video>
+<video src="..." class="object-fit-fill" autoplay></video>
+<video src="..." class="object-fit-scale" autoplay></video>
+<video src="..." class="object-fit-none" autoplay></video>
+```
+
+## CSS
+
+### Sass utilities API
+
+Object fit utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-object-fit" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.1/utilities/opacity.md b/site/content/docs/5.3/utilities/opacity.md
index a2fdc3807..1cf4696cc 100644
--- a/site/content/docs/5.1/utilities/opacity.md
+++ b/site/content/docs/5.3/utilities/opacity.md
@@ -3,6 +3,8 @@ layout: docs
 title: Opacity
 description: Control the opacity of elements.
 group: utilities
+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.
@@ -14,6 +16,7 @@ Set the `opacity` of an element using `.opacity-{value}` utilities.
   <div class="opacity-75 p-3 m-2 bg-primary text-light fw-bold rounded">75%</div>
   <div class="opacity-50 p-3 m-2 bg-primary text-light fw-bold rounded">50%</div>
   <div class="opacity-25 p-3 m-2 bg-primary text-light fw-bold rounded">25%</div>
+  <div class="opacity-0 p-3 m-2 bg-primary text-light fw-bold rounded">0%</div>
 </div>
 
 ```html
@@ -21,9 +24,12 @@ Set the `opacity` of an element using `.opacity-{value}` utilities.
 <div class="opacity-75">...</div>
 <div class="opacity-50">...</div>
 <div class="opacity-25">...</div>
+<div class="opacity-0">...</div>
 ```
 
-### Utilities API
+## CSS
+
+### Sass utilities API
 
 Opacity utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.3/utilities/overflow.md b/site/content/docs/5.3/utilities/overflow.md
new file mode 100644
index 000000000..9c8573c33
--- /dev/null
+++ b/site/content/docs/5.3/utilities/overflow.md
@@ -0,0 +1,99 @@
+---
+layout: docs
+title: Overflow
+description: Use these shorthand utilities for quickly configuring how content overflows an element.
+group: utilities
+toc: true
+---
+
+## Overflow
+
+Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default.
+
+<div class="bd-example d-md-flex">
+  <div class="overflow-auto p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
+    This is an example of using <code>.overflow-auto</code> on an element with set width and height dimensions. By design, this content will vertically scroll.
+  </div>
+  <div class="overflow-hidden p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
+    This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions.
+  </div>
+  <div class="overflow-visible p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
+    This is an example of using <code>.overflow-visible</code> on an element with set width and height dimensions.
+  </div>
+  <div class="overflow-scroll p-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
+    This is an example of using <code>.overflow-scroll</code> on an element with set width and height dimensions.
+  </div>
+</div>
+
+```html
+<div class="overflow-auto">...</div>
+<div class="overflow-hidden">...</div>
+<div class="overflow-visible">...</div>
+<div class="overflow-scroll">...</div>
+```
+
+### `overflow-x`
+
+Adjust the `overflow-x` property to affect the overflow of content horizontally.
+
+<div class="bd-example d-md-flex">
+  <div class="overflow-x-auto p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px; white-space: nowrap;">
+    <div><code>.overflow-x-auto</code> example on an element</div>
+    <div> with set width and height dimensions.</div>
+  </div>
+  <div class="overflow-x-hidden p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
+    <div><code>.overflow-x-hidden</code> example</div>
+    <div>on an element with set width and height dimensions.</div>
+  </div>
+  <div class="overflow-x-visible p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
+    <div><code>.overflow-x-visible</code> example </div>
+    <div>on an element with set width and height dimensions.</div>
+  </div>
+  <div class="overflow-x-scroll p-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
+    <div><code>.overflow-x-scroll</code> example on an element</div>
+    <div> with set width and height dimensions.</div>
+  </div>
+</div>
+
+```html
+<div class="overflow-x-auto">...</div>
+<div class="overflow-x-hidden">...</div>
+<div class="overflow-x-visible">...</div>
+<div class="overflow-x-scroll">...</div>
+```
+
+### `overflow-y`
+
+Adjust the `overflow-y` property to affect the overflow of content vertically.
+
+<div class="bd-example d-md-flex">
+  <div class="overflow-y-auto p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
+    <code>.overflow-y-auto</code> example on an element with set width and height dimensions.
+  </div>
+  <div class="overflow-y-hidden p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
+    <code>.overflow-y-hidden</code> example on an element with set width and height dimensions.
+  </div>
+  <div class="overflow-y-visible p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
+    <code>.overflow-y-visible</code> example on an element with set width and height dimensions.
+  </div>
+  <div class="overflow-y-scroll p-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
+    <code>.overflow-y-scroll</code> example on an element with set width and height dimensions.
+  </div>
+</div>
+
+```html
+<div class="overflow-y-auto">...</div>
+<div class="overflow-y-hidden">...</div>
+<div class="overflow-y-visible">...</div>
+<div class="overflow-y-scroll">...</div>
+```
+
+Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.
+
+## CSS
+
+### Sass utilities API
+
+Overflow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-overflow" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.1/utilities/position.md b/site/content/docs/5.3/utilities/position.md
index 46e62dd36..76df92630 100644
--- a/site/content/docs/5.1/utilities/position.md
+++ b/site/content/docs/5.3/utilities/position.md
@@ -88,14 +88,14 @@ By adding `.translate-middle-x` or `.translate-middle-y` classes, elements can b
 
 Here are some real life examples of these classes:
 
-{{< example class="bd-example-position-examples d-flex justify-content-around" >}}
+{{< example class="bd-example-position-examples d-flex justify-content-around align-items-center" >}}
 <button type="button" class="btn btn-primary position-relative">
-  Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
+  Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
 </button>
 
-<button type="button" class="btn btn-dark position-relative">
-  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1 bi bi-caret-down-fill" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
-</button>
+<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill">
+  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
+</div>
 
 <button type="button" class="btn btn-primary position-relative">
   Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
@@ -106,8 +106,8 @@ You can use these classes with existing components to create new ones. Remember
 
 {{< example class="bd-example-position-examples" >}}
 <div class="position-relative m-4">
-  <div class="progress" style="height: 1px;">
-    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+  <div class="progress" role="progressbar" aria-label="Progress" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: 1px;">
+    <div class="progress-bar" style="width: 50%"></div>
   </div>
   <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
   <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
@@ -115,15 +115,15 @@ You can use these classes with existing components to create new ones. Remember
 </div>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Maps
+### Sass maps
 
 Default position utility values are declared in a Sass map, then used to generate our utilities.
 
 {{< scss-docs name="position-map" file="scss/_variables.scss" >}}
 
-### Utilities API
+### Sass utilities API
 
 Position utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.1/utilities/shadows.md b/site/content/docs/5.3/utilities/shadows.md
index bb5ef44ab..94868a119 100644
--- a/site/content/docs/5.1/utilities/shadows.md
+++ b/site/content/docs/5.3/utilities/shadows.md
@@ -10,20 +10,20 @@ toc: true
 
 While shadows on components are disabled by default in Bootstrap and can be enabled via `$enable-shadows`, you can also quickly add or remove a shadow with our `box-shadow` utility classes. Includes support for `.shadow-none` and three default sizes (which have associated variables to match).
 
-{{< example >}}
-<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
-<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
-<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
-<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>
+{{< example class="overflow-hidden" >}}
+<div class="shadow-none p-3 mb-5 bg-body-tertiary rounded">No shadow</div>
+<div class="shadow-sm p-3 mb-5 bg-body-tertiary rounded">Small shadow</div>
+<div class="shadow p-3 mb-5 bg-body-tertiary rounded">Regular shadow</div>
+<div class="shadow-lg p-3 mb-5 bg-body-tertiary rounded">Larger shadow</div>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
 
 {{< scss-docs name="box-shadow-variables" file="scss/_variables.scss" >}}
 
-### Utilities API
+### Sass utilities API
 
 Shadow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.3/utilities/sizing.md b/site/content/docs/5.3/utilities/sizing.md
new file mode 100644
index 000000000..f5881729e
--- /dev/null
+++ b/site/content/docs/5.3/utilities/sizing.md
@@ -0,0 +1,62 @@
+---
+layout: docs
+title: Sizing
+description: Easily make an element as wide or as tall with our width and height utilities.
+group: utilities
+toc: true
+---
+
+## Relative to the parent
+
+Width and height utilities are generated from the utility API in `_utilities.scss`. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default. Modify those values as you need to generate different utilities here.
+
+{{< example class="bd-example-flex" >}}
+<div class="w-25 p-3">Width 25%</div>
+<div class="w-50 p-3">Width 50%</div>
+<div class="w-75 p-3">Width 75%</div>
+<div class="w-100 p-3">Width 100%</div>
+<div class="w-auto p-3">Width auto</div>
+{{< /example >}}
+
+{{< example class="bd-example-flex" >}}
+<div style="height: 100px;">
+  <div class="h-25 d-inline-block" style="width: 120px;">Height 25%</div>
+  <div class="h-50 d-inline-block" style="width: 120px;">Height 50%</div>
+  <div class="h-75 d-inline-block" style="width: 120px;">Height 75%</div>
+  <div class="h-100 d-inline-block" style="width: 120px;">Height 100%</div>
+  <div class="h-auto d-inline-block" style="width: 120px;">Height auto</div>
+</div>
+{{< /example >}}
+
+You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
+
+{{< example class="bd-example-flex" >}}
+<div style="width: 50%; height: 100px;">
+  <div class="mw-100" style="width: 200%;">Max-width 100%</div>
+</div>
+{{< /example >}}
+
+{{< example class="bd-example-flex" >}}
+<div style="height: 100px;">
+  <div class="mh-100" style="width: 100px; height: 200px;">Max-height 100%</div>
+</div>
+{{< /example >}}
+
+## Relative to the viewport
+
+You can also use utilities to set the width and height relative to the viewport.
+
+```html
+<div class="min-vw-100">Min-width 100vw</div>
+<div class="min-vh-100">Min-height 100vh</div>
+<div class="vw-100">Width 100vw</div>
+<div class="vh-100">Height 100vh</div>
+```
+
+## CSS
+
+### Sass utilities API
+
+Sizing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-sizing" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.1/utilities/spacing.md b/site/content/docs/5.3/utilities/spacing.md
index 70fbe7694..2562b8d43 100644
--- a/site/content/docs/5.1/utilities/spacing.md
+++ b/site/content/docs/5.3/utilities/spacing.md
@@ -10,7 +10,9 @@ toc: true
 
 Assign responsive-friendly `margin` or `padding` values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from `.25rem` to `3rem`.
 
-Using the CSS Grid layout module? Consider using [the gap utility](#gap).
+{{< callout >}}
+**Using the CSS Grid layout module?** Consider using [the gap utility](#gap) instead.
+{{< /callout >}}
 
 ### Notation
 
@@ -73,13 +75,13 @@ Here are some representative examples of these classes:
 Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a `width` set—by setting the horizontal margins to `auto`.
 
 <div class="bd-example">
-  <div class="mx-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
+  <div class="mx-auto p-2" style="width: 200px; background-color: rgba(var(--bd-violet-rgb),.15); border: rgba(var(--bd-violet-rgb),.3) solid 1px;">
     Centered element
   </div>
 </div>
 
 ```html
-<div class="mx-auto" style="width: 200px;">
+<div class="mx-auto p-2" style="width: 200px;">
   Centered element
 </div>
 ```
@@ -98,27 +100,54 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
 
 ## Gap
 
-When using `display: grid`, you can make use of `gap` utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a `display: grid` container). Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
+When using `display: grid` or `display: flex`, you can make use of `gap` utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
 
-{{< example html >}}
-<div class="d-grid gap-3">
-  <div class="p-2 bg-light border">Grid item 1</div>
-  <div class="p-2 bg-light border">Grid item 2</div>
-  <div class="p-2 bg-light border">Grid item 3</div>
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid gap-3">
+  <div class="p-2 g-col-6">Grid item 1</div>
+  <div class="p-2 g-col-6">Grid item 2</div>
+  <div class="p-2 g-col-6">Grid item 3</div>
+  <div class="p-2 g-col-6">Grid item 4</div>
 </div>
 {{< /example >}}
 
 Support includes responsive options for all of Bootstrap's grid breakpoints, as well as six sizes from the `$spacers` map (`0`–`5`). There is no `.gap-auto` utility class as it's effectively the same as `.gap-0`.
 
-## Sass
+### row-gap
 
-### Maps
+`row-gap` sets the vertical space between children items in the specified container.
+
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid gap-0 row-gap-3">
+  <div class="p-2 g-col-6">Grid item 1</div>
+  <div class="p-2 g-col-6">Grid item 2</div>
+  <div class="p-2 g-col-6">Grid item 3</div>
+  <div class="p-2 g-col-6">Grid item 4</div>
+</div>
+{{< /example >}}
+
+### column-gap
+
+`column-gap` sets the horizontal space between children items in the specified container.
+
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid gap-0 column-gap-3">
+  <div class="p-2 g-col-6">Grid item 1</div>
+  <div class="p-2 g-col-6">Grid item 2</div>
+  <div class="p-2 g-col-6">Grid item 3</div>
+  <div class="p-2 g-col-6">Grid item 4</div>
+</div>
+{{< /example >}}
+
+## CSS
+
+### Sass maps
 
 Spacing utilities are declared via Sass map and then generated with our utilities API.
 
 {{< scss-docs name="spacer-variables-maps" file="scss/_variables.scss" >}}
 
-### Utilities API
+### Sass utilities API
 
 Spacing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.1/utilities/text.md b/site/content/docs/5.3/utilities/text.md
index be8e0e1c0..345b277e8 100644
--- a/site/content/docs/5.1/utilities/text.md
+++ b/site/content/docs/5.3/utilities/text.md
@@ -15,10 +15,11 @@ Easily realign text to components with text alignment classes. For start, end, a
 <p class="text-center">Center aligned text on all viewport sizes.</p>
 <p class="text-end">End aligned text on all viewport sizes.</p>
 
-<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
-<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
-<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
-<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>
+<p class="text-sm-end">End aligned text on viewports sized SM (small) or wider.</p>
+<p class="text-md-end">End aligned text on viewports sized MD (medium) or wider.</p>
+<p class="text-lg-end">End aligned text on viewports sized LG (large) or wider.</p>
+<p class="text-xl-end">End aligned text on viewports sized XL (extra large) or wider.</p>
+<p class="text-xxl-end">End aligned text on viewports sized XXL (extra extra large) or wider.</p>
 {{< /example >}}
 
 {{< callout info >}}
@@ -30,7 +31,7 @@ Note that we don't provide utility classes for justified text. While, aesthetica
 Wrap text with a `.text-wrap` class.
 
 {{< example >}}
-<div class="badge bg-primary text-wrap" style="width: 6rem;">
+<div class="badge text-bg-primary text-wrap" style="width: 6rem;">
   This text should wrap.
 </div>
 {{< /example >}}
@@ -38,7 +39,7 @@ Wrap text with a `.text-wrap` class.
 Prevent text from wrapping with a `.text-nowrap` class.
 
 {{< example >}}
-<div class="text-nowrap bd-highlight" style="width: 8rem;">
+<div class="text-nowrap bg-body-secondary border" style="width: 8rem;">
   This text should overflow the parent.
 </div>
 {{< /example >}}
@@ -57,7 +58,7 @@ Note that [breaking words isn't possible in Arabic](https://rtlstyling.com/posts
 
 ## Text transform
 
-Transform text in components with text capitalization classes.
+Transform text in components with our text capitalization classes: `text-lowercase`, `text-uppercase` or `text-capitalize`.
 
 {{< example >}}
 <p class="text-lowercase">Lowercased text.</p>
@@ -89,6 +90,8 @@ Quickly change the `font-weight` or `font-style` of text with these utilities. `
 {{< example >}}
 <p class="fw-bold">Bold text.</p>
 <p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
+<p class="fw-semibold">Semibold weight text.</p>
+<p class="fw-medium">Medium weight text.</p>
 <p class="fw-normal">Normal weight text.</p>
 <p class="fw-light">Light weight text.</p>
 <p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
@@ -120,8 +123,8 @@ Change a selection to our monospace font stack with `.font-monospace`.
 Reset a text or link's color with `.text-reset`, so that it inherits the color from its parent.
 
 {{< example >}}
-<p class="text-muted">
-  Muted text with a <a href="#" class="text-reset">reset link</a>.
+<p class="text-body-secondary">
+  Secondary body text with a <a href="#" class="text-reset">reset link</a>.
 </p>
 {{< /example >}}
 
@@ -135,19 +138,23 @@ Decorate text in components with text decoration classes.
 <a href="#" class="text-decoration-none">This link has its text decoration removed</a>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
+
+Default type and font related Sass variables:
 
 {{< scss-docs name="font-variables" file="scss/_variables.scss" >}}
 
-### Maps
+### Sass maps
 
 Font-size utilities are generated from this map, in combination with our utilities API.
 
 {{< scss-docs name="font-sizes" file="scss/_variables.scss" >}}
 
-### Utilities API
+{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}}
+
+### Sass utilities API
 
 Font and text utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.1/utilities/vertical-align.md b/site/content/docs/5.3/utilities/vertical-align.md
index 9fe0eeb93..c24e6616f 100644
--- a/site/content/docs/5.1/utilities/vertical-align.md
+++ b/site/content/docs/5.3/utilities/vertical-align.md
@@ -39,9 +39,9 @@ With table cells:
 </table>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Utilities API
+### Sass utilities API
 
 Vertical align utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.1/utilities/visibility.md b/site/content/docs/5.3/utilities/visibility.md
index 61eb30241..e2c6bb6b8 100644
--- a/site/content/docs/5.1/utilities/visibility.md
+++ b/site/content/docs/5.3/utilities/visibility.md
@@ -28,9 +28,9 @@ Apply `.visible` or `.invisible` as needed.
 }
 ```
 
-## Sass
+## CSS
 
-### Utilities API
+### Sass utilities API
 
 Visibility utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.3/utilities/z-index.md b/site/content/docs/5.3/utilities/z-index.md
new file mode 100644
index 000000000..80b8dba92
--- /dev/null
+++ b/site/content/docs/5.3/utilities/z-index.md
@@ -0,0 +1,51 @@
+---
+layout: docs
+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:
+  version: "5.3"
+---
+
+## Example
+
+Use `z-index` utilities to stack elements on top of one another. Requires a `position` value other than `static`, which can be set with custom styles or using our [position utilities]({{< docsref "/utilities/position/" >}}).
+
+{{< callout >}}
+We call these "low-level" `z-index` utilities because of their default values of `-1` through `3`, which we use for the layout of overlapping components. High-level `z-index` values are used for overlay components like modals and tooltips.
+{{< /callout >}}
+
+{{< example class="bd-example-zindex-levels position-relative" >}}
+<div class="z-3 position-absolute p-5 rounded-3"><span>z-3</span></div>
+<div class="z-2 position-absolute p-5 rounded-3"><span>z-2</span></div>
+<div class="z-1 position-absolute p-5 rounded-3"><span>z-1</span></div>
+<div class="z-0 position-absolute p-5 rounded-3"><span>z-0</span></div>
+<div class="z-n1 position-absolute p-5 rounded-3"><span>z-n1</span></div>
+{{< /example >}}
+
+## Overlays
+
+Bootstrap overlay components—dropdown, modal, offcanvas, popover, toast, and tooltip—all have their own `z-index` values to ensure a usable experience with competing "layers" of an interface.
+
+Read about them in the [`z-index` layout page]({{< docsref "/layout/z-index" >}}).
+
+## Component approach
+
+On some components, we use our low-level `z-index` values to manage repeating elements that overlap one another (like buttons in a button group or items in a list group).
+
+Learn about our [`z-index` approach]({{< docsref "/extend/approach#z-index-scales" >}}).
+
+## CSS
+
+### Sass maps
+
+Customize this Sass map to change the available values and generated utilities.
+
+{{< scss-docs name="zindex-levels-map" file="scss/_variables.scss" >}}
+
+### Sass utilities API
+
+Position utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-zindex" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/_index.html b/site/content/docs/_index.html
index 198e6af8c..f182bde37 100644
--- a/site/content/docs/_index.html
+++ b/site/content/docs/_index.html
@@ -1,5 +1,6 @@
 ---
 layout: redirect
-sitemap_exclude: true
-redirect: "/docs/5.1/getting-started/introduction/"
+sitemap:
+  disable: true
+redirect: "/docs/5.3/getting-started/introduction/"
 ---
diff --git a/site/content/docs/versions.md b/site/content/docs/versions.md
index 2f1e3356b..a61388391 100644
--- a/site/content/docs/versions.md
+++ b/site/content/docs/versions.md
@@ -9,14 +9,14 @@ description: An appendix of hosted documentation for nearly every release of Boo
   <div class="col-md-6 col-lg-4 col-xl mb-4">
     <h2>{{ $release.group }}</h2>
     <p>{{ $release.description }}</p>
-    {{- $versions := sort $release.versions "v" "desc" -}}
+    {{- $versions := sort $release.versions "" "desc" -}}
     {{- range $i, $version := $versions }}
       {{- $len := len $versions -}}
       {{ if (eq $i 0) }}<div class="list-group">{{ end }}
-        <a class="list-group-item list-group-item-action py-2 text-primary{{ if (eq $version.v $.Site.Params.docs_version) }} d-flex justify-content-between align-items-center{{ end }}" href="{{ $release.baseurl }}/{{ $version.v }}/">
-          {{ $version.v }}
-          {{ if (eq $version.v $.Site.Params.docs_version) -}}
-          <span class="badge bg-primary">Latest</span>
+        <a class="list-group-item list-group-item-action py-2 text-primary{{ if (eq $version $.Site.Params.docs_version) }} d-flex justify-content-between align-items-center{{ end }}" href="{{ urls.JoinPath $release.baseurl $version "/" }}">
+          {{ $version }}
+          {{ if (eq $version $.Site.Params.docs_version) -}}
+          <span class="badge text-bg-primary">Latest</span>
           {{- end }}
         </a>
       {{ if (eq (add $i 1) $len) }}</div>{{ end }}