From 669c52a8f7d5829e0d82a21468f7d69cca92fc62 Mon Sep 17 00:00:00 2001
From: Edson Jr <edsonsjr@gmail.com>
Date: Sat, 30 May 2020 10:19:10 -0300
Subject: [PATCH] Add `space-evenly` option for `justify-content` (#30910)

---
 scss/_utilities.scss                    | 1 +
 site/content/docs/5.0/layout/columns.md | 8 ++++++++
 site/content/docs/5.0/utilities/flex.md | 9 ++++++++-
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index aa6c6eade68a..73ba08c97509 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 98f247b935ef..b7c6c9cae808 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 1172d517694b..c4806ac6a0a0 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 >}}