Add `.translate-middle-x` and `.translate-middle-y` utilities

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index dacd8b2891033892be4b95a3c54bb68338eb2e59..89bf16847b175ee3f7fc8756b6ee2176f25439db 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -65,7 +65,9 @@ $utilities: map-merge(
       property: transform,
       class: translate-middle,
       values: (
-        null: (translateX(-50%) translateY(-50%))
+        null: translate(-50%, -50%),
+        x: translateX(-50%),
+        y: translateY(-50%),
       )
     ),
     "border": (

diff --git a/site/content/docs/5.0/utilities/position.md b/site/content/docs/5.0/utilities/position.md
index 3e84ce557fdec8bd0f800a3b38a3c1b516a51694..63ce589b3d28a55ef75445964e3e8aad2838d131 100644 (file)
--- a/site/content/docs/5.0/utilities/position.md
+++ b/site/content/docs/5.0/utilities/position.md
@@ -68,6 +68,22 @@ This class applies the transformations `translateX(-50%)` and `translateY(-50%)`
 </div>
 {{< /example >}}
 
+By adding `.translate-middle-x` or `.translate-middle-y` classes, elements can be positioned only in horizontal or vertical direction.
+
+{{< example class="bd-example-position-utils" >}}
+<div class="position-relative">
+  <div class="position-absolute top-0 start-0"></div>
+  <div class="position-absolute top-0 start-50 translate-middle-x"></div>
+  <div class="position-absolute top-0 end-0"></div>
+  <div class="position-absolute top-50 start-0 translate-middle-y"></div>
+  <div class="position-absolute top-50 start-50 translate-middle"></div>
+  <div class="position-absolute top-50 end-0 translate-middle-y"></div>
+  <div class="position-absolute bottom-0 start-0"></div>
+  <div class="position-absolute bottom-0 start-50 translate-middle-x"></div>
+  <div class="position-absolute bottom-0 end-0"></div>
+</div>
+{{< /example >}}
+
 ## Examples
 
 Here are some real life examples of these classes: