---
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" >}}