2017-01-02 20:46:06 +01:00
---
layout: docs
title: Position
2017-05-28 20:25:59 +02:00
description: Use these shorthand utilities for quickly configuring the position of an element.
2017-01-02 20:46:06 +01:00
group: utilities
2017-05-28 20:25:59 +02:00
toc: true
2017-01-02 20:46:06 +01:00
---
2020-09-21 04:42:41 +02:00
## Position values
2017-08-08 07:36:57 +02:00
Quick positioning classes are available, though they are not responsive.
2020-10-19 11:56:49 +02:00
```html
2017-08-08 07:36:57 +02:00
< 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 >
2020-10-19 11:56:49 +02:00
```
2020-09-21 04:42:41 +02:00
## 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
2020-06-09 15:44:20 +02:00
- `start` - for the horizontal `left` position (in LTR)
2020-09-21 04:42:41 +02:00
- `bottom` - for the vertical `bottom` position
2020-06-09 15:44:20 +02:00
- `end` - for the horizontal `right` position (in LTR)
2020-09-21 04:42:41 +02:00
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" > }}
< div class = "position-relative" >
2020-06-09 15:44:20 +02:00
< div class = "position-absolute top-0 start-0" > < / div >
< div class = "position-absolute top-0 end-0" > < / div >
< div class = "position-absolute top-50 start-50" > < / div >
< div class = "position-absolute bottom-50 end-50" > < / div >
< div class = "position-absolute bottom-0 start-0" > < / div >
< div class = "position-absolute bottom-0 end-0" > < / div >
2020-09-21 04:42:41 +02:00
< / div >
{{< / 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" > }}
< div class = "position-relative" >
2020-06-09 15:44:20 +02:00
< div class = "position-absolute top-0 start-0 translate-middle" > < / div >
< div class = "position-absolute top-0 start-50 translate-middle" > < / div >
< div class = "position-absolute top-0 start-100 translate-middle" > < / div >
< div class = "position-absolute top-50 start-0 translate-middle" > < / div >
< div class = "position-absolute top-50 start-50 translate-middle" > < / div >
< div class = "position-absolute top-50 start-100 translate-middle" > < / div >
< div class = "position-absolute top-100 start-0 translate-middle" > < / div >
< div class = "position-absolute top-100 start-50 translate-middle" > < / div >
< div class = "position-absolute top-100 start-100 translate-middle" > < / div >
2020-09-21 04:42:41 +02:00
< / div >
{{< / example > }}
2020-11-29 15:58:20 +01:00
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 > }}
2020-09-21 04:42:41 +02:00
## Examples
Here are some real life examples of these classes:
{{< example class = "bd-example-position-examples d-flex justify-content-around" > }}
< button type = "button" class = "btn btn-primary position-relative" >
2020-06-09 15:44:20 +02:00
Mails < span class = "position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary" > +99 < span class = "visually-hidden" > unread messages< / span > < / span >
2020-09-21 04:42:41 +02:00
< / button >
< button type = "button" class = "btn btn-dark position-relative" >
2020-06-09 15:44:20 +02:00
Marker < svg width = "1em" height = "1em" viewBox = "0 0 16 16" class = "position-absolute top-100 start-50 translate-middle mt-1 bi bi-caret-down-fill" fill = "#212529" xmlns = "http://www.w3.org/2000/svg" > < path d = "M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" / > < / svg >
2020-09-21 04:42:41 +02:00
< / button >
< button type = "button" class = "btn btn-primary position-relative" >
2020-06-09 15:44:20 +02:00
Alerts < span class = "position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2" > < span class = "visually-hidden" > unread messages< / span > < / span >
2020-09-21 04:42:41 +02:00
< / button >
{{< / 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" > }}
< div class = "position-relative m-4" >
< div class = "progress" style = "height: 1px;" >
2021-05-08 14:22:07 +02:00
< div class = "progress-bar" role = "progressbar" style = "width: 50%;" aria-valuenow = "50" aria-valuemin = "0" aria-valuemax = "100" > < / div >
2020-09-21 04:42:41 +02:00
< / div >
2020-06-09 15:44:20 +02:00
< button type = "button" class = "position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style = "width: 2rem; height:2rem;" > 1< / button >
< button type = "button" class = "position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style = "width: 2rem; height:2rem;" > 2< / button >
< button type = "button" class = "position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style = "width: 2rem; height:2rem;" > 3< / button >
2020-09-21 04:42:41 +02:00
< / div >
{{< / example > }}
2021-02-11 04:29:59 +01:00
## 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" > }}