bootstrap/site/content/docs/5.0/utilities/position.md

layout	title	description	group	toc
docs	Position	Use these shorthand utilities for quickly configuring the position of an element.	utilities	true

Position values

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

{{< highlight html >}}

...

...

...

...

...

{{< /highlight >}}

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
• left - for the horizontal left position
• bottom - for the vertical bottom position
• right - for the horizontal right position

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

Examples

Here are some real life examples of these classes:

{{< example class="bd-example-position-examples d-flex justify-content-around" >}} Mails +99 unread messages

Marker Alerts unread messages {{< /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" >}}

1 2 3

{{< /example >}}