20 files changed, 620 insertions, 118 deletions
diff --git a/site/content/docs/5.2/utilities/api.md b/site/content/docs/5.3/utilities/api.md
index 81017ee..aa7d6b8 100644
--- a/site/content/docs/5.2/utilities/api.md
+++ b/site/content/docs/5.3/utilities/api.md
@@ -3,7 +3,7 @@ layout: docs
 title: Utility API
 description: The utility API is a Sass-based tool to generate utility classes.
 group: utilities
-aliases: "/docs/5.2/utilities/"
+aliases: "/docs/5.3/utilities/"
 toc: true
 ---
 
@@ -389,6 +389,7 @@ New utilities can be added to the default `$utilities` map with a `map-merge`. M
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
@@ -415,6 +416,7 @@ Modify existing utilities in the default `$utilities` map with `map-get` and `ma
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
@@ -444,6 +446,7 @@ You can enable responsive classes for an existing set of utilities that are not
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
@@ -499,6 +502,7 @@ Missing v4 utilities, or used to another naming convention? The utilities API ca
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
@@ -522,6 +526,7 @@ Remove any of the default utilities with the [`map-remove()` Sass function](http
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
@@ -537,6 +542,7 @@ You can also use the [`map-merge()` Sass function](https://sass-lang.com/documen
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
@@ -558,6 +564,7 @@ You can add, remove, and modify many utilities all at once with the [`map-merge(
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
diff --git a/site/content/docs/5.2/utilities/background.md b/site/content/docs/5.3/utilities/background.md
index fe0bf57..c17ed84 100644
--- a/site/content/docs/5.2/utilities/background.md
+++ b/site/content/docs/5.3/utilities/background.md
@@ -6,19 +6,32 @@ group: utilities
 toc: true
 ---
 
+{{< callout info >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
+{{< /callout >}}
+
 ## Background color
 
 Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` [color utilities]({{< docsref "/utilities/colors" >}}).
 
+{{< callout info >}}
+Background utilities like `.bg-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.bg-*-subtle` utility will. This will be resolved in v6.
+{{< /callout >}}
+
 {{< example >}}
 {{< colors.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
 <div class="p-3 mb-2 bg-{{ .name }}{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }}">.bg-{{ .name }}</div>
+<div class="p-3 mb-2 bg-{{ .name }}-subtle text-emphasis-{{ .name }}">.bg-{{ .name }}-subtle</div>
 {{- end -}}
 {{< /colors.inline >}}
-<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
+<p class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</p>
+<p class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</p>
+
+<div class="p-3 mb-2 bg-body text-body">.bg-body</div>
+<div class="p-3 mb-2 bg-black text-white">.bg-black</div>
 <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
-<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
+<div class="p-3 mb-2 bg-transparent text-body">.bg-transparent</div>
 {{< /example >}}
 
 ## Background gradient
@@ -33,6 +46,7 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
 <div class="p-3 mb-2 bg-{{ .name }} bg-gradient{{ with .contrast_color }} text-{{ . }}{{ else }} text-white{{ end }}">.bg-{{ .name }}.bg-gradient</div>
 {{- end -}}
 {{< /colors.inline >}}
+<div class="p-3 mb-2 bg-black bg-gradient text-white">.bg-black.bg-gradient</div>
 {{< /markdown >}}
 
 ## Opacity
@@ -73,11 +87,11 @@ Or, choose from any of the `.bg-opacity` utilities:
 <div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>
 {{< /example >}}
 
-## Sass
+## CSS
 
 In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.
 
-### Variables
+### Sass variables
 
 Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
 
@@ -91,7 +105,13 @@ Grayscale colors are also available, but only a subset are used to generate any
 
 {{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}}
 
-### Map
+Variables for setting `background-color` in `.bg-*-subtle` utilities in light and dark mode:
+
+{{< scss-docs name="theme-bg-subtle-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="theme-bg-subtle-dark-variables" file="scss/_variables-dark.scss" >}}
+
+### Sass maps
 
 Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
 
@@ -105,11 +125,17 @@ RGB colors are generated from a separate Sass map:
 
 {{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}}
 
-And background color opacities build on that with their own map that's consumed by the utilities API:
+Background color opacities build on that with their own map that's consumed by the utilities API:
 
 {{< scss-docs name="utilities-bg-colors" file="scss/_maps.scss" >}}
 
-### Mixins
+Color mode background colors are also available as a Sass map:
+
+{{< scss-docs name="theme-bg-subtle-map" file="scss/_maps.scss" >}}
+
+{{< scss-docs name="theme-bg-subtle-dark-map" file="scss/_maps.scss" >}}
+
+### Sass mixins
 
 **No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you'd like to create your own gradients.
 
@@ -117,7 +143,7 @@ And background color opacities build on that with their own map that's consumed
 
 {{< scss-docs name="gradient-mixins" file="scss/mixins/_gradients.scss" >}}
 
-### Utilities API
+### Sass utilities API
 
 Background utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.2/utilities/borders.md b/site/content/docs/5.3/utilities/borders.md
index 8d850a2..b4fa2f4 100644
--- a/site/content/docs/5.2/utilities/borders.md
+++ b/site/content/docs/5.3/utilities/borders.md
@@ -36,14 +36,20 @@ Or remove borders:
 
 ## Color
 
+{{< callout info >}}
+Border utilities like `.border-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.border-*-subtle` utility will. This will be resolved in v6.
+{{< /callout >}}
+
 Change the border color using utilities built on our theme colors.
 
 {{< example class="bd-example-border-utils" >}}
 {{< border.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
 <span class="border border-{{ .name }}"></span>
+<span class="border border-{{ .name }}-subtle"></span>
 {{- end -}}
 {{< /border.inline >}}
+<span class="border border-black"></span>
 <span class="border border-white"></span>
 {{< /example >}}
 
@@ -139,6 +145,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
@@ -153,11 +167,25 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from
 
 {{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}}
 
+Variables for setting `border-color` in `.border-*-subtle` utilities in light and dark mode:
+
+{{< scss-docs name="theme-border-subtle-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="theme-border-subtle-dark-variables" file="scss/_variables-dark.scss" >}}
+
+### Sass maps
+
+Color mode adaptive border colors are also available as a Sass map:
+
+{{< scss-docs name="theme-border-subtle-map" file="scss/_maps.scss" >}}
+
+{{< scss-docs name="theme-border-subtle-dark-map" file="scss/_maps.scss" >}}
+
 ### Sass mixins
 
 {{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}}
 
-### Utilities API
+### Sass utilities API
 
 Border utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.2/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md
index eb917f9..775457d 100644
--- a/site/content/docs/5.2/utilities/colors.md
+++ b/site/content/docs/5.3/utilities/colors.md
@@ -6,20 +6,34 @@ group: utilities
 toc: true
 ---
 
+{{< callout info >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
+{{< /callout >}}
+
 ## Colors
 
 Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states.
 
+{{< callout info >}}
+Color utilities like `.text-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.text-*-emphasis` utility will. This will be resolved in v6.
+{{< /callout >}}
+
 {{< example >}}
 {{< colors.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
 <p class="text-{{ .name }}{{ with .contrast_color }} bg-{{ . }}{{ end }}">.text-{{ .name }}</p>
+<p class="text-{{ .name }}-emphasis">.text-{{ .name }}-emphasis</p>
 {{- end -}}
 {{< /colors.inline >}}
+
 <p class="text-body">.text-body</p>
-<p class="text-muted">.text-muted</p>
+<p class="text-body-emphasis">.text-body-emphasis</p>
+<p class="text-body-secondary">.text-body-secondary</p>
+<p class="text-body-tertiary">.text-body-tertiary</p>
+
+<p class="text-black bg-white">.text-black</p>
 <p class="text-white bg-dark">.text-white</p>
-<p class="text-black-50">.text-black-50</p>
+<p class="text-black-50 bg-white">.text-black-50</p>
 <p class="text-white-50 bg-dark">.text-white-50</p>
 {{< /example >}}
 
@@ -27,8 +41,8 @@ Colorize text with color utilities. If you want to colorize links, you can use t
 **Deprecation:** With the addition of `.text-opacity-*` utilities and CSS variables for text utilities, `.text-black-50` and `.text-white-50` are deprecated as of v5.1.0. They'll be removed in v6.0.0.
 {{< /callout >}}
 
-{{< callout info >}}
-{{< partial "callout-warning-color-assistive-technologies.md" >}}
+{{< callout warning >}}
+**Deprecation:** With the addition of the expanded theme colors and variables, the `.text-muted` utility has been deprecated as of v5.3.0. Its default value has also been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
 {{< /callout >}}
 
 ## Opacity
@@ -72,11 +86,11 @@ Or, choose from any of the `.text-opacity` utilities:
 
 Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` or more semantic element with the desired class.
 
-## Sass
+## CSS
 
 In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.
 
-### Variables
+### Sass variables
 
 Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
 
@@ -88,7 +102,15 @@ Grayscale colors are also available, but only a subset are used to generate any
 
 {{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}}
 
-### Map
+{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}}
+
+Variables for setting colors in `.text-*-emphasis` utilities in light and dark mode:
+
+{{< scss-docs name="theme-text-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="theme-text-dark-variables" file="scss/_variables-dark.scss" >}}
+
+### Sass maps
 
 Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
 
@@ -102,11 +124,17 @@ RGB colors are generated from a separate Sass map:
 
 {{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}}
 
-And color opacities build on that with their own map that's consumed by the utilities API:
+Color opacities build on that with their own map that's consumed by the utilities API:
 
 {{< scss-docs name="utilities-text-colors" file="scss/_maps.scss" >}}
 
-### Utilities API
+Color mode adaptive text colors are also available as a Sass map:
+
+{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}}
+
+{{< scss-docs name="theme-text-dark-map" file="scss/_maps.scss" >}}
+
+### Sass utilities API
 
 Color utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.2/utilities/display.md b/site/content/docs/5.3/utilities/display.md
index 5ed825a..41541b9 100644
--- a/site/content/docs/5.2/utilities/display.md
+++ b/site/content/docs/5.3/utilities/display.md
@@ -26,6 +26,7 @@ Where *value* is one of:
 - `inline-block`
 - `block`
 - `grid`
+- `inline-grid`
 - `table`
 - `table-cell`
 - `table-row`
@@ -64,8 +65,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` |
@@ -89,6 +90,7 @@ Change the `display` value of elements when printing with our print display util
 - `.d-print-inline-block`
 - `.d-print-block`
 - `.d-print-grid`
+- `.d-print-inline-grid`
 - `.d-print-table`
 - `.d-print-table-row`
 - `.d-print-table-cell`
@@ -103,9 +105,9 @@ The print and display classes can be combined.
 <div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Utilities API
+### Sass utilities API
 
 Display utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.2/utilities/flex.md b/site/content/docs/5.3/utilities/flex.md
index 567befe..d0a92e5 100644
--- a/site/content/docs/5.2/utilities/flex.md
+++ b/site/content/docs/5.3/utilities/flex.md
@@ -82,34 +82,34 @@ Use `justify-content` utilities on flexbox containers to change the alignment of
 
 <div class="bd-example bd-example-flex">
   <div class="d-flex justify-content-start mb-3">
-    <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 bd-highlight">Justify</div>
+    <div class="p-2 bd-highlight">Content</div>
+    <div class="p-2 bd-highlight">Start</div>
   </div>
   <div class="d-flex justify-content-end mb-3">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+    <div class="p-2 bd-highlight">Justify</div>
+    <div class="p-2 bd-highlight">Content</div>
+    <div class="p-2 bd-highlight">End</div>
   </div>
   <div class="d-flex justify-content-center mb-3">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+    <div class="p-2 bd-highlight">Justify</div>
+    <div class="p-2 bd-highlight">Content</div>
+    <div class="p-2 bd-highlight">Center</div>
   </div>
   <div class="d-flex justify-content-between mb-3">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+    <div class="p-2 bd-highlight">Justify</div>
+    <div class="p-2 bd-highlight">Content</div>
+    <div class="p-2 bd-highlight">Between</div>
   </div>
   <div class="d-flex justify-content-around mb-3">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+    <div class="p-2 bd-highlight">Justify</div>
+    <div class="p-2 bd-highlight">Content</div>
+    <div class="p-2 bd-highlight">Around</div>
   </div>
   <div class="d-flex justify-content-evenly">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+    <div class="p-2 bd-highlight">Justify</div>
+    <div class="p-2 bd-highlight">Content</div>
+    <div class="p-2 bd-highlight">Evenly</div>
   </div>
 </div>
 
@@ -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.
 
@@ -657,9 +655,9 @@ And say you want to vertically center the content next to the image:
 </div>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Utilities API
+### Sass utilities API
 
 Flexbox utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.2/utilities/float.md b/site/content/docs/5.3/utilities/float.md
index a18c214..a8d3efb 100644
--- a/site/content/docs/5.2/utilities/float.md
+++ b/site/content/docs/5.3/utilities/float.md
@@ -39,9 +39,9 @@ Here are all the support classes:
 {{< /float.inline >}}
 {{< /markdown >}}
 
-## Sass
+## CSS
 
-### Utilities API
+### Sass utilities API
 
 Float utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.2/utilities/interactions.md b/site/content/docs/5.3/utilities/interactions.md
index 35ea2b9..d602850 100644
--- a/site/content/docs/5.2/utilities/interactions.md
+++ b/site/content/docs/5.3/utilities/interactions.md
@@ -31,11 +31,11 @@ The `.pe-none` class (and the `pointer-events` CSS property it sets) only preven
 If possible, the simpler solution is:
 
 - For form controls, add the `disabled` HTML attribute.
-* For links, remove the `href` attribute, making it a non-interactive anchor or placeholder link.
+- For links, remove the `href` attribute, making it a non-interactive anchor or placeholder link.
 
-## Sass
+## CSS
 
-### Utilities API
+### Sass utilities API
 
 Interaction utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.3/utilities/link.md b/site/content/docs/5.3/utilities/link.md
new file mode 100644
index 0000000..668af8c
--- /dev/null
+++ b/site/content/docs/5.3/utilities/link.md
@@ -0,0 +1,105 @@
+---
+layout: docs
+title: Link
+description: Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more.
+group: utilities
+toc: true
+added: 5.3
+---
+
+## Link opacity
+
+Change the alpha opacity of the link `rgba()` color value with utilities. Please be aware that changes to a color's opacity can lead to links with [*insufficient* contrast]({{< docsref "getting-started/accessibility#color-contrast" >}}).
+
+{{< example >}}
+<p><a class="link-opacity-10" href="#">Link opacity 10</a></p>
+<p><a class="link-opacity-25" href="#">Link opacity 25</a></p>
+<p><a class="link-opacity-50" href="#">Link opacity 50</a></p>
+<p><a class="link-opacity-75" href="#">Link opacity 75</a></p>
+<p><a class="link-opacity-100" href="#">Link opacity 100</a></p>
+{{< /example >}}
+
+You can even change the opacity level on hover.
+
+{{< example >}}
+<p><a class="link-opacity-10-hover" href="#">Link hover opacity 10</a></p>
+<p><a class="link-opacity-25-hover" href="#">Link hover opacity 25</a></p>
+<p><a class="link-opacity-50-hover" href="#">Link hover opacity 50</a></p>
+<p><a class="link-opacity-75-hover" href="#">Link hover opacity 75</a></p>
+<p><a class="link-opacity-100-hover" href="#">Link hover opacity 100</a></p>
+{{< /example >}}
+
+## Link underlines
+
+### Underline color
+
+Change the underline's color independent of the link text color.
+
+{{< example >}}
+{{< link-underline-colors.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<p><a href="#" class="link-underline-{{ .name }}">{{ .name | title }} underline</a></p>
+{{- end -}}
+{{< /link-underline-colors.inline >}}
+{{< /example >}}
+
+### Underline offset
+
+Change the underline's distance from your text. Offset is set in `em` units to automatically scale with the element's current `font-size`.
+
+{{< example >}}
+<p><a href="#">Default link</a></p>
+<p><a class="link-offset-1" href="#">Offset 1 link</a></p>
+<p><a class="link-offset-2" href="#">Offset 2 link</a></p>
+<p><a class="link-offset-3" href="#">Offset 3 link</a></p>
+{{< /example >}}
+
+### Underline opacity
+
+Change the underline's opacity. Requires adding `.link-underline` to first set an `rgba()` color we use to then modify the alpha opacity.
+
+{{< example >}}
+<p><a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Underline opacity 0</a></p>
+<p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p>
+<p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p>
+<p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p>
+<p><a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Underline opacity 75</a></p>
+<p><a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Underline opacity 100</a></p>
+{{< /example >}}
+
+### Hover variants
+
+Just like the `.link-opacity-*-hover` utilities, `.link-offset` and `.link-underline-opacity` utilities include `:hover` variants by default. Mix and match to create unique link styles.
+
+{{< example >}}
+<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#">
+  Underline opacity 0
+</a>
+{{< /example >}}
+
+## Colored links
+
+[Colored link helpers]({{< docsref "/helpers/colored-links/" >}}) have been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset.
+
+{{< example >}}
+{{< colored-links.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<p><a href="#" class="link-{{ .name }} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">{{ .name | title }} link</a></p>
+{{- end -}}
+{{< /colored-links.inline >}}
+<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>
+{{< /example >}}
+
+{{< callout info >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
+{{< /callout >}}
+
+## CSS
+
+In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.
+
+### Sass utilities API
+
+Link utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-links" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.3/utilities/object-fit.md b/site/content/docs/5.3/utilities/object-fit.md
new file mode 100644
index 0000000..babc70a
--- /dev/null
+++ b/site/content/docs/5.3/utilities/object-fit.md
@@ -0,0 +1,63 @@
+---
+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" color="#868e96" background="#dee2e6" >}}
+{{< placeholder width="140" height="120" class="object-fit-cover border rounded" text="Object fit cover" markup="img" color="#868e96" background="#dee2e6" >}}
+{{< placeholder width="140" height="120" class="object-fit-fill border rounded" text="Object fit fill" markup="img" color="#868e96" background="#dee2e6" >}}
+{{< placeholder width="140" height="120" class="object-fit-scale border rounded" text="Object fit scale down" markup="img" color="#868e96" background="#dee2e6" >}}
+{{< placeholder width="140" height="120" class="object-fit-none border rounded" text="Object fit none" markup="img" color="#868e96" background="#dee2e6" >}}
+{{< /example >}}
+
+## Responsive
+
+Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `xxl`. Classes can be combined for various effects as you need.
+
+{{< example class="d-flex overflow-auto" >}}
+{{< placeholder width="140" height="80" class="object-fit-sm-contain border rounded" text="Contain on sm" markup="img" color="#868e96" background="#dee2e6" >}}
+{{< placeholder width="140" height="80" class="object-fit-md-contain border rounded" text="Contain on md" markup="img" color="#868e96" background="#dee2e6" >}}
+{{< placeholder width="140" height="80" class="object-fit-lg-contain border rounded" text="Contain on lg" markup="img" color="#868e96" background="#dee2e6" >}}
+{{< placeholder width="140" height="80" class="object-fit-xl-contain border rounded" text="Contain on xl" markup="img" color="#868e96" background="#dee2e6" >}}
+{{< placeholder width="140" height="80" class="object-fit-xxl-contain border rounded" text="Contain on xxl" markup="img" color="#868e96" background="#dee2e6" >}}
+{{< /example >}}
+
+## Video
+
+The `.object-fit-{value}` and responsive `.object-fit-{breakpoint}-{value}` utilities also work on `<video>` elements.
+
+```html
+<video src="..." class="object-fit-contain" autoplay></video>
+<video src="..." class="object-fit-cover" autoplay></video>
+<video src="..." class="object-fit-fill" autoplay></video>
+<video src="..." class="object-fit-scale" autoplay></video>
+<video src="..." class="object-fit-none" autoplay></video>
+```
+
+## CSS
+
+### Sass utilities API
+
+Object fit utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-object-fit" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.2/utilities/opacity.md b/site/content/docs/5.3/utilities/opacity.md
index 5cc4c22..5d253a7 100644
--- a/site/content/docs/5.2/utilities/opacity.md
+++ b/site/content/docs/5.3/utilities/opacity.md
@@ -24,7 +24,9 @@ Set the `opacity` of an element using `.opacity-{value}` utilities.
 <div class="opacity-25">...</div>
 ```
 
-### Utilities API
+## CSS
+
+### Sass utilities API
 
 Opacity utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.3/utilities/overflow.md b/site/content/docs/5.3/utilities/overflow.md
new file mode 100644
index 0000000..9c8573c
--- /dev/null
+++ b/site/content/docs/5.3/utilities/overflow.md
@@ -0,0 +1,99 @@
+---
+layout: docs
+title: Overflow
+description: Use these shorthand utilities for quickly configuring how content overflows an element.
+group: utilities
+toc: true
+---
+
+## Overflow
+
+Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default.
+
+<div class="bd-example d-md-flex">
+  <div class="overflow-auto p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
+    This is an example of using <code>.overflow-auto</code> on an element with set width and height dimensions. By design, this content will vertically scroll.
+  </div>
+  <div class="overflow-hidden p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
+    This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions.
+  </div>
+  <div class="overflow-visible p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
+    This is an example of using <code>.overflow-visible</code> on an element with set width and height dimensions.
+  </div>
+  <div class="overflow-scroll p-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
+    This is an example of using <code>.overflow-scroll</code> on an element with set width and height dimensions.
+  </div>
+</div>
+
+```html
+<div class="overflow-auto">...</div>
+<div class="overflow-hidden">...</div>
+<div class="overflow-visible">...</div>
+<div class="overflow-scroll">...</div>
+```
+
+### `overflow-x`
+
+Adjust the `overflow-x` property to affect the overflow of content horizontally.
+
+<div class="bd-example d-md-flex">
+  <div class="overflow-x-auto p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px; white-space: nowrap;">
+    <div><code>.overflow-x-auto</code> example on an element</div>
+    <div> with set width and height dimensions.</div>
+  </div>
+  <div class="overflow-x-hidden p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
+    <div><code>.overflow-x-hidden</code> example</div>
+    <div>on an element with set width and height dimensions.</div>
+  </div>
+  <div class="overflow-x-visible p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
+    <div><code>.overflow-x-visible</code> example </div>
+    <div>on an element with set width and height dimensions.</div>
+  </div>
+  <div class="overflow-x-scroll p-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
+    <div><code>.overflow-x-scroll</code> example on an element</div>
+    <div> with set width and height dimensions.</div>
+  </div>
+</div>
+
+```html
+<div class="overflow-x-auto">...</div>
+<div class="overflow-x-hidden">...</div>
+<div class="overflow-x-visible">...</div>
+<div class="overflow-x-scroll">...</div>
+```
+
+### `overflow-y`
+
+Adjust the `overflow-y` property to affect the overflow of content vertically.
+
+<div class="bd-example d-md-flex">
+  <div class="overflow-y-auto p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
+    <code>.overflow-y-auto</code> example on an element with set width and height dimensions.
+  </div>
+  <div class="overflow-y-hidden p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
+    <code>.overflow-y-hidden</code> example on an element with set width and height dimensions.
+  </div>
+  <div class="overflow-y-visible p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
+    <code>.overflow-y-visible</code> example on an element with set width and height dimensions.
+  </div>
+  <div class="overflow-y-scroll p-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
+    <code>.overflow-y-scroll</code> example on an element with set width and height dimensions.
+  </div>
+</div>
+
+```html
+<div class="overflow-y-auto">...</div>
+<div class="overflow-y-hidden">...</div>
+<div class="overflow-y-visible">...</div>
+<div class="overflow-y-scroll">...</div>
+```
+
+Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.
+
+## CSS
+
+### Sass utilities API
+
+Overflow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-overflow" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.2/utilities/position.md b/site/content/docs/5.3/utilities/position.md
index 5a6e849..a2ef4ec 100644
--- a/site/content/docs/5.2/utilities/position.md
+++ b/site/content/docs/5.3/utilities/position.md
@@ -88,14 +88,14 @@ By adding `.translate-middle-x` or `.translate-middle-y` classes, elements can b
 
 Here are some real life examples of these classes:
 
-{{< example class="bd-example-position-examples d-flex justify-content-around" >}}
+{{< example class="bd-example-position-examples d-flex justify-content-around align-items-center" >}}
 <button type="button" class="btn btn-primary position-relative">
   Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
 </button>
 
-<button type="button" class="btn btn-dark position-relative">
-  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
-</button>
+<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill">
+  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
+</div>
 
 <button type="button" class="btn btn-primary position-relative">
   Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
@@ -106,8 +106,8 @@ You can use these classes with existing components to create new ones. Remember
 
 {{< example class="bd-example-position-examples" >}}
 <div class="position-relative m-4">
-  <div class="progress" style="height: 1px;">
-    <div class="progress-bar" role="progressbar" aria-label="Progress" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+  <div class="progress" role="progressbar" aria-label="Progress" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: 1px;">
+    <div class="progress-bar" style="width: 50%"></div>
   </div>
   <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
   <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
@@ -115,15 +115,15 @@ You can use these classes with existing components to create new ones. Remember
 </div>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Maps
+### Sass maps
 
 Default position utility values are declared in a Sass map, then used to generate our utilities.
 
 {{< scss-docs name="position-map" file="scss/_variables.scss" >}}
 
-### Utilities API
+### Sass utilities API
 
 Position utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.2/utilities/shadows.md b/site/content/docs/5.3/utilities/shadows.md
index bb5ef44..94868a1 100644
--- a/site/content/docs/5.2/utilities/shadows.md
+++ b/site/content/docs/5.3/utilities/shadows.md
@@ -10,20 +10,20 @@ toc: true
 
 While shadows on components are disabled by default in Bootstrap and can be enabled via `$enable-shadows`, you can also quickly add or remove a shadow with our `box-shadow` utility classes. Includes support for `.shadow-none` and three default sizes (which have associated variables to match).
 
-{{< example >}}
-<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
-<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
-<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
-<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>
+{{< example class="overflow-hidden" >}}
+<div class="shadow-none p-3 mb-5 bg-body-tertiary rounded">No shadow</div>
+<div class="shadow-sm p-3 mb-5 bg-body-tertiary rounded">Small shadow</div>
+<div class="shadow p-3 mb-5 bg-body-tertiary rounded">Regular shadow</div>
+<div class="shadow-lg p-3 mb-5 bg-body-tertiary rounded">Larger shadow</div>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
 
 {{< scss-docs name="box-shadow-variables" file="scss/_variables.scss" >}}
 
-### Utilities API
+### Sass utilities API
 
 Shadow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.3/utilities/sizing.md b/site/content/docs/5.3/utilities/sizing.md
new file mode 100644
index 0000000..f588172
--- /dev/null
+++ b/site/content/docs/5.3/utilities/sizing.md
@@ -0,0 +1,62 @@
+---
+layout: docs
+title: Sizing
+description: Easily make an element as wide or as tall with our width and height utilities.
+group: utilities
+toc: true
+---
+
+## Relative to the parent
+
+Width and height utilities are generated from the utility API in `_utilities.scss`. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default. Modify those values as you need to generate different utilities here.
+
+{{< example class="bd-example-flex" >}}
+<div class="w-25 p-3">Width 25%</div>
+<div class="w-50 p-3">Width 50%</div>
+<div class="w-75 p-3">Width 75%</div>
+<div class="w-100 p-3">Width 100%</div>
+<div class="w-auto p-3">Width auto</div>
+{{< /example >}}
+
+{{< example class="bd-example-flex" >}}
+<div style="height: 100px;">
+  <div class="h-25 d-inline-block" style="width: 120px;">Height 25%</div>
+  <div class="h-50 d-inline-block" style="width: 120px;">Height 50%</div>
+  <div class="h-75 d-inline-block" style="width: 120px;">Height 75%</div>
+  <div class="h-100 d-inline-block" style="width: 120px;">Height 100%</div>
+  <div class="h-auto d-inline-block" style="width: 120px;">Height auto</div>
+</div>
+{{< /example >}}
+
+You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
+
+{{< example class="bd-example-flex" >}}
+<div style="width: 50%; height: 100px;">
+  <div class="mw-100" style="width: 200%;">Max-width 100%</div>
+</div>
+{{< /example >}}
+
+{{< example class="bd-example-flex" >}}
+<div style="height: 100px;">
+  <div class="mh-100" style="width: 100px; height: 200px;">Max-height 100%</div>
+</div>
+{{< /example >}}
+
+## Relative to the viewport
+
+You can also use utilities to set the width and height relative to the viewport.
+
+```html
+<div class="min-vw-100">Min-width 100vw</div>
+<div class="min-vh-100">Min-height 100vh</div>
+<div class="vw-100">Width 100vw</div>
+<div class="vh-100">Height 100vh</div>
+```
+
+## CSS
+
+### Sass utilities API
+
+Sizing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-sizing" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.2/utilities/spacing.md b/site/content/docs/5.3/utilities/spacing.md
index 1e5f6d3..2562b8d 100644
--- a/site/content/docs/5.2/utilities/spacing.md
+++ b/site/content/docs/5.3/utilities/spacing.md
@@ -75,13 +75,13 @@ Here are some representative examples of these classes:
 Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a `width` set—by setting the horizontal margins to `auto`.
 
 <div class="bd-example">
-  <div class="mx-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
+  <div class="mx-auto p-2" style="width: 200px; background-color: rgba(var(--bd-violet-rgb),.15); border: rgba(var(--bd-violet-rgb),.3) solid 1px;">
     Centered element
   </div>
 </div>
 
 ```html
-<div class="mx-auto" style="width: 200px;">
+<div class="mx-auto p-2" style="width: 200px;">
   Centered element
 </div>
 ```
@@ -100,27 +100,54 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
 
 ## Gap
 
-When using `display: grid`, you can make use of `gap` utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a `display: grid` container). Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
+When using `display: grid` or `display: flex`, you can make use of `gap` utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
 
-{{< example html >}}
-<div class="d-grid gap-3">
-  <div class="p-2 bg-light border">Grid item 1</div>
-  <div class="p-2 bg-light border">Grid item 2</div>
-  <div class="p-2 bg-light border">Grid item 3</div>
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid gap-3">
+  <div class="p-2 g-col-6">Grid item 1</div>
+  <div class="p-2 g-col-6">Grid item 2</div>
+  <div class="p-2 g-col-6">Grid item 3</div>
+  <div class="p-2 g-col-6">Grid item 4</div>
 </div>
 {{< /example >}}
 
 Support includes responsive options for all of Bootstrap's grid breakpoints, as well as six sizes from the `$spacers` map (`0`–`5`). There is no `.gap-auto` utility class as it's effectively the same as `.gap-0`.
 
-## Sass
+### row-gap
 
-### Maps
+`row-gap` sets the vertical space between children items in the specified container.
+
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid gap-0 row-gap-3">
+  <div class="p-2 g-col-6">Grid item 1</div>
+  <div class="p-2 g-col-6">Grid item 2</div>
+  <div class="p-2 g-col-6">Grid item 3</div>
+  <div class="p-2 g-col-6">Grid item 4</div>
+</div>
+{{< /example >}}
+
+### column-gap
+
+`column-gap` sets the horizontal space between children items in the specified container.
+
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid gap-0 column-gap-3">
+  <div class="p-2 g-col-6">Grid item 1</div>
+  <div class="p-2 g-col-6">Grid item 2</div>
+  <div class="p-2 g-col-6">Grid item 3</div>
+  <div class="p-2 g-col-6">Grid item 4</div>
+</div>
+{{< /example >}}
+
+## CSS
+
+### Sass maps
 
 Spacing utilities are declared via Sass map and then generated with our utilities API.
 
 {{< scss-docs name="spacer-variables-maps" file="scss/_variables.scss" >}}
 
-### Utilities API
+### Sass utilities API
 
 Spacing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.2/utilities/text.md b/site/content/docs/5.3/utilities/text.md
index 060194f..5787f95 100644
--- a/site/content/docs/5.2/utilities/text.md
+++ b/site/content/docs/5.3/utilities/text.md
@@ -38,7 +38,7 @@ Wrap text with a `.text-wrap` class.
 Prevent text from wrapping with a `.text-nowrap` class.
 
 {{< example >}}
-<div class="text-nowrap bg-light border" style="width: 8rem;">
+<div class="text-nowrap bg-body-secondary border" style="width: 8rem;">
   This text should overflow the parent.
 </div>
 {{< /example >}}
@@ -90,6 +90,7 @@ Quickly change the `font-weight` or `font-style` of text with these utilities. `
 <p class="fw-bold">Bold text.</p>
 <p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
 <p class="fw-semibold">Semibold weight text.</p>
+<p class="fw-medium">Medium weight text.</p>
 <p class="fw-normal">Normal weight text.</p>
 <p class="fw-light">Light weight text.</p>
 <p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
@@ -121,7 +122,7 @@ Change a selection to our monospace font stack with `.font-monospace`.
 Reset a text or link's color with `.text-reset`, so that it inherits the color from its parent.
 
 {{< example >}}
-<p class="text-muted">
+<p class="text-body-secondary">
   Muted text with a <a href="#" class="text-reset">reset link</a>.
 </p>
 {{< /example >}}
@@ -136,19 +137,23 @@ Decorate text in components with text decoration classes.
 <a href="#" class="text-decoration-none">This link has its text decoration removed</a>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
+
+Default type and font related Sass variables:
 
 {{< scss-docs name="font-variables" file="scss/_variables.scss" >}}
 
-### Maps
+### Sass maps
 
 Font-size utilities are generated from this map, in combination with our utilities API.
 
 {{< scss-docs name="font-sizes" file="scss/_variables.scss" >}}
 
-### Utilities API
+{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}}
+
+### Sass utilities API
 
 Font and text utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.2/utilities/vertical-align.md b/site/content/docs/5.3/utilities/vertical-align.md
index 9fe0eeb..c24e661 100644
--- a/site/content/docs/5.2/utilities/vertical-align.md
+++ b/site/content/docs/5.3/utilities/vertical-align.md
@@ -39,9 +39,9 @@ With table cells:
 </table>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Utilities API
+### Sass utilities API
 
 Vertical align utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.2/utilities/visibility.md b/site/content/docs/5.3/utilities/visibility.md
index 61eb302..e2c6bb6 100644
--- a/site/content/docs/5.2/utilities/visibility.md
+++ b/site/content/docs/5.3/utilities/visibility.md
@@ -28,9 +28,9 @@ Apply `.visible` or `.invisible` as needed.
 }
 ```
 
-## Sass
+## CSS
 
-### Utilities API
+### Sass utilities API
 
 Visibility utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.3/utilities/z-index.md b/site/content/docs/5.3/utilities/z-index.md
new file mode 100644
index 0000000..64ed84b
--- /dev/null
+++ b/site/content/docs/5.3/utilities/z-index.md
@@ -0,0 +1,50 @@
+---
+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"><span>z-3</span></div>
+<div class="z-2 position-absolute p-5 rounded-3"><span>z-2</span></div>
+<div class="z-1 position-absolute p-5 rounded-3"><span>z-1</span></div>
+<div class="z-0 position-absolute p-5 rounded-3"><span>z-0</span></div>
+<div class="z-n1 position-absolute p-5 rounded-3"><span>z-n1</span></div>
+{{< /example >}}
+
+## Overlays
+
+Bootstrap overlay components—dropdown, modal, offcanvas, popover, toast, and tooltip—all have their own `z-index` values to ensure a usable experience with competing "layers" of an interface.
+
+Read about them in the [`z-index` layout page]({{< docsref "/layout/z-index" >}}).
+
+## Component approach
+
+On some components, we use our low-level `z-index` values to manage repeating elements that overlap one another (like buttons in a button group or items in a list group).
+
+Learn about our [`z-index` approach]({{< docsref "/extend/approach#z-index-scales" >}}).
+
+## CSS
+
+### Sass maps
+
+Customize this Sass map to change the available values and generated utilities.
+
+{{< scss-docs name="zindex-levels-map" file="scss/_variables.scss" >}}
+
+### Sass utilities API
+
+Position utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-zindex" file="scss/_utilities.scss" >}}