--- 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 align-items-center" >}}
Marker
{{< /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 >}} ## CSS ### 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" >}} ### Sass 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" >}}