From 185ddf1eaf82e08586be6c7689507ee924d9dd47 Mon Sep 17 00:00:00 2001 From: Mario Date: Fri, 19 Aug 2022 13:15:48 +0000 Subject: update to bootstrap 5.2 and fixes --- .../site/content/docs/5.2/utilities/position.md | 130 +++++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 vendor/twbs/bootstrap/site/content/docs/5.2/utilities/position.md (limited to 'vendor/twbs/bootstrap/site/content/docs/5.2/utilities/position.md') diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/utilities/position.md b/vendor/twbs/bootstrap/site/content/docs/5.2/utilities/position.md new file mode 100644 index 000000000..5a6e849cc --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/utilities/position.md @@ -0,0 +1,130 @@ +--- +layout: docs +title: Position +description: Use these shorthand utilities for quickly configuring the position of an element. +group: utilities +toc: true +--- + +## Position values + +Quick positioning classes are available, though they are not responsive. + +```html +
...
+
...
+
...
+
...
+
...
+``` + +## Arrange elements + +Arrange elements easily with the edge positioning utilities. The format is `{property}-{position}`. + +Where *property* is one of: + +- `top` - for the vertical `top` position +- `start` - for the horizontal `left` position (in LTR) +- `bottom` - for the vertical `bottom` position +- `end` - for the horizontal `right` position (in LTR) + +Where *position* is one of: + +- `0` - for `0` edge position +- `50` - for `50%` edge position +- `100` - for `100%` edge position + +(You can add more position values by adding entries to the `$position-values` Sass map variable.) + +{{< example class="bd-example-position-utils" >}} +
+
+
+
+
+
+
+
+{{< /example >}} + +## Center elements + +In addition, you can also center the elements with the transform utility class `.translate-middle`. + +This class applies the transformations `translateX(-50%)` and `translateY(-50%)` to the element which, in combination with the edge positioning utilities, allows you to absolute center an element. + +{{< example class="bd-example-position-utils" >}} +
+
+
+
+
+
+
+
+
+
+
+{{< /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" >}} +
+
+
+
+
+
+
+
+
+
+
+{{< /example >}} + +## Examples + +Here are some real life examples of these classes: + +{{< example class="bd-example-position-examples d-flex justify-content-around" >}} + + + + + +{{< /example >}} + +You can use these classes with existing components to create new ones. Remember that you can extend its functionality by adding entries to the `$position-values` variable. + +{{< example class="bd-example-position-examples" >}} +
+
+
+
+ + + +
+{{< /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" >}} -- cgit v1.2.3