From: Christian Oliff <christian_oliff@trimble.com>
Date: Mon, 4 May 2026 18:39:49 +0000 (+0900)
Subject: v6: Update alignment examples text and widths (#42392)
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ce18b73ce8ba924d7e964a53e7c7e335e8d78ed6;p=thirdparty%2Fbootstrap.git

v6: Update alignment examples text and widths (#42392)

Replace generic "Flex item"/"Grid item" placeholders with descriptive words (e.g. "Align", "Items", "Start/End/Center/Stretch") across align-items, justify-items, and place-items docs. Add w-5 utility to flex examples to give consistent item widths so alignment demos render more clearly. Files updated: site/src/content/docs/utilities/align-items.mdx, justify-items.mdx, place-items.mdx.
---

diff --git a/site/src/content/docs/utilities/align-items.mdx b/site/src/content/docs/utilities/align-items.mdx
index 429ec2e4ba..60d748b2c4 100644
--- a/site/src/content/docs/utilities/align-items.mdx
+++ b/site/src/content/docs/utilities/align-items.mdx
@@ -17,29 +17,29 @@ Use `align-items` utilities on flexbox containers to change the alignment of fle
 
 <div class="bd-example bd-example-flex">
   <div class="d-flex align-items-start mb-3" style="height: 100px">
-    <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 w-5">Align</div>
+    <div class="p-2 w-5">Items</div>
+    <div class="p-2 w-5">Start</div>
   </div>
   <div class="d-flex align-items-end mb-3" style="height: 100px">
-    <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 w-5">Align</div>
+    <div class="p-2 w-5">Items</div>
+    <div class="p-2 w-5">End</div>
   </div>
   <div class="d-flex align-items-center mb-3" style="height: 100px">
-    <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 w-5">Align</div>
+    <div class="p-2 w-5">Items</div>
+    <div class="p-2 w-5">Center</div>
   </div>
   <div class="d-flex align-items-baseline mb-3" style="height: 100px">
-    <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 w-5">Align</div>
+    <div class="p-2 w-5">Items</div>
+    <div class="p-2 w-5">Baseline</div>
   </div>
   <div class="d-flex align-items-stretch" style="height: 100px">
-    <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 w-5">Align</div>
+    <div class="p-2 w-5">Items</div>
+    <div class="p-2 w-5">Stretch</div>
   </div>
 </div>
 
diff --git a/site/src/content/docs/utilities/justify-items.mdx b/site/src/content/docs/utilities/justify-items.mdx
index 74a724f090..700f267065 100644
--- a/site/src/content/docs/utilities/justify-items.mdx
+++ b/site/src/content/docs/utilities/justify-items.mdx
@@ -19,24 +19,24 @@ Use `justify-items` utilities to control the horizontal alignment of grid items.
 
 <div class="bd-example bd-example-flex vstack gap-3">
   <div class="d-grid gap-3 justify-items-start" style="grid-template-columns: 1fr 1fr 1fr;">
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
+    <div class="p-2">Justify</div>
+    <div class="p-2">Items</div>
+    <div class="p-2">Start</div>
   </div>
   <div class="d-grid gap-3 justify-items-end" style="grid-template-columns: 1fr 1fr 1fr;">
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
+    <div class="p-2">Justify</div>
+    <div class="p-2">Items</div>
+    <div class="p-2">End</div>
   </div>
   <div class="d-grid gap-3 justify-items-center" style="grid-template-columns: 1fr 1fr 1fr;">
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
+    <div class="p-2">Justify</div>
+    <div class="p-2">Items</div>
+    <div class="p-2">Center</div>
   </div>
   <div class="d-grid gap-3 justify-items-stretch" style="grid-template-columns: 1fr 1fr 1fr;">
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
+    <div class="p-2">Justify</div>
+    <div class="p-2">Items</div>
+    <div class="p-2">Stretch</div>
   </div>
 </div>
 
diff --git a/site/src/content/docs/utilities/place-items.mdx b/site/src/content/docs/utilities/place-items.mdx
index 98bb2613dd..eb73840944 100644
--- a/site/src/content/docs/utilities/place-items.mdx
+++ b/site/src/content/docs/utilities/place-items.mdx
@@ -19,24 +19,24 @@ Use `place-items` utilities to control the alignment of grid items. Choose from
 
 <div class="bd-example bd-example-flex vstack gap-3">
   <div class="d-grid gap-3 place-items-start" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
+    <div class="p-2">Place</div>
+    <div class="p-2">Items</div>
+    <div class="p-2">Start</div>
   </div>
   <div class="d-grid gap-3 place-items-end" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
+    <div class="p-2">Place</div>
+    <div class="p-2">Items</div>
+    <div class="p-2">End</div>
   </div>
   <div class="d-grid gap-3 place-items-center" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
+    <div class="p-2">Place</div>
+    <div class="p-2">Items</div>
+    <div class="p-2">Center</div>
   </div>
   <div class="d-grid gap-3 place-items-stretch" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
-    <div class="p-2">Grid item</div>
+    <div class="p-2">Place</div>
+    <div class="p-2">Items</div>
+    <div class="p-2">Stretch</div>
   </div>
 </div>