diff options
| author | Ben Koshy <[email protected]> | 2022-12-29 08:19:55 +1100 |
|---|---|---|
| committer | GitHub <[email protected]> | 2022-12-28 13:19:55 -0800 |
| commit | 752be8657d934d2b44716ca2bb5bfff9193ca45f (patch) | |
| tree | 17a16d3bf702baaa10bb182e2f5e27e9e40a5785 /site/content | |
| parent | a99234d528b12bd080096041ff0612672782cdd3 (diff) | |
| download | bootstrap-752be8657d934d2b44716ca2bb5bfff9193ca45f.tar.xz bootstrap-752be8657d934d2b44716ca2bb5bfff9193ca45f.zip | |
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 <[email protected]>
Diffstat (limited to 'site/content')
| -rw-r--r-- | site/content/docs/5.3/utilities/flex.md | 36 |
1 files changed, 18 insertions, 18 deletions
diff --git a/site/content/docs/5.3/utilities/flex.md b/site/content/docs/5.3/utilities/flex.md index e29503434..564c39f86 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> |