---
title: Position
description: Use these shorthand utilities for quickly configuring the position of an element.
toc: true
---

## Position values

Quick positioning classes are available, though they are not responsive.

```html
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
```

## 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" code={`

`} />

## 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" code={`

`} />

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" code={`

`} />

## Examples

Here are some real life examples of these classes:

<Example class="bd-example-position-examples d-flex justify-content-around align-items-center" code={`
    Mails +99 unread messages

    Marker 

    Alerts unread messages
  `} />

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" code={`

    1
    2
    3
  
`} />

## CSS

### Sass maps

Default position utility values are declared in a Sass map, then used to generate our utilities.

<ScssDocs 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]])

<ScssDocs name="utils-position" file="scss/_utilities.scss" />
