Skip to main content

Position

Use these shorthand utilities for quickly configuring the position of an element.

Arrange elements

Arrange elements easily with the position utilities: .position-static, .position-relative, .position-absolute, .position-fixed, .position-sticky.

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

Position by edges

Set top, right (end), bottom, and left (start) with suffixes -0, -50, -100, or auto:

AxisClasses
top.top-0 .top-50 .top-100 .top-auto
right (end).end-0 .end-50 .end-100 .end-auto
bottom.bottom-0 .bottom-50 .bottom-100 .bottom-auto
left (start).start-0 .start-50 .start-100 .start-auto

Center translation

Combine .top-50/.start-50 with .translate-middle to perfectly center an absolutely positioned element:

centered
<div class="position-absolute top-50 start-50 translate-middle">centered</div>

Sticky top / bottom

Position an element at the top or bottom of the viewport, or of its scrolling context:

  • .sticky-top, .sticky-bottom, .sticky-lg-top
  • .fixed-top, .fixed-bottom