8 files changed, 71 insertions, 50 deletions
diff --git a/site/content/docs/5.2/layout/breakpoints.md b/site/content/docs/5.3/layout/breakpoints.md
index e773b8f..1667fd9 100644
--- a/site/content/docs/5.2/layout/breakpoints.md
+++ b/site/content/docs/5.3/layout/breakpoints.md
@@ -3,7 +3,7 @@ layout: docs
 title: Breakpoints
 description: Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.
 group: layout
-aliases: "/docs/5.2/layout/"
+aliases: "/docs/5.3/layout/"
 toc: true
 ---
 
@@ -37,7 +37,7 @@ These breakpoints are customizable via Sass—you'll find them in a Sass map in
 
 {{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
 
-For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).
+For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]({{< docsref "/layout/grid#css" >}}).
 
 ## Media queries
 
@@ -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
diff --git a/site/content/docs/5.2/layout/columns.md b/site/content/docs/5.3/layout/columns.md
index e2dbd3f..e6f5255 100644
--- a/site/content/docs/5.2/layout/columns.md
+++ b/site/content/docs/5.3/layout/columns.md
@@ -24,6 +24,8 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
 
 ### Vertical alignment
 
+Change the vertical alignment with any of the responsive `align-items-*` classes.
+
 {{< example class="bd-example-row bd-example-row-flex-cols" >}}
 <div class="container text-center">
   <div class="row align-items-start">
@@ -37,6 +39,11 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
       One of three columns
     </div>
   </div>
+</div>
+{{< /example >}}
+
+{{< example class="bd-example-row bd-example-row-flex-cols" >}}
+<div class="container text-center">
   <div class="row align-items-center">
     <div class="col">
       One of three columns
@@ -48,6 +55,11 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
       One of three columns
     </div>
   </div>
+</div>
+{{< /example >}}
+
+{{< example class="bd-example-row bd-example-row-flex-cols" >}}
+<div class="container text-center">
   <div class="row align-items-end">
     <div class="col">
       One of three columns
@@ -62,6 +74,8 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
 </div>
 {{< /example >}}
 
+Or, change the alignment of each column individually with any of the responsive `.align-self-*` classes.
+
 {{< example class="bd-example-row bd-example-row-flex-cols" >}}
 <div class="container text-center">
   <div class="row">
@@ -80,6 +94,8 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
 
 ### Horizontal alignment
 
+Change the horizontal alignment with any of the responsive `justify-content-*` classes.
+
 {{< example class="bd-example-row" >}}
 <div class="container text-center">
   <div class="row justify-content-start">
@@ -187,7 +203,7 @@ You may also apply this break at specific breakpoints with our [responsive displ
 
 ### Order classes
 
-Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers.
+Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers. If you need more `.order-*` classes, you can modify the default number via Sass variable.
 
 {{< example class="bd-example-row" >}}
 <div class="container text-center">
@@ -287,11 +303,12 @@ With the move to flexbox in v4, you can use margin utilities like `.me-auto` to
 
 The `.col-*` classes can also be used outside a `.row` to give an element a specific width. Whenever column classes are used as non-direct children of a row, the paddings are omitted.
 
-{{< example >}}
-<div class="col-3 bg-light p-3 border">
+{{< example class="bd-example-row" >}}
+<div class="col-3 p-3 mb-2">
   .col-3: width of 25%
 </div>
-<div class="col-sm-9 bg-light p-3 border">
+
+<div class="col-sm-9 p-3">
   .col-sm-9: width of 75% above sm breakpoint
 </div>
 {{< /example >}}
diff --git a/site/content/docs/5.2/layout/containers.md b/site/content/docs/5.3/layout/containers.md
index 6801aca..e0e8d9a 100644
--- a/site/content/docs/5.2/layout/containers.md
+++ b/site/content/docs/5.3/layout/containers.md
@@ -23,13 +23,13 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
 {{< bs-table "table" >}}
 |  | Extra small<div class="fw-normal">&lt;576px</div> | Small<div class="fw-normal">&ge;576px</div> | Medium<div class="fw-normal">&ge;768px</div> | Large<div class="fw-normal">&ge;992px</div> | X-Large<div class="fw-normal">&ge;1200px</div> | XX-Large<div class="fw-normal">&ge;1400px</div> |
 | --- | --- | --- | --- | --- | --- | --- |
-| `.container` | <span class="text-muted">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
-| `.container-sm` | <span class="text-muted">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
-| `.container-md` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 720px | 960px | 1140px | 1320px |
-| `.container-lg` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 960px | 1140px | 1320px |
-| `.container-xl` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 1140px | 1320px |
-| `.container-xxl` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 1320px |
-| `.container-fluid` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> |
+| `.container` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
+| `.container-sm` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
+| `.container-md` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 720px | 960px | 1140px | 1320px |
+| `.container-lg` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 960px | 1140px | 1320px |
+| `.container-xl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1140px | 1320px |
+| `.container-xxl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1320px |
+| `.container-fluid` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> |
 {{< /bs-table >}}
 
 ## Default container
@@ -64,12 +64,18 @@ Use `.container-fluid` for a full width container, spanning the entire width of
 </div>
 ```
 
-## Sass
+## CSS
+
+### Sass variables
 
 As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in `_variables.scss`) that powers them:
 
 {{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}}
 
+For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#css" >}}).
+
+### Sass mixins
+
 In addition to customizing the Sass, you can also create your own containers with our Sass mixin.
 
 ```scss
@@ -87,5 +93,3 @@ In addition to customizing the Sass, you can also create your own containers wit
   @include make-container();
 }
 ```
-
-For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).
diff --git a/site/content/docs/5.2/layout/css-grid.md b/site/content/docs/5.3/layout/css-grid.md
index 397733c..397733c 100644
--- a/site/content/docs/5.2/layout/css-grid.md
+++ b/site/content/docs/5.3/layout/css-grid.md
diff --git a/site/content/docs/5.2/layout/grid.md b/site/content/docs/5.3/layout/grid.md
index a9d0037..1783410 100644
--- a/site/content/docs/5.2/layout/grid.md
+++ b/site/content/docs/5.3/layout/grid.md
@@ -46,7 +46,7 @@ Breaking it down, here's how the grid system comes together:
 
 - **Gutters are also responsive and customizable.** [Gutter classes are available]({{< docsref "/layout/gutters" >}}) across all breakpoints, with all the same sizes as our [margin and padding spacing]({{< docsref "/utilities/spacing" >}}). Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters.
 
-- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#sass) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
+- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#sass-variables) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
 
 Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9).
 
@@ -409,11 +409,11 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
 </div>
 {{< /example >}}
 
-## Sass
+## CSS
 
 When using Bootstrap's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
 
-### Variables
+### Sass variables
 
 Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
 
@@ -427,7 +427,7 @@ $grid-row-columns:  6;
 
 {{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}}
 
-### Mixins
+### Sass mixins
 
 Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
 
diff --git a/site/content/docs/5.2/layout/gutters.md b/site/content/docs/5.3/layout/gutters.md
index 5862094..a5b0772 100644
--- a/site/content/docs/5.2/layout/gutters.md
+++ b/site/content/docs/5.3/layout/gutters.md
@@ -18,14 +18,14 @@ toc: true
 
 `.gx-*` classes can be used to control the horizontal gutter widths. The `.container` or `.container-fluid` parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we've increased the padding with `.px-4`:
 
-{{< example >}}
+{{< example class="bd-example-cols" >}}
 <div class="container px-4 text-center">
   <div class="row gx-5">
     <div class="col">
-     <div class="p-3 border bg-light">Custom column padding</div>
+     <div class="p-3">Custom column padding</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
   </div>
 </div>
@@ -33,14 +33,14 @@ toc: true
 
 An alternative solution is to add a wrapper around the `.row` with the `.overflow-hidden` class:
 
-{{< example >}}
+{{< example class="bd-example-cols" >}}
 <div class="container overflow-hidden text-center">
   <div class="row gx-5">
     <div class="col">
-     <div class="p-3 border bg-light">Custom column padding</div>
+     <div class="p-3">Custom column padding</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
   </div>
 </div>
@@ -50,20 +50,20 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
 
 `.gy-*` classes can be used to control the vertical gutter widths within a row when columns wrap to new lines. Like the horizontal gutters, the vertical gutters can cause some overflow below the `.row` at the end of a page. If this occurs, you add a wrapper around `.row` with the `.overflow-hidden` class:
 
-{{< example >}}
+{{< example class="bd-example-cols" >}}
 <div class="container overflow-hidden text-center">
   <div class="row gy-5">
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
   </div>
 </div>
@@ -71,22 +71,22 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
 
 ## Horizontal & vertical gutters
 
-`.g-*` classes can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won't be a need to add the `.overflow-hidden` wrapper class.
+Use `.g-*` classes to control the horizontal and vertical grid gutters. In the example below, we use a smaller gutter width, so there isn't a need for the `.overflow-hidden` wrapper class.
 
-{{< example >}}
+{{< example class="bd-example-cols" >}}
 <div class="container text-center">
   <div class="row g-2">
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
   </div>
 </div>
@@ -96,38 +96,38 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
 
 Gutter classes can also be added to [row columns]({{< docsref "/layout/grid#row-columns" >}}). In the following example, we use responsive row columns and responsive gutter classes.
 
-{{< example >}}
+{{< example class="bd-example-cols" >}}
 <div class="container text-center">
   <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
   </div>
 </div>
diff --git a/site/content/docs/5.2/layout/utilities.md b/site/content/docs/5.3/layout/utilities.md
index 009d241..009d241 100644
--- a/site/content/docs/5.2/layout/utilities.md
+++ b/site/content/docs/5.3/layout/utilities.md
diff --git a/site/content/docs/5.2/layout/z-index.md b/site/content/docs/5.3/layout/z-index.md
index 1870d05..1870d05 100644
--- a/site/content/docs/5.2/layout/z-index.md
+++ b/site/content/docs/5.3/layout/z-index.md