diff options
| author | Martijn Cuppens <[email protected]> | 2020-11-29 15:58:20 +0100 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2020-12-04 16:15:51 +0200 |
| commit | 5b0dcf8ffe6ae121722c9db571294e715b7ec52a (patch) | |
| tree | 363d4486be4542e9ee1cce0a5e5d6d263a47cf06 | |
| parent | 1f2e600304fc9ac6b0bd98ce5d02ee9048d7791f (diff) | |
| download | bootstrap-5b0dcf8ffe6ae121722c9db571294e715b7ec52a.tar.xz bootstrap-5b0dcf8ffe6ae121722c9db571294e715b7ec52a.zip | |
Add `.translate-middle-x` and `.translate-middle-y` utilities
| -rw-r--r-- | scss/_utilities.scss | 4 | ||||
| -rw-r--r-- | site/content/docs/5.0/utilities/position.md | 16 |
2 files changed, 19 insertions, 1 deletions
diff --git a/scss/_utilities.scss b/scss/_utilities.scss index dacd8b289..89bf16847 100644 --- 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 3e84ce557..63ce589b3 100644 --- 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: |