Merge branch 'main' into prepare-523

2026-06-20 20:00:36 +03:00 · 2022-11-22 09:51:29 +02:00
parent cb021439c6 abdd3fef1f
commit 8f6de23682
156 changed files with 2626 additions and 1974 deletions
@@ -1,15 +1,28 @@
 {
+  "extends": "../.eslintrc.json",
  "env": {
    "browser": true,
    "node": false
  },
+  "parserOptions": {
+    "sourceType": "script"
+  },
  "plugins": [
    "markdown"
  ],
+  "rules": {
+    "no-new": "off",
+    "strict": "error",
+    "unicorn/no-array-for-each": "off",
+    "unicorn/numeric-separators-style": "off",
+    "unicorn/prefer-node-protocol": "off"
+  },
  "overrides": [
    {
      // 2. Enable the Markdown processor for all .md files.
-      "files": ["./**/*.md"],
+      "files": [
+        "./**/*.md"
+      ],
      "processor": "markdown/markdown"
    },
    {
@@ -28,27 +41,15 @@
      },
      "rules": {
        "no-array-for-each": "off",
+        "no-labels": "off",
+        "no-redeclare": "off",
        "no-undef": "off",
-        "no-unused-vars": "off",
-        "unicorn/no-array-for-each": "off",
-        "unicorn/numeric-separators-style": "off",
        "no-unused-expressions": "off",
        "no-unused-labels": "off",
-        "no-labels": "off",
-        "no-redeclare": "off"
+        "no-unused-vars": "off",
+        "unicorn/no-array-for-each": "off",
+        "unicorn/numeric-separators-style": "off"
      }
    }
-  ],
-  "parserOptions": {
-    "sourceType": "script"
-  },
-  "extends": "../.eslintrc.json",
-  "rules": {
-    "no-new": "off",
-    "prefer-template": "error",
-    "strict": "error",
-    "unicorn/no-array-for-each": "off",
-    "unicorn/numeric-separators-style": "off",
-    "unicorn/prefer-node-protocol": "off"
-  }
+  ]
 }
@@ -208,8 +208,14 @@
 }

 // Tooltips
-.tooltip-demo a {
-  white-space: nowrap;
+.tooltip-demo {
+  a {
+    white-space: nowrap;
+  }
+
+  .btn {
+    margin: .25rem .125rem;
+  }
 }

 // scss-docs-start custom-tooltip
@@ -302,6 +308,32 @@
  min-height: 240px;
 }

+.bd-example-zindex-levels {
+  min-height: 15rem;
+
+  > div {
+    background-color: tint-color($bd-violet, 75%);
+    border: 1px solid tint-color($bd-violet, 50%);
+  }
+
+  > :nth-child(2) {
+    top: 3rem;
+    left: 3rem;
+  }
+  > :nth-child(3) {
+    top: 4.5rem;
+    left: 4.5rem;
+  }
+  > :nth-child(4) {
+    top: 6rem;
+    left: 6rem;
+  }
+  > :nth-child(5) {
+    top: 7.5rem;
+    left: 7.5rem;
+  }
+}
+
 //
 // Code snippets
 //
@@ -94,3 +94,13 @@
  background-color: var(--bd-accent);
  box-shadow: inset 0 -1px 1px rgba(var(--bs-body-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--bs-body-bg-rgb), .75);
 }
+
+.animate-img {
+  > img {
+    transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
+  }
+
+  &:hover > img {
+    transform: scale(1.1);
+  }
+}
@@ -14,7 +14,7 @@ toc: true
 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`.

 {{< callout info >}}
-{{< partial "callout-info-prefersreducedmotion.md" >}}
+{{< partial "callouts/info-prefersreducedmotion.md" >}}
 {{< /callout >}}

 ## Example
@@ -20,7 +20,7 @@ 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
@@ -74,7 +74,7 @@ Set a `background-color` with contrasting foreground `color` with [our `.text-bg
 {{< /example >}}

 {{< callout info >}}
-{{< partial "callout-warning-color-assistive-technologies.md" >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
 {{< /callout >}}

 ## Pill badges
@@ -21,7 +21,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
@@ -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>
@@ -436,7 +436,7 @@ Set a `background-color` with contrasting foreground `color` with [our `.text-bg
 {{< /example >}}

 {{< callout info >}}
-{{< partial "callout-warning-color-assistive-technologies.md" >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
 {{< /callout >}}

 ### Border
@@ -13,7 +13,7 @@ The carousel is a slideshow for cycling through a series of content, built with
 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.).

 {{< callout info >}}
-{{< partial "callout-info-prefersreducedmotion.md" >}}
+{{< partial "callouts/info-prefersreducedmotion.md" >}}
 {{< /callout >}}

 Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
@@ -331,7 +331,7 @@ const carousel = new bootstrap.Carousel('#myCarousel')
 ### 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:
@@ -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,7 +22,7 @@ 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>
@@ -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,10 +63,10 @@ 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>
@@ -153,7 +153,7 @@ const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Co
 ### 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`.
@@ -18,15 +18,15 @@ The [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessib

 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">
@@ -41,7 +41,7 @@ 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">
@@ -378,9 +378,9 @@ 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="#" 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>
+          </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>
@@ -956,7 +956,7 @@ By default, the dropdown menu is closed when clicking inside or outside the drop

 <div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
-    Clickable outside
+    Clickable inside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
@@ -967,7 +967,7 @@ By default, the dropdown menu is closed when clicking inside or outside the drop

 <div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
-    Clickable inside
+    Clickable outside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
@@ -1069,7 +1069,7 @@ Regardless of whether you call your dropdown via JavaScript or instead use the d
 {{< 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. |
+| `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). |
@@ -183,7 +183,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
@@ -443,7 +443,7 @@ To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane
 ### Methods

 {{< callout danger >}}
-{{< partial "callout-danger-async-methods.md" >}}
+{{< partial "callouts/danger-async-methods.md" >}}
 {{< /callout >}}

 Activates your content as a tab element.
@@ -27,7 +27,7 @@ myModal.addEventListener('shown.bs.modal', () => {
 ```

 {{< callout info >}}
-{{< partial "callout-info-prefersreducedmotion.md" >}}
+{{< partial "callouts/info-prefersreducedmotion.md" >}}
 {{< /callout >}}

 Keep reading for demos and usage guidelines.
@@ -329,7 +329,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
      </div>
      <div class="modal-body">
        <h2 class="fs-5">Popover in a modal</h2>
-        <p>This <a href="#" role="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</a> triggers a popover on click.</p>
+        <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>
        <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>
@@ -351,7 +351,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 ```html
 <div class="modal-body">
  <h2 class="fs-5">Popover in a modal</h2>
-  <p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
+  <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>
  <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>
@@ -537,7 +537,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
@@ -841,7 +841,7 @@ const myModalAlternative = new bootstrap.Modal('#myModal', options)
 ### Methods

 {{< callout danger >}}
-{{< partial "callout-danger-async-methods.md" >}}
+{{< partial "callouts/danger-async-methods.md" >}}
 {{< /callout >}}

 #### Passing options
@@ -858,8 +858,8 @@ const myModal = new bootstrap.Modal('#myModal', {
 | 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. |
+| `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)`. |
@@ -19,7 +19,7 @@ Here's what you need to know before getting started with the navbar:
 - **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
@@ -622,7 +622,7 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a
 ### Methods

 {{< callout danger >}}
-{{< partial "callout-danger-async-methods.md" >}}
+{{< partial "callouts/danger-async-methods.md" >}}
 {{< /callout >}}

 Activates your content as a tab element.
@@ -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
@@ -310,7 +310,7 @@ const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap
 ### 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`.
@@ -126,7 +126,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">
@@ -22,11 +22,11 @@ Things to know when using the popover plugin:
 - Popovers can be triggered thanks to an element inside a shadow DOM.

 {{< callout info >}}
-{{< partial "callout-info-sanitizer.md" >}}
+{{< partial "callouts/info-sanitizer.md" >}}
 {{< /callout >}}

 {{< callout info >}}
-{{< partial "callout-info-prefersreducedmotion.md" >}}
+{{< partial "callouts/info-prefersreducedmotion.md" >}}
 {{< /callout >}}

 Keep reading to see how popovers work with some examples.
@@ -47,7 +47,7 @@ const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstra
 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 "callout-warning-data-bs-title-vs-title.md" >}}
+{{< partial "callouts/warning-data-bs-title-vs-title.md" >}}
 {{< /callout >}}

 {{< example stackblitz_add_js="true" >}}
@@ -171,7 +171,7 @@ To allow keyboard users to activate your popovers, you should only add them to H

 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.
+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
@@ -228,7 +228,7 @@ const popover = new bootstrap.Popover(element, {
 ### Methods

 {{< callout danger >}}
-{{< partial "callout-danger-async-methods.md" >}}
+{{< partial "callouts/danger-async-methods.md" >}}
 {{< /callout >}}

 {{< bs-table "table" >}}
@@ -238,7 +238,7 @@ const popover = new bootstrap.Popover(element, {
 | `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. |
+| `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. |
@@ -86,7 +86,7 @@ Use background utility classes to change the appearance of individual progress b
 {{< /example >}}

 {{< callout info >}}
-{{< partial "callout-warning-color-assistive-technologies.md" >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
 {{< /callout >}}

 ## Multiple bars
@@ -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
@@ -205,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" >}}
@@ -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
@@ -368,7 +368,7 @@ const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, o
 ### Methods

 {{< callout danger >}}
-{{< partial "callout-danger-async-methods.md" >}}
+{{< partial "callouts/danger-async-methods.md" >}}
 {{< /callout >}}

 {{< bs-table "table" >}}
@@ -23,11 +23,11 @@ Things to know when using the tooltip plugin:
 Got all that? Great, let's see how they work with some examples.

 {{< callout info >}}
-{{< partial "callout-info-sanitizer.md" >}}
+{{< partial "callouts/info-sanitizer.md" >}}
 {{< /callout >}}

 {{< callout info >}}
-{{< partial "callout-info-prefersreducedmotion.md" >}}
+{{< partial "callouts/info-prefersreducedmotion.md" >}}
 {{< /callout >}}

 ## Examples
@@ -51,7 +51,7 @@ Hover over the links below to see tooltips:
 {{< /example >}}

 {{< callout warning >}}
-{{< partial "callout-warning-data-bs-title-vs-title.md" >}}
+{{< partial "callouts/warning-data-bs-title-vs-title.md" >}}
 {{< /callout >}}

 ### Custom tooltips
@@ -246,7 +246,7 @@ const tooltip = new bootstrap.Tooltip(element, {
 ### Methods

 {{< callout danger >}}
-{{< partial "callout-danger-async-methods.md" >}}
+{{< partial "callouts/danger-async-methods.md" >}}
 {{< /callout >}}

 {{< bs-table "table" >}}
@@ -176,7 +176,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
@@ -363,7 +363,7 @@ These changes, and more, are demonstrated below.
 </form>

 {{< callout warning >}}
-{{< partial "callout-warning-input-support.md" >}}
+{{< partial "callouts/warning-input-support.md" >}}
 {{< /callout >}}

 ### Pointers on buttons
@@ -69,7 +69,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
@@ -117,7 +117,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
@@ -3,9 +3,9 @@ layout: examples
 title: مثال إتمام الشراء
 direction: rtl
 extra_css:
-  - "../checkout/form-validation.css"
+  - "../checkout/checkout.css"
 extra_js:
-  - src: "../checkout/form-validation.js"
+  - src: "../checkout/checkout.js"
 body_class: "bg-light"
 ---

@@ -2,9 +2,9 @@
 layout: examples
 title: Checkout example
 extra_css:
-  - "form-validation.css"
+  - "checkout.css"
 extra_js:
-  - src: "form-validation.js"
+  - src: "checkout.js"
 body_class: "bg-light"
 ---

@@ -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` */
 }
@@ -24,7 +24,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>

@@ -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">
@@ -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">
@@ -2,7 +2,7 @@
 layout: examples
 title: Navbar Template
 extra_css:
-  - "navbar.css"
+  - "navbars-offcanvas.css"
 ---

 <main>
@@ -2,7 +2,7 @@
 layout: examples
 title: Navbar Template
 extra_css:
-  - "navbar.css"
+  - "navbars.css"
 ---

 <main>
@@ -400,6 +400,40 @@ extra_css:
      </div>
    </nav>

+    <nav class="navbar navbar-expand-lg bg-light rounded" aria-label="Thirtheenth navbar example">
+      <div class="container-fluid">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample11" aria-controls="navbarsExample11" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse d-lg-flex" id="navbarsExample11">
+          <a class="navbar-brand col-lg-3 me-0" href="#">Centered nav</a>
+          <ul class="navbar-nav col-lg-6 justify-content-lg-center">
+            <li class="nav-item">
+              <a class="nav-link active" aria-current="page" href="#">Home</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Link</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link disabled">Disabled</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
+              <ul class="dropdown-menu">
+                <li><a class="dropdown-item" href="#">Action</a></li>
+                <li><a class="dropdown-item" href="#">Another action</a></li>
+                <li><a class="dropdown-item" href="#">Something else here</a></li>
+              </ul>
+            </li>
+          </ul>
+          <div class="d-lg-flex col-lg-3 justify-content-lg-end">
+            <button class="btn btn-primary">Button</button>
+          </div>
+        </div>
+      </div>
+    </nav>
+
    <div>
      <div class="bg-light p-5 rounded">
        <div class="col-sm-8 mx-auto">
@@ -2,9 +2,9 @@
 layout: examples
 title: Offcanvas navbar template
 extra_css:
-  - "offcanvas.css"
+  - "offcanvas-navbar.css"
 extra_js:
-  - src: "offcanvas.js"
+  - src: "offcanvas-navbar.js"
 body_class: "bg-light"
 aliases: "/docs/5.2/examples/offcanvas/"
 ---
@@ -2,7 +2,7 @@
 layout: examples
 title: Signin Template
 extra_css:
-  - "signin.css"
+  - "sign-in.css"
 body_class: "text-center"
 include_js: false
 ---
@@ -65,7 +65,7 @@ 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

@@ -304,4 +304,10 @@ Different variants of `.btn`, such at the various outlined styles, are supported

 ### 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" >}}
@@ -75,6 +75,34 @@ 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="name@example.com" 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></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.
@@ -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">
+  </div>
+  <div class="form-text">Example help text goes outside the input group.</div>
 </div>

 <div class="input-group mb-3">
@@ -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.
@@ -159,7 +159,7 @@ 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.

@@ -14,7 +14,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.
@@ -33,7 +33,7 @@ Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/packag
 {{< /bs-table >}}

 {{< callout info >}}
-{{< partial "callout-info-npm-starter.md" >}}
+{{< partial "callouts/info-npm-starter.md" >}}
 {{< /callout >}}

 ## Sass
@@ -71,7 +71,7 @@ Bootstrap's `package.json` contains some additional metadata under the following
 - `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
@@ -35,6 +35,7 @@ We're building a Vite project with Bootstrap from scratch, so there are some pre
   ```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
@@ -1,6 +1,6 @@
 ---
 layout: docs
-title: Color & background
+title: Color and background
 description: Set a background color with contrasting foreground color.
 group: helpers
 toc: true
@@ -9,8 +9,6 @@ added: "5.2"

 ## Overview

-{{< added-in "5.2.0" >}}
-
 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 >}}
@@ -94,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) { ... }`
@@ -135,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
@@ -150,7 +150,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
 - 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>.
+- Added new keyboard shortcut for the search field: <kbd><kbd>Ctrl</kbd> + <kbd>/</kbd></kbd>.

 ## Sass

@@ -457,7 +457,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co

 - <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.
+- <span class="badge 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.

@@ -139,6 +139,14 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from
 {{< 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
@@ -28,7 +28,7 @@ Colorize text with color utilities. If you want to colorize links, you can use t
 {{< /callout >}}

 {{< callout info >}}
-{{< partial "callout-warning-color-assistive-technologies.md" >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
 {{< /callout >}}

 ## Opacity
@@ -64,8 +64,8 @@ To show an element only on a given interval of screen sizes you can combine one
 | 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` |
-| Hidden only on xxl | `.d-xxl-none .d-xxl-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` |
@@ -363,21 +363,20 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (

 <div class="bd-example bd-example-flex">
  <div class="d-flex flex-wrap">
-    <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 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>

@@ -389,21 +388,20 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (

 <div class="bd-example bd-example-flex">
  <div class="d-flex flex-wrap-reverse">
-    <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 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>

@@ -464,7 +462,7 @@ Additionally there are also responsive `.order-first` and `.order-last` classes

 ## 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.
+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.

@@ -31,7 +31,7 @@ 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

@@ -0,0 +1,61 @@
+---
+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
+---
+
+## 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" >}}
+{{< placeholder width="140" height="120" class="object-fit-cover border rounded" text="Object fit cover" markup="img" >}}
+{{< placeholder width="140" height="120" class="object-fit-fill border rounded" text="Object fit fill" markup="img" >}}
+{{< placeholder width="140" height="120" class="object-fit-scale border rounded" text="Object fit scale down" markup="img" >}}
+{{< placeholder width="140" height="120" class="object-fit-none border rounded" text="Object fit none" markup="img" >}}
+{{< /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" >}}
+{{< placeholder width="140" height="80" class="object-fit-md-contain border rounded" text="Contain on md" markup="img" >}}
+{{< placeholder width="140" height="80" class="object-fit-lg-contain border rounded" text="Contain on lg" markup="img" >}}
+{{< placeholder width="140" height="80" class="object-fit-xl-contain border rounded" text="Contain on xl" markup="img" >}}
+{{< placeholder width="140" height="80" class="object-fit-xxl-contain border rounded" text="Contain on xxl" markup="img" >}}
+{{< /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>
+```
+
+## 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" >}}
@@ -3,8 +3,11 @@ 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">
@@ -29,6 +32,62 @@ Adjust the `overflow` property on the fly with four default values and classes.
 <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-light 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-light 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-light 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-light 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-light 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-light 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-light 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-light 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`.

 ## Sass
@@ -100,18 +100,45 @@ 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 >}}
+<div class="grid gap-3" >
+  <div class="p-2 bg-light border g-col-6">Grid item 1</div>
+  <div class="p-2 bg-light border g-col-6">Grid item 2</div>
+  <div class="p-2 bg-light border g-col-6">Grid item 3</div>
+  <div class="p-2 bg-light border 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`.

+### row-gap
+
+`row-gap` sets the vertical space between children items in the specified container.
+
+{{< example >}}
+<div class="grid gap-0 row-gap-3" >
+  <div class="p-2 bg-light border g-col-6">Grid item 1</div>
+  <div class="p-2 bg-light border g-col-6">Grid item 2</div>
+  <div class="p-2 bg-light border g-col-6">Grid item 3</div>
+  <div class="p-2 bg-light border 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 >}}
+<div class="grid gap-0 column-gap-3" >
+  <div class="p-2 bg-light border g-col-6">Grid item 1</div>
+  <div class="p-2 bg-light border g-col-6">Grid item 2</div>
+  <div class="p-2 bg-light border g-col-6">Grid item 3</div>
+  <div class="p-2 bg-light border g-col-6">Grid item 4</div>
+</div>
+{{< /example >}}
+
 ## Sass

 ### Maps
@@ -0,0 +1,44 @@
+---
+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: "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"></div>
+<div class="z-2 position-absolute p-5 rounded-3"></div>
+<div class="z-1 position-absolute p-5 rounded-3"></div>
+<div class="z-0 position-absolute p-5 rounded-3"></div>
+<div class="z-n1 position-absolute p-5 rounded-3"></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 map
+
+Customize this Sass map to change the available values and generated utilities.
+
+{{< scss-docs name="zindex-levels-map" file="scss/_variables.scss" >}}
@@ -123,6 +123,7 @@
    - title: Flex
    - title: Float
    - title: Interactions
+    - title: Object fit
    - title: Opacity
    - title: Overflow
    - title: Position
@@ -132,6 +133,7 @@
    - title: Text
    - title: Vertical align
    - title: Visibility
+    - title: Z-index

 - title: Extend
  icon: tools
@@ -16,9 +16,14 @@
    <main class="bd-main order-1">
      <div class="bd-intro pt-2 ps-lg-2">
        <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
-          <a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">
-            View on GitHub
-          </a>
+          <div class="mb-3 mb-md-0 d-flex">
+            {{- if .Page.Params.added -}}
+              <small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2 me-2">Added in v{{ .Page.Params.added }}</small>
+            {{- end -}}
+            <a class="btn btn-sm btn-bd-light rounded-2" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">
+              View on GitHub
+            </a>
+          </div>
          <h1 class="bd-title mb-0" id="content">{{ .Title | markdownify }}</h1>
        </div>
        <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
@@ -1,7 +1,15 @@
 {{ define "main" }}
  <main>
    {{ partial "home/masthead" . }}
-    {{ partial "home/masthead-followup" . }}
+    <div class="container-xxl bd-gutter masthead-followup">
+      {{ partial "home/get-started" . }}
+      {{ partial "home/customize" . }}
+      {{ partial "home/css-variables" . }}
+      {{ partial "home/components-utilities" . }}
+      {{ partial "home/plugins" . }}
+      {{ partial "home/icons" . }}
+      {{ partial "home/themes" . }}
+    </div>
  </main>

  {{ .Content }}
@@ -0,0 +1,88 @@
+<section class="pb-md-5 mb-5">
+  <div class="col-lg-8 mb-5">
+    <div class="masthead-followup-icon d-inline-block mb-3 me-2" style="--bg-rgb: var(--bs-danger-rgb);">
+      <svg class="bi fs-1"><use xlink:href="#menu-button-wide-fill"></use></svg>
+    </div>
+    <svg class="bi me-2 fs-2 text-muted"><use xlink:href="#plus"></use></svg>
+    <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-info-rgb);">
+      <svg class="bi fs-1"><use xlink:href="#braces-asterisk"></use></svg>
+    </div>
+    <h2 class="display-5 mb-3 fw-semibold lh-sm">Components, meet the Utility&nbsp;API</h2>
+    <p class="lead fw-normal">
+      New in Bootstrap 5, our utilities are now generated by our <a href="/docs/{{ .Site.Params.docs_version }}/utilities/api/">Utility API</a>. We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them custom names.
+    </p>
+  </div>
+  <div class="row gx-md-5">
+    <div class="col-lg-6">
+      <h3 class="fw-semibold">Quickly customize components</h3>
+      <p>Apply any of our included utility classes to our components to customize their appearance, like the navigation example below. There are hundreds of classes available—from <a href="/docs/{{ .Site.Params.docs_version }}/utilities/position/">positioning</a> and <a href="/docs/{{ .Site.Params.docs_version }}/utilities/sizing/">sizing</a> to <a href="/docs/{{ .Site.Params.docs_version }}/utilities/colors/">colors</a> and <a href="/docs/{{ .Site.Params.docs_version }}/utilities/shadows/">effects</a>. Mix them with CSS variable overrides for even more control.</p>
+      <div class="p-4 border rounded-3 mb-4">
+        <ul class="nav nav-pills mb-4" id="pillNav" role="tablist">
+          <li class="nav-item" role="presentation">
+            <button class="nav-link active" id="home-tab" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button>
+          </li>
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" id="profile-tab" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button>
+          </li>
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" id="contact-tab" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button>
+          </li>
+        </ul>
+        <ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist" style="--bs-nav-link-color: rgba(255, 255, 255, .75); --bs-nav-link-hover-color: #fff; --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);">
+          <li class="nav-item" role="presentation">
+            <button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button>
+          </li>
+          <li class="nav-item" role="presentation">
+            <button class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button>
+          </li>
+          <li class="nav-item" role="presentation">
+            <button class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button>
+          </li>
+        </ul>
+      </div>
+{{ highlight (printf `<ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist" style="--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);">
+  <li class="nav-item" role="presentation">
+    <button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button>
+  </li>
+</ul>
+`) "html" "" }}
+      <p class="d-flex justify-content-start mb-md-0">
+        <a href="/docs/{{ .Site.Params.docs_version }}/examples#snippets" class="icon-link fw-semibold">
+          Explore customized components
+          <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg>
+        </a>
+      </p>
+    </div>
+    <div class="col-lg-6">
+      <h3 class="fw-semibold">Create and extend utilities</h3>
+      <p>Use Bootstrap's utility API to modify any of our included utilities or create your own custom utilities for any project. Import Bootstrap first, then use Sass map functions to modify, add, or remove utilities.</p>
+{{ highlight (printf `@import "bootstrap/scss/bootstrap";
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "cursor": (
+      property: cursor,
+      class: cursor,
+      responsive: true,
+      values: auto pointer grab,
+    )
+  )
+);
+`) "scss" "" }}
+
+      <p class="d-flex justify-content-start mb-md-0">
+        <a href="/docs/{{ .Site.Params.docs_version }}/utilities/api/" class="icon-link fw-semibold mb-3">
+          Explore the utility API
+          <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg>
+        </a>
+      </p>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,48 @@
+<section class="row g-md-5 pb-md-5 mb-5 align-items-center">
+  <div class="col-lg-8 mb-5">
+    <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-pink-rgb);">
+      <svg class="bi fs-1"><use xlink:href="#braces"></use></svg>
+    </div>
+    <h2 class="display-5 mb-3 fw-semibold lh-sm">Build and extend in real-time with CSS&nbsp;variables</h2>
+    <p class="lead fw-normal">
+      Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a <code>:root</code> level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified.
+    </p>
+    <p class="d-flex align-items-start flex-column lead fw-normal mb-0">
+      <a href="/docs/{{ .Site.Params.docs_version }}/customize/css-variables/" class="icon-link fw-semibold mb-3">
+        Learn more about CSS variables
+        <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg>
+      </a>
+    </p>
+  </div>
+  <div class="row gx-md-5">
+    <div class="col-lg-6 mb-3">
+      <h3 class="fw-semibold">Using CSS variables</h3>
+      <p>Use any of our <a href="/docs/{{ .Site.Params.docs_version }}/customize/css-variables/#root-variables">global <code>:root</code> variables</a> to write new styles. CSS variables use the <code>var(--bs-variableName)</code> syntax and can be inherited by children elements.</p>
+      {{ highlight (printf `.component {
+  color: var(--bs-gray-800);
+  background-color: var(--bs-gray-100);
+  border: 1px solid var(--bs-gray-200);
+  border-radius: .25rem;
+}
+
+.component-header {
+  color: var(--bs-purple);
+}`) "scss" "" }}
+    </div>
+    <div class="col-lg-6 mb-3">
+      <h3 class="fw-semibold">Customizing via CSS variables</h3>
+      <p>Override global, component, or utility class variables to customize Bootstrap just how you like. No need to redeclare each rule, just a new variable value.</p>
+      {{ highlight (printf `body {
+  --bs-body-font-family: var(--bs-font-monospace);
+  --bs-body-line-height: 1.4;
+  --bs-body-bg: var(--bs-gray-100);
+}
+
+.table {
+  --bs-table-color: var(--bs-gray-600);
+  --bs-table-bg: var(--bs-gray-100);
+  --bs-table-border-color: transparent;
+}`) "scss" "" }}
+    </div>
+  </div>
+</section>
@@ -0,0 +1,58 @@
+<section class="col-lg-7 mb-5">
+  <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-primary-rgb);">
+    <svg class="bi fs-1"><use xlink:href="#palette2"></use></svg>
+  </div>
+  <h2 class="display-5 mb-3 fw-semibold lh-sm">Customize everything with&nbsp;Sass</h2>
+  <p class="lead fw-normal">
+    Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.
+  </p>
+  <p class="d-flex justify-content-start lead fw-normal">
+    <a href="/docs/{{ .Site.Params.docs_version }}/customize/overview/" class="icon-link fw-semibold">
+      Learn more about customizing
+      <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg>
+    </a>
+  </p>
+</section>
+
+<section class="row g-md-5 mb-5 pb-md-5">
+  <div class="col-lg-6">
+    <h3>Include all of Bootstrap’s Sass</h3>
+    <p>Import one stylesheet and you're off to the races with every feature of our CSS.</p>
+    {{ highlight (printf `// Variable overrides first
+$primary: #900;
+$enable-shadows: true;
+$prefix: "mo-";
+
+// Then import Bootstrap
+@import "../node_modules/bootstrap/scss/bootstrap";
+`) "scss" "" }}
+    <p>Learn more about our <a href="/docs/{{ .Site.Params.docs_version }}/customize/options/">global Sass options</a>.</p>
+  </div>
+  <div class="col-lg-6">
+    <h3>Include what you need</h3>
+    <p>The easiest way to customize Bootstrap—include only the CSS you need.</p>
+{{ highlight (printf `// Functions first
+@import "../node_modules/bootstrap/scss/functions";
+
+// Variable overrides second
+$primary: #900;
+$enable-shadows: true;
+$prefix: "mo-";
+
+// Required Bootstrap imports
+@import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/maps";
+@import "../node_modules/bootstrap/scss/mixins";
+@import "../node_modules/bootstrap/scss/root";
+
+// Optional components
+@import "../node_modules/bootstrap/scss/utilities";
+@import "../node_modules/bootstrap/scss/reboot";
+@import "../node_modules/bootstrap/scss/containers";
+@import "../node_modules/bootstrap/scss/grid";
+@import "../node_modules/bootstrap/scss/helpers";
+@import "../node_modules/bootstrap/scss/utilities/api";
+`) "scss" "" }}
+    <p>Learn more about <a href="/docs/{{ .Site.Params.docs_version }}/customize/sass/">using Bootstrap with Sass</a>.</p>
+  </div>
+</section>
@@ -0,0 +1,58 @@
+<div class="col-lg-7 mx-auto pb-3 mb-3 mb-md-5 text-md-center">
+  <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-violet-rgb);">
+    <svg class="bi fs-1"><use xlink:href="#code"></use></svg>
+  </div>
+  <h2 class="display-5 mb-3 fw-semibold lh-sm">Get started any way you&nbsp;want</h2>
+  <p class="lead fw-normal">
+    Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code.
+  </p>
+  <p class="d-flex justify-content-md-start justify-content-md-center lead fw-normal">
+    <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="icon-link fw-semibold justify-content-center ps-md-4">
+      Read installation docs
+      <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg>
+    </a>
+  </p>
+</div>
+
+<section class="row g-3 g-md-5 mb-5 pb-5 justify-content-center">
+  <div class="col-lg-6 py-lg-4 pe-lg-5">
+    <svg class="bi mb-2 fs-2 text-muted"><use xlink:href="#box-seam"></use></svg>
+    <h3 class="fw-semibold">Install via package manager</h3>
+    <p class="pe-lg-5">
+      Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package managed installs don’t include documentation or our full build scripts. You can also <a href="https://github.com/twbs/bootstrap-npm-starter">use our npm template repo</a> to quickly generate a Bootstrap project via npm.
+    </p>
+    {{ highlight (printf ("npm install bootstrap@%s") .Site.Params.current_version) "sh" "" }}
+    {{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }}
+    <p>
+      <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Read our installation docs</a> for more info and additional package managers.
+    </p>
+  </div>
+  <div class="col-lg-6 py-lg-4 ps-lg-5 border-lg-start">
+    <svg class="bi mb-2 fs-2 text-muted"><use xlink:href="#globe2"></use></svg>
+    <h3 class="fw-semibold">Include via CDN</h3>
+    <p class="pe-lg-5">
+      When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.jsdelivr.com/package/npm/bootstrap">jsDelivr</a>. See it in action with our simple <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#quick-start">quick start</a>, or <a href="/docs/{{ .Site.Params.docs_version }}/examples/">browse the examples</a> to jumpstart your next project. You can also choose to include Popper and our JS <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#separate">separately</a>.
+    </p>
+    {{ highlight (printf (`<link href="%s" rel="stylesheet" integrity=%q crossorigin="anonymous">`) .Site.Params.cdn.css (.Site.Params.cdn.css_hash | safeHTMLAttr)) "html" "" }}
+    {{ highlight (printf (`<script src="%s" integrity=%q crossorigin="anonymous"></script>`) .Site.Params.cdn.js_bundle (.Site.Params.cdn.js_bundle_hash | safeHTMLAttr)) "html" "" }}
+  </div>
+
+  <div class="col-md-8 mx-auto text-center">
+    <h4 class="fw-semibold">Read our getting started guides</h4>
+    <p>Get a jump on including Bootstrap's source files in a new project with our official guides.</p>
+    <div class="d-flex flex-wrap align-items-center justify-content-center gap-4 mt-4">
+      <a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/webpack">
+        <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/webpack.svg" alt="" width="72" height="72" loading="lazy">
+        <span class="text-muted">Webpack</span>
+      </a>
+      <a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/parcel">
+        <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/parcel.png" alt="" width="72" height="72" loading="lazy">
+        <span class="text-muted">Parcel</span>
+      </a>
+      <a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/vite">
+        <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/vite.svg" alt="" width="72" height="72" loading="lazy">
+        <span class="text-muted">Vite</span>
+      </a>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,23 @@
+<section class="row g-3 g-md-5 pb-md-5 mb-5 align-items-center">
+  <div class="col-lg-6">
+    <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-teal-rgb);">
+      {{ partial "icons/circle-square.svg" (dict "width" "32" "height" "32") }}
+    </div>
+    <h2 class="display-5 mb-3 fw-semibold lh-sm">Personalize it with Bootstrap&nbsp;Icons</h2>
+    <p class="lead fw-normal">
+      <a href="{{ .Site.Params.icons }}">Bootstrap Icons</a> is an open source SVG icon library featuring over 1,800 glyphs, with more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS.
+    </p>
+    <p class="d-flex justify-content-start lead fw-normal mb-md-0">
+      <a href="{{ .Site.Params.icons }}" class="icon-link fw-semibold">
+        Get Bootstrap Icons
+        <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg>
+      </a>
+    </p>
+  </div>
+  <div class="col-lg-6">
+      <img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png,
+                                                  /docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons@2x.png 2x"
+                                          src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png"
+                                          alt="Bootstrap Icons" width="700" height="425" loading="lazy">
+  </div>
+</section>
@@ -1,356 +0,0 @@
-<div class="container-xxl bd-gutter masthead-followup">
-  <div class="col-lg-7 mx-auto pb-3 mb-3 mb-md-5 text-md-center">
-    <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-violet-rgb);">
-      <svg class="bi fs-1"><use xlink:href="#code"></use></svg>
-    </div>
-    <h2 class="display-5 mb-3 fw-semibold lh-sm">Get started any way you&nbsp;want</h2>
-    <p class="lead fw-normal">
-      Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code.
-    </p>
-    <p class="d-flex justify-content-md-start justify-content-md-center lead fw-normal">
-      <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="icon-link fw-semibold justify-content-center ps-md-4">
-        Read installation docs
-        <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg>
-      </a>
-    </p>
-  </div>
-
-  <section class="row g-3 g-md-5 mb-5 pb-5 justify-content-center">
-    <div class="col-lg-6 py-lg-4 pe-lg-5">
-      <svg class="bi mb-2 fs-2 text-muted"><use xlink:href="#box-seam"></use></svg>
-      <h3 class="fw-semibold">Install via package manager</h3>
-      <p class="pe-lg-5">
-        Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package managed installs don’t include documentation or our full build scripts. You can also <a href="https://github.com/twbs/bootstrap-npm-starter">use our npm template repo</a> to quickly generate a Bootstrap project via npm.
-      </p>
-      {{ highlight (printf ("npm install bootstrap@%s") .Site.Params.current_version) "sh" "" }}
-      {{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }}
-      <p>
-        <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Read our installation docs</a> for more info and additional package managers.
-      </p>
-    </div>
-    <div class="col-lg-6 py-lg-4 ps-lg-5 border-lg-start">
-      <svg class="bi mb-2 fs-2 text-muted"><use xlink:href="#globe2"></use></svg>
-      <h3 class="fw-semibold">Include via CDN</h3>
-      <p class="pe-lg-5">
-        When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.jsdelivr.com/package/npm/bootstrap">jsDelivr</a>. See it in action with our simple <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#quick-start">quick start</a>, or <a href="/docs/{{ .Site.Params.docs_version }}/examples/">browse the examples</a> to jumpstart your next project. You can also choose to include Popper and our JS <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#separate">separately</a>.
-      </p>
-      {{ highlight (printf (`<!-- CSS only -->
-<link href="%s" rel="stylesheet" integrity=%q crossorigin="anonymous">
-`) .Site.Params.cdn.css (.Site.Params.cdn.css_hash | safeHTMLAttr)) "html" "" }}
-      {{ highlight (printf (`<!-- JavaScript Bundle with Popper -->
-<script src="%s" integrity=%q crossorigin="anonymous"></script>
-`) .Site.Params.cdn.js_bundle (.Site.Params.cdn.js_bundle_hash | safeHTMLAttr)) "html" "" }}
-    </div>
-
-    <div class="col-md-8 mx-auto text-center">
-      <h4 class="fw-semibold">Read our getting started guides</h4>
-      <p>Get a jump on including Bootstrap's source files in a new project with our official guides.</p>
-      <div class="d-flex flex-wrap align-items-center justify-content-center gap-4 mt-4">
-        <a class="d-flex flex-column align-items-center text-decoration-none" href="/docs/{{ .Site.Params.docs_version }}/getting-started/webpack">
-          <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/webpack.svg" alt="" width="72" height="72" loading="lazy">
-          <span class="text-muted">Webpack</span>
-        </a>
-        <a class="d-flex flex-column align-items-center text-decoration-none" href="/docs/{{ .Site.Params.docs_version }}/getting-started/parcel">
-          <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/parcel.png" alt="" width="72" height="72" loading="lazy">
-          <span class="text-muted">Parcel</span>
-        </a>
-        <a class="d-flex flex-column align-items-center text-decoration-none" href="/docs/{{ .Site.Params.docs_version }}/getting-started/vite">
-          <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/vite.svg" alt="" width="72" height="72" loading="lazy">
-          <span class="text-muted">Vite</span>
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <section class="col-lg-7 mb-5">
-    <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-primary-rgb);">
-      <svg class="bi fs-1"><use xlink:href="#palette2"></use></svg>
-    </div>
-    <h2 class="display-5 mb-3 fw-semibold lh-sm">Customize everything with&nbsp;Sass</h2>
-    <p class="lead fw-normal">
-      Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.
-    </p>
-    <p class="d-flex justify-content-start lead fw-normal">
-      <a href="/docs/{{ .Site.Params.docs_version }}/customize/overview/" class="icon-link fw-semibold">
-        Learn more about customizing
-        <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg>
-      </a>
-    </p>
-  </section>
-
-  <section class="row g-md-5 mb-5 pb-md-5">
-    <div class="col-lg-6">
-      <h3>Include all of Bootstrap’s Sass</h3>
-      <p>Import one stylesheet and you're off to the races with every feature of our CSS.</p>
-      {{ highlight (printf `// Variable overrides first
-$primary: #900;
-$enable-shadows: true;
-$prefix: "mo-";
-
-// Then import Bootstrap
-@import "../node_modules/bootstrap/scss/bootstrap";
-`) "scss" "" }}
-      <p>Learn more about our <a href="/docs/{{ .Site.Params.docs_version }}/customize/options/">global Sass options</a>.</p>
-    </div>
-    <div class="col-lg-6">
-      <h3>Include what you need</h3>
-      <p>The easiest way to customize Bootstrap—include only the CSS you need.</p>
-{{ highlight (printf `// Functions first
-@import "../node_modules/bootstrap/scss/functions";
-
-// Variable overrides second
-$primary: #900;
-$enable-shadows: true;
-$prefix: "mo-";
-
-// Required Bootstrap imports
-@import "../node_modules/bootstrap/scss/variables";
-@import "../node_modules/bootstrap/scss/maps";
-@import "../node_modules/bootstrap/scss/mixins";
-@import "../node_modules/bootstrap/scss/root";
-
-// Optional components
-@import "../node_modules/bootstrap/scss/utilities";
-@import "../node_modules/bootstrap/scss/reboot";
-@import "../node_modules/bootstrap/scss/containers";
-@import "../node_modules/bootstrap/scss/grid";
-@import "../node_modules/bootstrap/scss/helpers";
-@import "../node_modules/bootstrap/scss/utilities/api";
-`) "scss" "" }}
-      <p>Learn more about <a href="/docs/{{ .Site.Params.docs_version }}/customize/sass/">using Bootstrap with Sass</a>.</p>
-    </div>
-  </section>
-
-  <section class="row g-md-5 pb-md-5 mb-5 align-items-center">
-    <div class="col-lg-8 mb-5">
-      <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-pink-rgb);">
-        <svg class="bi fs-1"><use xlink:href="#braces"></use></svg>
-      </div>
-      <h2 class="display-5 mb-3 fw-semibold lh-sm">Build and extend in real-time with CSS&nbsp;variables</h2>
-      <p class="lead fw-normal">
-        Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a <code>:root</code> level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified.
-      </p>
-      <p class="d-flex align-items-start flex-column lead fw-normal mb-0">
-        <a href="/docs/{{ .Site.Params.docs_version }}/customize/css-variables/" class="icon-link fw-semibold mb-3">
-          Learn more about CSS variables
-          <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg>
-        </a>
-      </p>
-    </div>
-    <div class="row gx-md-5">
-      <div class="col-lg-6 mb-3">
-        <h3 class="fw-semibold">Using CSS variables</h3>
-        <p>Use any of our <a href="/docs/{{ .Site.Params.docs_version }}/customize/css-variables/#root-variables">global <code>:root</code> variables</a> to write new styles. CSS variables use the <code>var(--bs-variableName)</code> syntax and can be inherited by children elements.</p>
-        {{ highlight (printf `.component {
-  color: var(--bs-gray-800);
-  background-color: var(--bs-gray-100);
-  border: 1px solid var(--bs-gray-200);
-  border-radius: .25rem;
-}
-
-.component-header {
-  color: var(--bs-purple);
-}`) "scss" "" }}
-      </div>
-      <div class="col-lg-6 mb-3">
-        <h3 class="fw-semibold">Customizing via CSS variables</h3>
-        <p>Override global, component, or utility class variables to customize Bootstrap just how you like. No need to redeclare each rule, just a new variable value.</p>
-        {{ highlight (printf `body {
-  --bs-body-font-family: var(--bs-font-monospace);
-  --bs-body-line-height: 1.4;
-  --bs-body-bg: var(--bs-gray-100);
-}
-
-.table {
-  --bs-table-color: var(--bs-gray-600);
-  --bs-table-bg: var(--bs-gray-100);
-  --bs-table-border-color: transparent;
-}`) "scss" "" }}
-      </div>
-    </div>
-  </section>
-
-  <section class="row g-md-5 pb-md-5 mb-5 align-items-center">
-    <div class="col-lg-6 mb-5 mb-md-0">
-      <div class="masthead-followup-icon d-inline-block mb-3 me-2" style="--bg-rgb: var(--bs-danger-rgb);">
-        <svg class="bi fs-1"><use xlink:href="#menu-button-wide-fill"></use></svg>
-      </div>
-      <svg class="bi me-2 fs-2 text-muted"><use xlink:href="#plus"></use></svg>
-      <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-info-rgb);">
-        <svg class="bi fs-1"><use xlink:href="#braces-asterisk"></use></svg>
-      </div>
-      <h2 class="display-5 mb-3 fw-semibold lh-sm">Components, meet the Utility&nbsp;API</h2>
-      <p class="lead fw-normal">
-        New in Bootstrap 5, our utilities are now generated by our <a href="/docs/{{ .Site.Params.docs_version }}/utilities/api/">Utility API</a>. We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them custom names.
-      </p>
-      <p class="d-flex align-items-start flex-column lead fw-normal mb-0">
-        <a href="/docs/{{ .Site.Params.docs_version }}/utilities/api/" class="icon-link fw-semibold mb-3">
-          Learn more about utilities
-          <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg>
-        </a>
-        <a href="/docs/{{ .Site.Params.docs_version }}/examples#snippets" class="icon-link fw-semibold">
-          Explore customized components
-          <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg>
-        </a>
-      </p>
-    </div>
-    <div class="col-lg-6">
-      <div class="p-4 border rounded-3 mb-4">
-        <h6>Quickly customize components</h6>
-        <hr class="mb-4">
-        <ul class="nav nav-pills mb-4" id="pillNav" role="tablist">
-          <li class="nav-item" role="presentation">
-            <button class="nav-link active" id="home-tab" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button>
-          </li>
-          <li class="nav-item" role="presentation">
-            <button class="nav-link" id="profile-tab" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button>
-          </li>
-          <li class="nav-item" role="presentation">
-            <button class="nav-link" id="contact-tab" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button>
-          </li>
-        </ul>
-        <ul class="nav nav-pills nav-fill gap-2 p-1 small bg-white border rounded-5 shadow-sm" id="pillNav2" role="tablist">
-          <li class="nav-item" role="presentation">
-            <button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button>
-          </li>
-          <li class="nav-item" role="presentation">
-            <button class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button>
-          </li>
-          <li class="nav-item" role="presentation">
-            <button class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button>
-          </li>
-        </ul>
-      </div>
-  {{ highlight (printf `// Create and extend utilities with the Utility API
-
-@import "bootstrap/scss/bootstrap";
-
-$utilities: map-merge(
-  $utilities,
-  (
-    "cursor": (
-      property: cursor,
-      class: cursor,
-      responsive: true,
-      values: auto pointer grab,
-    )
-  )
-);
-`) "scss" "" }}
-    </div>
-  </section>
-
-  <section class="pb-md-5 mb-5">
-    <div class="col-lg-8 mb-5">
-      <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-warning-rgb);">
-        <svg class="bi fs-1"><use xlink:href="#plugin"></use></svg>
-      </div>
-      <h2 class="display-5 mb-3 fw-semibold lh-sm">Powerful JavaScript plugins without&nbsp;jQuery</h2>
-      <p class="lead fw-normal">
-        Easily add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without jQuery. JavaScript in Bootstrap is HTML-first, which means adding plugins is as easy as adding <code>data</code> attributes. Need more control? Include individual plugins programmatically.
-      </p>
-      <p class="d-flex justify-content-start lead fw-normal mb-md-0">
-        <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/" class="icon-link fw-semibold">
-          Learn more about Bootstrap JavaScript
-          <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg>
-        </a>
-      </p>
-    </div>
-    <div class="row gx-md-5">
-      <div class="col-lg-6 mb-3">
-        <h3 class="fw-semibold">Data attribute API</h3>
-        <p>Why write more JavaScript when you can write HTML? Nearly all of Bootstrap's JavaScript plugins feature a first-class data API, allowing you to use JavaScript just by adding <code>data</code> attributes.</p>
-        <div class="p-4 mb-3 border rounded-3">
-          <div class="dropdown">
-            <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-              Dropdown
-            </button>
-            <ul class="dropdown-menu">
-              <li><a class="dropdown-item" href="#">Dropdown item</a></li>
-              <li><a class="dropdown-item" href="#">Dropdown item</a></li>
-              <li><a class="dropdown-item" href="#">Dropdown item</a></li>
-            </ul>
-          </div>
-        </div>
-
-        {{ highlight (printf `<div class="dropdown">
-  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    Dropdown
-  </button>
-  <ul class="dropdown-menu">
-    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
-    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
-  </ul>
-</div>
-`) "html" "" }}
-        <p>Learn more about <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#using-bootstrap-as-a-module">our JavaScript as modules</a> and <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#programmatic-api">using the programmatic API</a>.</p>
-      </div>
-      <div class="col-lg-6 mb-3">
-        <h3 class="fw-semibold">Comprehensive set of plugins</h3>
-        <p>Bootstrap features a dozen plugins that you can drop into any project. Drop them in all at once, or choose just the ones you need.</p>
-        <hr class="my-4">
-        <div class="row g-3">
-          {{- range $plugin := .Site.Data.plugins -}}
-            {{- $href := printf "/docs/%s/%s" $.Site.Params.docs_version $plugin.link }}
-            <div class="col-sm-6 mb-2">
-              <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="{{ $href }}">
-                <h4 class="mb-0 fs-5 fw-semibold">{{ $plugin.name }}</h4>
-                <small class="text-muted">{{ $plugin.description }}</small>
-              </a>
-            </div>
-          {{- end }}
-        </div>
-      </div>
-    </div>
-
-  </section>
-
-  <section class="row g-3 g-md-5 pb-md-5 mb-5 align-items-center">
-    <div class="col-lg-6">
-      <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-teal-rgb);">
-        {{ partial "icons/circle-square.svg" (dict "width" "32" "height" "32") }}
-      </div>
-      <h2 class="display-5 mb-3 fw-semibold lh-sm">Personalize it with Bootstrap&nbsp;Icons</h2>
-      <p class="lead fw-normal">
-        <a href="{{ .Site.Params.icons }}">Bootstrap Icons</a> is an open source SVG icon library featuring over 1,500 glyphs, with more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS.
-      </p>
-      <p class="d-flex justify-content-start lead fw-normal mb-md-0">
-        <a href="{{ .Site.Params.icons }}" class="icon-link fw-semibold">
-          Get Bootstrap Icons
-          <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg>
-        </a>
-      </p>
-    </div>
-    <div class="col-lg-6">
-        <img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png,
-                                                    /docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons@2x.png 2x"
-                                            src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png"
-                                            alt="Bootstrap Icons" width="700" height="425" loading="lazy">
-    </div>
-  </section>
-
-  <section class="row g-3 g-md-5 pb-md-5 mb-5 align-items-center">
-    <div class="col-lg-6">
-      <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-violet-rgb);">
-        {{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
-      </div>
-      <h2 class="display-5 mb-3 fw-semibold lh-sm">Make it yours with official Bootstrap Themes</h2>
-      <p class="lead fw-normal">
-        Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
-      </p>
-      <p class="d-flex justify-content-start lead fw-normal mb-md-0">
-        <a href="{{ .Site.Params.themes }}" class="icon-link fw-semibold">
-          Browse Bootstrap Themes
-          <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg>
-        </a>
-      </p>
-    </div>
-    <div class="col-lg-6">
-        <img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png,
-                                                    /docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes@2x.png 2x"
-                                            src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png"
-                                            alt="Bootstrap Themes" width="700" height="500" loading="lazy">
-    </div>
-  </section>
-</div>
@@ -0,0 +1,65 @@
+<section class="pb-md-5 mb-5">
+  <div class="col-lg-8 mb-5">
+    <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-warning-rgb);">
+      <svg class="bi fs-1"><use xlink:href="#plugin"></use></svg>
+    </div>
+    <h2 class="display-5 mb-3 fw-semibold lh-sm">Powerful JavaScript plugins without&nbsp;jQuery</h2>
+    <p class="lead fw-normal">
+      Add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without jQuery. Bootstrap's JavaScript is HTML-first, meaning most plugins are added with <code>data</code> attributes in your HTML. Need more control? Include individual plugins programmatically.
+    </p>
+    <p class="d-flex justify-content-start lead fw-normal mb-md-0">
+      <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/" class="icon-link fw-semibold">
+        Learn more about Bootstrap JavaScript
+        <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg>
+      </a>
+    </p>
+  </div>
+  <div class="row gx-md-5">
+    <div class="col-lg-6 mb-3">
+      <h3 class="fw-semibold">Data attribute API</h3>
+      <p>Why write more JavaScript when you can write HTML? Nearly all of Bootstrap's JavaScript plugins feature a first-class data API, allowing you to use JavaScript just by adding <code>data</code> attributes.</p>
+      <div class="p-4 mb-3 border rounded-3">
+        <div class="dropdown">
+          <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            Dropdown
+          </button>
+          <ul class="dropdown-menu">
+            <li><button class="dropdown-item" type="button">Dropdown item</button></li>
+            <li><button class="dropdown-item" type="button">Dropdown item</button></li>
+            <li><button class="dropdown-item" type="button">Dropdown item</button></li>
+          </ul>
+        </div>
+      </div>
+
+      {{ highlight (printf `<div class="dropdown">
+<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+  Dropdown
+</button>
+<ul class="dropdown-menu">
+  <li><button class="dropdown-item" type="button">Dropdown item</button></li>
+  <li><button class="dropdown-item" type="button">Dropdown item</button></li>
+  <li><button class="dropdown-item" type="button">Dropdown item</button></li>
+</ul>
+</div>
+`) "html" "" }}
+      <p>Learn more about <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#using-bootstrap-as-a-module">our JavaScript as modules</a> and <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#programmatic-api">using the programmatic API</a>.</p>
+    </div>
+    <div class="col-lg-6 mb-3">
+      <h3 class="fw-semibold">Comprehensive set of plugins</h3>
+      <p>Bootstrap features a dozen plugins that you can drop into any project. Drop them in all at once, or choose just the ones you need.</p>
+      <hr class="my-4">
+      <div class="row g-3">
+        {{- range $plugin := .Site.Data.plugins -}}
+          {{- $href := printf "/docs/%s/%s" $.Site.Params.docs_version $plugin.link }}
+          <div class="col-sm-6 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="{{ $href }}">
+              <h4 class="mb-0 fs-5 fw-semibold">{{ $plugin.name }}</h4>
+              <small class="text-muted">{{ $plugin.description }}</small>
+            </a>
+          </div>
+        {{- end }}
+      </div>
+    </div>
+  </div>
+
+</section>
@@ -0,0 +1,23 @@
+<section class="row g-3 g-md-5 pb-md-5 mb-5 align-items-center">
+  <div class="col-lg-6">
+    <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-violet-rgb);">
+      {{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
+    </div>
+    <h2 class="display-5 mb-3 fw-semibold lh-sm">Make it yours with official Bootstrap Themes</h2>
+    <p class="lead fw-normal">
+      Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
+    </p>
+    <p class="d-flex justify-content-start lead fw-normal mb-md-0">
+      <a href="{{ .Site.Params.themes }}" class="icon-link fw-semibold">
+        Browse Bootstrap Themes
+        <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg>
+      </a>
+    </p>
+  </div>
+  <div class="col-lg-6">
+      <img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png,
+                                                  /docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes@2x.png 2x"
+                                          src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png"
+                                          alt="Bootstrap Themes" width="700" height="500" loading="lazy">
+  </div>
+</section>
@@ -17,6 +17,7 @@
 {{- $show_markup := .Get "show_markup" | default true -}}
 {{- $show_preview := .Get "show_preview" | default true -}}
 {{- $input := .Inner -}}
+{{- $content := .Inner -}}

 <div class="bd-example-snippet bd-code-snippet">
  {{- if eq $show_preview true -}}
@@ -31,16 +32,17 @@
        <small class="font-monospace text-muted text-uppercase">{{- $lang -}}</small>
        <div class="d-flex ms-auto">
          <button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
-            <svg class="bi" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
+            <svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg>
          </button>
          <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
-            <svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
+            <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
          </button>
        </div>
      </div>
    {{- end -}}

-    {{- $content := replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>\n` `<img src="..." class="$1" alt="...">` $input -}}
+    {{- $content = replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>` `<img src="..." class="$1" alt="...">` $content -}}
+    {{- $content = replaceRE `<img class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?>` `<img src="..." class="$1" alt="...">` $content -}}
    {{- $content = replaceRE ` (class=" *?")` "" $content -}}
    {{- highlight (trim $content "\n") $lang "" -}}
  {{- end -}}
@@ -4,11 +4,12 @@
  `args` are all optional and can be one of the following:
    * title: Used in the SVG `title` tag - default: "Placeholder"
    * text: The text to show in the image - default: "width x height"
-    * class: Class to add to the `svg` - default: "bd-placeholder-img"
+    * class: Class to add to the `svg` or `img` - default: "bd-placeholder-img"
    * color: The text color (foreground) - default: "#dee2e6"
    * background: The background color - default: "#868e96"
    * width: default: "100%"
    * height: default: "180px"
+    * markup: If it should render `svg` or `img` tags - default: "svg"
 */ -}}

 {{- $grays := $.Site.Data.grays -}}
@@ -26,8 +27,18 @@
 {{- $show_title := not (eq $title "false") -}}
 {{- $show_text := not (eq $text "false") -}}

-<svg class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" width="{{ $width }}" height="{{ $height }}" xmlns="http://www.w3.org/2000/svg"{{ if (or $show_title $show_text) }} role="img" aria-label="{{ if $show_title }}{{ $title }}{{ if $show_text }}: {{ end }}{{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"{{ else }} aria-hidden="true"{{ end }} preserveAspectRatio="xMidYMid slice" focusable="false">
-  {{- if $show_title }}<title>{{ $title }}</title>{{ end -}}
-  <rect width="100%" height="100%" fill="{{ $background }}"/>
-  {{- if $show_text }}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{ end -}}
-</svg>
+{{- $markup := .Get "markup" | default "svg" -}}
+
+{{- if eq $markup "img" -}}
+  <img class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" alt="{{ $title }} : {{ $text }}" width="{{ $width }}" height="{{ $height }}" src="data:image/svg+xml,%3Csvg%20style='font-size:%201.125rem;%20font-family:system-ui,-apple-system,%22Segoe%20UI%22,Roboto,%22Helvetica%20Neue%22,%22Noto%20Sans%22,%22Liberation%20Sans%22,Arial,sans-serif,%22Apple%20Color%20Emoji%22,%22Segoe%20UI%20Emoji%22,%22Segoe%20UI%20Symbol%22,%22Noto%20Color%20Emoji%22;%20-webkit-user-select:%20none;%20-moz-user-select:%20none;%20user-select:%20none;%20text-anchor:%20middle;'%20width='200'%20height='200'%20xmlns='http://www.w3.org/2000/svg'%3E
+      {{- if $show_title }}%3Ctitle%3E{{ $title }}%3C/title%3E{{ end -}}
+      %3Crect%20width='100%25'%20height='100%25'%20fill='%23dee2e6'%3E%3C/rect%3E
+      {{- if $show_text }}%3Ctext%20x='50%25'%20y='50%25'%20fill='%23868e96'%20dy='.3em'%3E{{ $text }}%3C/text%3E{{ end -}}
+    %3C/svg%3E">
+{{- else -}}
+  <svg class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" width="{{ $width }}" height="{{ $height }}" xmlns="http://www.w3.org/2000/svg"{{ if (or $show_title $show_text) }} role="img" aria-label="{{ if $show_title }}{{ $title }}{{ if $show_text }}: {{ end }}{{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"{{ else }} aria-hidden="true"{{ end }} preserveAspectRatio="xMidYMid slice" focusable="false">
+    {{- if $show_title }}<title>{{ $title }}</title>{{ end -}}
+    <rect width="100%" height="100%" fill="{{ $background }}"/>
+    {{- if $show_text }}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{ end -}}
+  </svg>
+{{- end -}}