diff options
| author | Edson Jr <[email protected]> | 2020-05-30 10:19:10 -0300 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-05-30 15:19:10 +0200 |
| commit | 1f1b147f19cf64dea578285e49c397cd30734ba4 (patch) | |
| tree | b198f0bebe42a772bc47bccaf231f8895a2c29bd | |
| parent | 407b4c3606cb6cf871c3ec2a2662f10d3a5d399b (diff) | |
| download | bootstrap-1f1b147f19cf64dea578285e49c397cd30734ba4.tar.xz bootstrap-1f1b147f19cf64dea578285e49c397cd30734ba4.zip | |
Add `space-evenly` option for `justify-content` (#30910)
| -rw-r--r-- | scss/_utilities.scss | 1 | ||||
| -rw-r--r-- | site/content/docs/5.0/layout/columns.md | 8 | ||||
| -rw-r--r-- | site/content/docs/5.0/utilities/flex.md | 9 |
3 files changed, 17 insertions, 1 deletions
diff --git a/scss/_utilities.scss b/scss/_utilities.scss index aa6c6eade..73ba08c97 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -177,6 +177,7 @@ $utilities: map-merge( center: center, between: space-between, around: space-around, + evenly: space-evenly, ) ), "align-items": ( diff --git a/site/content/docs/5.0/layout/columns.md b/site/content/docs/5.0/layout/columns.md index 98f247b93..b7c6c9cae 100644 --- a/site/content/docs/5.0/layout/columns.md +++ b/site/content/docs/5.0/layout/columns.md @@ -122,6 +122,14 @@ Use flexbox alignment utilities to vertically and horizontally align columns. One of two columns </div> </div> + <div class="row justify-content-evenly"> + <div class="col-4"> + One of two columns + </div> + <div class="col-4"> + One of two columns + </div> + </div> </div> {{< /example >}} diff --git a/site/content/docs/5.0/utilities/flex.md b/site/content/docs/5.0/utilities/flex.md index 1172d5176..c4806ac6a 100644 --- a/site/content/docs/5.0/utilities/flex.md +++ b/site/content/docs/5.0/utilities/flex.md @@ -78,7 +78,7 @@ Responsive variations also exist for `flex-direction`. ## Justify content -Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, or `around`. +Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `evenly`. <div class="bd-example"> <div class="d-flex justify-content-start bd-highlight mb-3"> @@ -106,6 +106,11 @@ Use `justify-content` utilities on flexbox containers to change the alignment of <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> </div> + <div class="d-flex justify-content-evenly bd-highlight"> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + </div> </div> {{< highlight html >}} @@ -114,6 +119,7 @@ Use `justify-content` utilities on flexbox containers to change the alignment of <div class="d-flex justify-content-center">...</div> <div class="d-flex justify-content-between">...</div> <div class="d-flex justify-content-around">...</div> +<div class="d-flex justify-content-evenly">...</div> {{< /highlight >}} Responsive variations also exist for `justify-content`. @@ -126,6 +132,7 @@ Responsive variations also exist for `justify-content`. - `.justify-content{{ .abbr }}-center` - `.justify-content{{ .abbr }}-between` - `.justify-content{{ .abbr }}-around` +- `.justify-content{{ .abbr }}-evenly` {{- end -}} {{< /flex.inline >}} {{< /markdown >}} |