rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-15 15:29:22 +01:00
Code Issues Actions Packages Releases Activity

Improve readability in docs flex page (#34647)

Browse Source 
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>
This commit is contained in:
Ben Koshy 2022-12-29 08:19:55 +11:00 committed by GitHub
parent a99234d528
commit 752be8657d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
site/content/docs/5.3/utilities/flex.md
View File

@ -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="bd-example bd-example-flex">
<div class="d-flex justify-content-start mb-3"> <div class="d-flex justify-content-start mb-3">
<div class="p-2">Flex item</div> <div class="p-2 bd-highlight">Justify</div>
<div class="p-2">Flex item</div> <div class="p-2 bd-highlight">Content</div>
<div class="p-2">Flex item</div> <div class="p-2 bd-highlight">Start</div>
</div> </div>
<div class="d-flex justify-content-end mb-3"> <div class="d-flex justify-content-end mb-3">
<div class="p-2">Flex item</div> <div class="p-2 bd-highlight">Justify</div>
<div class="p-2">Flex item</div> <div class="p-2 bd-highlight">Content</div>
<div class="p-2">Flex item</div> <div class="p-2 bd-highlight">End</div>
</div> </div>
<div class="d-flex justify-content-center mb-3"> <div class="d-flex justify-content-center mb-3">
<div class="p-2">Flex item</div> <div class="p-2 bd-highlight">Justify</div>
<div class="p-2">Flex item</div> <div class="p-2 bd-highlight">Content</div>
<div class="p-2">Flex item</div> <div class="p-2 bd-highlight">Center</div>
</div> </div>
<div class="d-flex justify-content-between mb-3"> <div class="d-flex justify-content-between mb-3">
<div class="p-2">Flex item</div> <div class="p-2 bd-highlight">Justify</div>
<div class="p-2">Flex item</div> <div class="p-2 bd-highlight">Content</div>
<div class="p-2">Flex item</div> <div class="p-2 bd-highlight">Between</div>
</div> </div>
<div class="d-flex justify-content-around mb-3"> <div class="d-flex justify-content-around mb-3">
<div class="p-2">Flex item</div> <div class="p-2 bd-highlight">Justify</div>
<div class="p-2">Flex item</div> <div class="p-2 bd-highlight">Content</div>
<div class="p-2">Flex item</div> <div class="p-2 bd-highlight">Around</div>
</div> </div>
<div class="d-flex justify-content-evenly"> <div class="d-flex justify-content-evenly">
<div class="p-2">Flex item</div> <div class="p-2 bd-highlight">Justify</div>
<div class="p-2">Flex item</div> <div class="p-2 bd-highlight">Content</div>
<div class="p-2">Flex item</div> <div class="p-2 bd-highlight">Evenly</div>
</div> </div>
</div> </div>