kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

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

Browse source
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: