Position Utilities

Bootstrap 4's position utilities set the CSS position property directly, plus a few ready-made shortcuts for the most common positioning patterns — a header that stays fixed to the top of the viewport, or an element that sticks in place once you scroll past it. We'll finish by positioning a "Featured" badge on a TrailMap trail card, which needs one small custom CSS rule alongside the utility classes.

The position Property Utilities

Five classes map straight onto the CSS position values: .position-static, .position-relative, .position-absolute, .position-fixed, and .position-sticky.

<!-- an absolutely-positioned element needs a relatively-positioned parent to anchor to -->
<div class="position-relative">
  <span class="position-absolute" style="top: 8px; right: 8px;">★</span>
</div>

Ready-Made Shortcuts: .fixed-top, .fixed-bottom, .sticky-top

These three combine position with sensible defaults for top/bottom, left/right, and z-index, so you don't have to write that boilerplate yourself. .fixed-top pins an element to the top of the viewport (great for a navbar), .fixed-bottom pins it to the bottom, and .sticky-top keeps it in normal flow until the user scrolls past it, then sticks it to the top of the viewport.

<!-- TrailMap: nav stays visible while scrolling the trail listing -->
<nav class="navbar navbar-light bg-light sticky-top">
  <span class="navbar-brand">TrailMap</span>
</nav>

What Bootstrap 4 Doesn't Have

No granular placement helpers. Bootstrap 4 gives you the position property and the three shortcuts above, but nothing for setting top/right/bottom/left to specific offsets. Bootstrap 5 later added a set of granular classes — .top-0, .top-50, .start-0, .end-0, .bottom-0, plus .translate-middle — for exactly that. None of those exist in Bootstrap 4: any precise corner or offset positioning here needs a small inline style attribute or a rule in your own stylesheet, same as in the badge example below.

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

TrailMap wants a "Featured" ribbon pinned to the top-right corner of certain trail cards. .position-absolute handles the positioning mode, but since Bootstrap 4 has no .top-0/.end-0 offset classes, the exact corner is set with one small custom CSS rule.

<style>
  .featured-badge {
    top: -10px;
    right: -10px;
  }
</style>

<div class="card position-relative" style="width: 18rem;">
  <span class="badge badge-warning position-absolute featured-badge">Featured</span>
  <div class="card-body">
    <h5 class="card-title">Blue Ridge Overlook</h5>
    <p class="card-text">4.2 mi loop · Moderate</p>
  </div>
</div>

The card itself needs .position-relative so the badge's .position-absolute anchors to its corner rather than to the page, and the two-line .featured-badge rule nudges the badge slightly outside the card's edge — the kind of one-off offset that Bootstrap 5's placement helpers would set with classes alone.

Up next: With layout, spacing, sizing, display, and position covered, it's time to move from utilities to content — starting with Typography.