diff options
Diffstat (limited to 'site/content/docs/5.0/utilities/position.md')
| -rw-r--r-- | site/content/docs/5.0/utilities/position.md | 29 |
1 files changed, 29 insertions, 0 deletions
diff --git a/site/content/docs/5.0/utilities/position.md b/site/content/docs/5.0/utilities/position.md index 3e84ce557..bc57eb028 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: @@ -99,3 +115,16 @@ You can use these classes with existing components to create new ones. Remember </div> {{< /example >}} +## Sass + +### Maps + +Default position utility values are declared in a Sass map, then used to generate our utilities. + +{{< scss-docs name="position-map" file="scss/_variables.scss" >}} + +### Utilities API + +Position utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-position" file="scss/_utilities.scss" >}} |