Skip to content

Commit ce18b73

Browse files
coliffcoliff
authored
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.
1 parent ee436ef commit ce18b73

3 files changed

Lines changed: 39 additions & 39 deletions

File tree

‎site/src/content/docs/utilities/align-items.mdx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,29 +17,29 @@ Use `align-items` utilities on flexbox containers to change the alignment of fle
1717

1818
<div class="bd-example bd-example-flex">
1919
<div class="d-flex align-items-start mb-3" style="height: 100px">
20-
<div class="p-2">Flex item</div>
21-
<div class="p-2">Flex item</div>
22-
<div class="p-2">Flex item</div>
20+
<div class="p-2 w-5">Align</div>
21+
<div class="p-2 w-5">Items</div>
22+
<div class="p-2 w-5">Start</div>
2323
</div>
2424
<div class="d-flex align-items-end mb-3" style="height: 100px">
25-
<div class="p-2">Flex item</div>
26-
<div class="p-2">Flex item</div>
27-
<div class="p-2">Flex item</div>
25+
<div class="p-2 w-5">Align</div>
26+
<div class="p-2 w-5">Items</div>
27+
<div class="p-2 w-5">End</div>
2828
</div>
2929
<div class="d-flex align-items-center mb-3" style="height: 100px">
30-
<div class="p-2">Flex item</div>
31-
<div class="p-2">Flex item</div>
32-
<div class="p-2">Flex item</div>
30+
<div class="p-2 w-5">Align</div>
31+
<div class="p-2 w-5">Items</div>
32+
<div class="p-2 w-5">Center</div>
3333
</div>
3434
<div class="d-flex align-items-baseline mb-3" style="height: 100px">
35-
<div class="p-2">Flex item</div>
36-
<div class="p-2">Flex item</div>
37-
<div class="p-2">Flex item</div>
35+
<div class="p-2 w-5">Align</div>
36+
<div class="p-2 w-5">Items</div>
37+
<div class="p-2 w-5">Baseline</div>
3838
</div>
3939
<div class="d-flex align-items-stretch" style="height: 100px">
40-
<div class="p-2">Flex item</div>
41-
<div class="p-2">Flex item</div>
42-
<div class="p-2">Flex item</div>
40+
<div class="p-2 w-5">Align</div>
41+
<div class="p-2 w-5">Items</div>
42+
<div class="p-2 w-5">Stretch</div>
4343
</div>
4444
</div>
4545

‎site/src/content/docs/utilities/justify-items.mdx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,24 +19,24 @@ Use `justify-items` utilities to control the horizontal alignment of grid items.
1919

2020
<div class="bd-example bd-example-flex vstack gap-3">
2121
<div class="d-grid gap-3 justify-items-start" style="grid-template-columns: 1fr 1fr 1fr;">
22-
<div class="p-2">Grid item</div>
23-
<div class="p-2">Grid item</div>
24-
<div class="p-2">Grid item</div>
22+
<div class="p-2">Justify</div>
23+
<div class="p-2">Items</div>
24+
<div class="p-2">Start</div>
2525
</div>
2626
<div class="d-grid gap-3 justify-items-end" style="grid-template-columns: 1fr 1fr 1fr;">
27-
<div class="p-2">Grid item</div>
28-
<div class="p-2">Grid item</div>
29-
<div class="p-2">Grid item</div>
27+
<div class="p-2">Justify</div>
28+
<div class="p-2">Items</div>
29+
<div class="p-2">End</div>
3030
</div>
3131
<div class="d-grid gap-3 justify-items-center" style="grid-template-columns: 1fr 1fr 1fr;">
32-
<div class="p-2">Grid item</div>
33-
<div class="p-2">Grid item</div>
34-
<div class="p-2">Grid item</div>
32+
<div class="p-2">Justify</div>
33+
<div class="p-2">Items</div>
34+
<div class="p-2">Center</div>
3535
</div>
3636
<div class="d-grid gap-3 justify-items-stretch" style="grid-template-columns: 1fr 1fr 1fr;">
37-
<div class="p-2">Grid item</div>
38-
<div class="p-2">Grid item</div>
39-
<div class="p-2">Grid item</div>
37+
<div class="p-2">Justify</div>
38+
<div class="p-2">Items</div>
39+
<div class="p-2">Stretch</div>
4040
</div>
4141
</div>
4242

‎site/src/content/docs/utilities/place-items.mdx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,24 +19,24 @@ Use `place-items` utilities to control the alignment of grid items. Choose from
1919

2020
<div class="bd-example bd-example-flex vstack gap-3">
2121
<div class="d-grid gap-3 place-items-start" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
22-
<div class="p-2">Grid item</div>
23-
<div class="p-2">Grid item</div>
24-
<div class="p-2">Grid item</div>
22+
<div class="p-2">Place</div>
23+
<div class="p-2">Items</div>
24+
<div class="p-2">Start</div>
2525
</div>
2626
<div class="d-grid gap-3 place-items-end" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
27-
<div class="p-2">Grid item</div>
28-
<div class="p-2">Grid item</div>
29-
<div class="p-2">Grid item</div>
27+
<div class="p-2">Place</div>
28+
<div class="p-2">Items</div>
29+
<div class="p-2">End</div>
3030
</div>
3131
<div class="d-grid gap-3 place-items-center" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
32-
<div class="p-2">Grid item</div>
33-
<div class="p-2">Grid item</div>
34-
<div class="p-2">Grid item</div>
32+
<div class="p-2">Place</div>
33+
<div class="p-2">Items</div>
34+
<div class="p-2">Center</div>
3535
</div>
3636
<div class="d-grid gap-3 place-items-stretch" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
37-
<div class="p-2">Grid item</div>
38-
<div class="p-2">Grid item</div>
39-
<div class="p-2">Grid item</div>
37+
<div class="p-2">Place</div>
38+
<div class="p-2">Items</div>
39+
<div class="p-2">Stretch</div>
4040
</div>
4141
</div>
4242

0 commit comments

Comments
 (0)