Harmonize the doc

twbs · Jan 17, 2023 · 5dc7f4c · 5dc7f4c
1 parent e8b7d38
commit 5dc7f4c
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 14 deletions.
diff --git a/site/content/docs/5.3/layout/columns.md b/site/content/docs/5.3/layout/columns.md
@@ -94,6 +94,8 @@ Or, change the alignment of each column individually with any of the responsive
 
 ### 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">

diff --git a/site/content/docs/5.3/utilities/sizing.md b/site/content/docs/5.3/utilities/sizing.md
@@ -18,25 +18,27 @@ Width and height utilities are generated from the utility API in `_utilities.scs
 <div class="w-auto p-3">Width auto</div>
 {{< /example >}}
 
-{{< example >}}
-<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
-  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
-  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
-  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
-  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
-  <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
+{{< 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 >}}
-{{< placeholder width="100%" height="100" class="mw-100" text="Max-width 100%" >}}
+{{< 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 >}}
-<div style="height: 100px; background-color: rgba(255,0,0,.1);">
-  <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,.1);">Max-height 100%</div>
+{{< example class="bd-example-flex" >}}
+<div style="height: 100px;">
+  <div class="mh-100" style="width: 100px; height: 200px;">Max-height 100%</div>
 </div>
 {{< /example >}}
 

diff --git a/site/content/docs/5.3/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>
 ```