kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

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

This commit is contained in:
Martijn Cuppens 2020-11-29 15:58:20 +01:00 committed by XhmikosR
parent 1f2e600304
commit 5b0dcf8ffe
2 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/_utilities.scss
View File

@ -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": (

16
site/content/docs/5.0/utilities/position.md
View File

@ -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: