rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-07 04:54:24 +01:00
Code Issues Actions Packages 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, property: transform,
class: translate-middle, class: translate-middle,
values: ( values: (
null: (translateX(-50%) translateY(-50%)) null: translate(-50%, -50%),
x: translateX(-50%),
y: translateY(-50%),
) )
), ),
"border": ( "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> </div>
{{< /example >}} {{< /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 ## Examples
Here are some real life examples of these classes: Here are some real life examples of these classes: