Positioning

Use positioning utilities to control the placement of elements.

Position

Set the position property of an element.

• .position-static
• .position-relative
• .position-absolute
• .position-fixed
• .position-sticky

Example

A common use case is placing an element inside a .position-relative container.

Absolute

<div class="position-relative">
  <div class="position-absolute bottom-0 end-0">...</div>
</div>

Arrange and Center

Use placement and translate utilities to arrange and center elements.

• .top-0, .top-50, .top-100

• .start-0, .start-50, .start-100 (for left)

• .bottom-0, .bottom-50, .bottom-100

• .end-0, .end-50, .end-100 (for right)

• .translate-middle (centers both horizontally and vertically)

• .translate-middle-x (centers horizontally)

• .translate-middle-y (centers vertically)

Centering Example

Center an element within its relative container. To demonstrate the alignment, the example below has a red crosshair marking the exact center of the parent container.

Centered

<div class="position-relative">
  <div class="position-absolute top-50 start-50 translate-middle">
    Centered Content
  </div>
</div>