Bootstrap - Position Utilities in Bootstrap

Bootstrap’s position utility classes help you quickly control CSS positioning without writing custom styles.

1. Position Utilities in Bootstrap

Bootstrap provides four main classes for positioning:

Class CSS Equivalent Description
.position-static position: static; Default positioning. Element follows normal flow.
.position-relative position: relative; Element is positioned relative to itself. Can move using top, right, bottom, left.
.position-absolute position: absolute; Element is positioned relative to the nearest positioned ancestor (relative, absolute, or fixed).
.position-fixed position: fixed; Element is fixed relative to viewport. Stays in place when scrolling.
.position-sticky position: sticky; Element sticks to a position when scrolling past a threshold.

2. Examples

Relative Positioning

<div class="position-relative bg-primary text-white p-3">
  Relative container
  <div class="position-absolute top-0 end-0 bg-warning p-2">
    Absolutely positioned inside
  </div>
</div>

  • .position-relative on the container allows the inner element to position absolute relative to it.

  • .position-absolute on the inner div places it in the top-right corner of the parent.

Absolute Positioning

<div class="position-relative" style="height:200px; background-color:lightblue;">
  <div class="position-absolute top-50 start-50 translate-middle bg-danger text-white p-2">
    Centered
  </div>
</div>

  • .top-50 and .start-50 move the element 50% down and right, relative to its parent.

  • .translate-middle offsets it by -50% in X and Y, truly centering it.

Fixed Positioning

<div class="position-fixed bottom-0 end-0 m-3 p-2 bg-success text-white">
  Fixed button
</div>

  • Stays at bottom-right of the viewport even when scrolling.

3. Notes

  • Always use relative positioning on a parent if you want an absolute child to position relative to it.

  • Combined with spacing utilities (top-*, start-*, end-*, bottom-*) to fine-tune location.

  • Very handy for tooltips, modals, floating buttons, and sticky headers.