From: Ben Koshy <benkoshy@hotmail.com>
Date: Wed, 28 Dec 2022 21:19:55 +0000 (+1100)
Subject: Improve readability in docs flex page (#34647)
X-Git-Tag: v5.3.0-alpha2~215
X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=752be8657d934d2b44716ca2bb5bfff9193ca45f;p=thirdparty%2Fbootstrap.git

Improve readability in docs flex page (#34647)

It's not easy to otherwise correlate the examples with the relevant classes: you'd have to mentally count and correlate them. This obviates that need. Please see the image below to see the usefulness of the above.

Co-authored-by: Mark Otto <markdotto@gmail.com>
---

diff --git a/site/content/docs/5.3/utilities/flex.md b/site/content/docs/5.3/utilities/flex.md
index e295034345..564c39f86c 100644
--- a/site/content/docs/5.3/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>