Position Utilities

Prev Next

Position utilities wrap the CSS position property and its edge offsets in ready-made classes, so you can pin an element to a corner, stick a navbar to the top of the viewport on scroll, or overlay a small badge on top of a bigger element — all declaratively. We'll finish by pinning a "Featured" badge to the corner of a TrailMap trail card.

Note on this site: Codingwithsonu.com itself is built with Bootstrap 3. This track teaches Bootstrap 5 as its own independent subject — the two don't mix.

The Position Classes

Class	CSS value / behaviour
`.position-static`	`position: static` — the default, no offset context created
`.position-relative`	`position: relative` — offsets move it from its normal spot, and it becomes an anchor for absolutely positioned children
`.position-absolute`	`position: absolute` — removed from normal flow, positioned against the nearest positioned ancestor
`.position-fixed`	`position: fixed` — pinned to the browser viewport, stays put while the page scrolls
`.position-sticky`	`position: sticky` — behaves like normal flow until it hits its offset, then sticks

<!-- A sticky filter bar that sticks below the main nav once you scroll past it -->
<div class="position-sticky" style="top: 0;">
  Sort by: Distance | Difficulty | Rating
</div>

Edge Placement: .top-0, .bottom-0, .start-0, .end-0

These set the CSS offset properties as a percentage (0, 50, or 100). As with spacing, Bootstrap 5 uses start/end instead of left/right so the same class flips correctly under RTL. They only take effect once the element is position-relative, -absolute, -fixed, or -sticky.

<!-- Badge pinned to the top-right corner of a relatively positioned card -->
<div class="position-relative">
  <img src="cedar-falls.jpg" class="img-fluid" alt="Cedar Falls">
  <span class="badge bg-warning position-absolute top-0 end-0 m-2">New</span>
</div>

.translate-middle for Perfect Centering

Placing something at top-50/start-50 lines up its top-left corner with the center point, not its own center. .translate-middle fixes that by shifting the element back by half its own width and height (transform: translate(-50%, -50%)), so combining the two truly centers it.

<div class="position-relative">
  <img src="blue-ridge-loop.jpg" class="img-fluid" alt="Blue Ridge Loop">
  <!-- A play button perfectly centered over the trail video thumbnail -->
  <button class="btn btn-light rounded-circle position-absolute top-50 start-50 translate-middle">
    <i class="fa fa-play"></i>
  </button>
</div>

Note: .translate-middle-x and .translate-middle-y exist too, for when you only want the horizontal or vertical half of the shift — useful for badges that should hang centered on just one edge.

Worked Example: A "Featured" Badge on a TrailMap Card

The full pattern for a corner badge overlaid on a card: make the card (or image wrapper) position-relative, then pin the badge position-absolute to a corner with a small margin so it doesn't touch the edge:

<div class="card position-relative" style="width: 18rem;">
  <span class="badge bg-success position-absolute top-0 start-0 m-2">Featured</span>
  <img src="blue-ridge-loop.jpg" class="card-img-top" alt="Blue Ridge Loop">
  <div class="card-body">
    <h5 class="card-title">Blue Ridge Loop</h5>
    <p class="card-text text-muted">8.2 km · Moderate</p>
    <a href="#" class="btn btn-primary">View Trail</a>
  </div>
</div>

Next up: That covers all five layout utility groups. Head to Typography to start on how Bootstrap 5 styles text itself.

Prev Next