Bootstrap Position: Absolute, Fixed, Sticky and Centering

Bootstrap’s position utilities set the CSS position of an element and place it with top, bottom, start, and end classes, so you can pin a badge to the corner of an avatar, center an overlay on an image, stick a header to the top of the screen, or fix a button to the bottom of the page without writing CSS. This guide covers every position class in Bootstrap 5.3: position-*, the edge classes, translate-middle, fixed-top, sticky-top and its responsive versions, z-index classes, and the common layouts built with them.

Position classes

Class	CSS
position-static	position: static (the default)
position-relative	position: relative
position-absolute	position: absolute
position-fixed	position: fixed
position-sticky	position: sticky

A quick reminder of what each one does:

• relative keeps the element in the page flow, and makes it the reference point for absolutely positioned children.
• absolute takes the element out of the flow and places it relative to the nearest positioned parent, usually one with position-relative.
• fixed places the element relative to the browser window, so it stays put while the page scrolls.
• sticky keeps the element in the flow until it reaches an edge while scrolling, then holds it there.

These classes aren’t responsive: there’s no position-md-absolute. The only responsive position classes are the sticky helpers below.

Edge classes: top, bottom, start, end

Place a positioned element with these classes. Each takes 0, 50, or 100, which mean 0%, 50%, and 100%:

Class	CSS
top-0, top-50, top-100	top: 0, 50%, 100%
bottom-0, bottom-50, bottom-100	bottom: 0, 50%, 100%
start-0, start-50, start-100	left: 0, 50%, 100% (right in right-to-left layouts)
end-0, end-50, end-100	right: 0, 50%, 100% (left in right-to-left layouts)

<div class="position-relative border" style="height: 200px;">
  <div class="position-absolute top-0 start-0">Top left</div>
  <div class="position-absolute top-0 end-0">Top right</div>
  <div class="position-absolute bottom-0 start-0">Bottom left</div>
  <div class="position-absolute bottom-0 end-0">Bottom right</div>
</div>

Bootstrap uses start and end rather than left and right, so the same markup works in right-to-left languages. Edge classes were added in Bootstrap 5; Bootstrap 4 had only position-*, fixed-top, fixed-bottom, and sticky-top.

For other offsets, such as top: 1rem, use inline styles or your own class. The utilities API can add more values if you build with Sass.

Center with translate-middle

top-50 start-50 puts the element’s top-left corner at the center. translate-middle shifts it back by half its own width and height, so the element itself is centered:

<div class="position-relative" style="height: 300px;">
  <img src="hero.jpg" class="w-100 h-100 object-fit-cover" alt="">
  <div class="position-absolute top-50 start-50 translate-middle text-center text-white">
    <h1>Summer sale</h1>
    <a class="btn btn-light" href="/sale">Shop now</a>
  </div>
</div>

Class	CSS
translate-middle	transform: translate(-50%, -50%)
translate-middle-x	transform: translateX(-50%)
translate-middle-y	transform: translateY(-50%)

Use translate-middle-x with start-50 to center horizontally only, for example a label on the bottom edge, and translate-middle-y with top-50 to center vertically only. For centering in normal page flow, flexbox is usually simpler; the centering guide compares every method.

Notification badge on a button or avatar

A badge on the corner of a button, centered on the corner with translate-middle:

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">
    9
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

And a status dot on an avatar:

<div class="position-relative d-inline-block">
  <img src="avatar.jpg" class="rounded-circle" width="48" height="48" alt="Sam">
  <span class="position-absolute bottom-0 end-0 p-1 bg-success border border-2 border-white rounded-circle">
    <span class="visually-hidden">Online</span>
  </span>
</div>

More badge patterns are in the badge guide.

fixed-top and fixed-bottom

fixed-top pins an element to the top of the window, full width, and fixed-bottom to the bottom. Both set z-index: 1030 so they sit above page content:

<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
  <div class="container">
    <a class="navbar-brand" href="/">Acme</a>
  </div>
</nav>
<main style="padding-top: 72px;">
  ...
</main>

A fixed element is taken out of the page flow, so the content underneath slides under it. Add top padding to the page (or bottom padding for fixed-bottom) equal to the bar’s height. The navbar guide covers fixed and sticky navbars in more detail.

sticky-top and sticky-bottom

sticky-top keeps an element in the page flow until it reaches the top while scrolling, then holds it there. Unlike fixed-top, it doesn’t overlap content at the start, so no padding is needed:

<header class="sticky-top bg-body border-bottom">
  <nav class="container py-2">...</nav>
</header>

sticky-bottom does the same at the bottom edge. Both use z-index: 1020.

There are responsive versions that only stick from a breakpoint up: sticky-sm-top, sticky-md-top, sticky-lg-top, sticky-xl-top, sticky-xxl-top, and the same for -bottom. A sidebar that scrolls with the page on phones and sticks on desktops:

<div class="row">
  <aside class="col-lg-3">
    <div class="sticky-lg-top pt-3">Table of contents</div>
  </aside>
  <main class="col-lg-9">...</main>
</div>

A sticky element sticks only within its parent. If it doesn’t stick, check that no parent has overflow: hidden or overflow: auto, and that the parent is taller than the sticky element.

A floating action button

Combine position-fixed with edge classes and spacing for a button that stays in the corner:

<a href="/new" class="btn btn-primary rounded-circle position-fixed bottom-0 end-0 m-4 shadow"
   style="width: 56px; height: 56px;" aria-label="New post">
  <i class="bi bi-plus-lg" aria-hidden="true"></i>
</a>

m-4 keeps it 1.5rem away from the window edges.

z-index classes

Bootstrap 5.3 added classes to set stacking order:

Class	z-index
z-n1	-1
z-0	0
z-1	1
z-2	2
z-3	3

They’re meant for stacking elements within a component, such as overlapping cards or an image behind text. Bootstrap’s own layers use much higher values: dropdowns 1000, sticky 1020, fixed 1030, offcanvas 1045, modals 1055, popovers 1070, tooltips 1080, and toasts 1090. For anything that must sit above those, set z-index in your own CSS.

Make a whole card clickable

stretched-link uses absolute positioning to stretch a link over its nearest positioned parent:

<div class="card position-relative">
  <div class="card-body">
    <h5 class="card-title">Pricing guide</h5>
    <p class="card-text">How to price a website project.</p>
    <a href="/guides/pricing" class="stretched-link">Read the guide</a>
  </div>
</div>

.card is already positioned, so position-relative there is optional, but you need it on a plain div. See the cards guide for more.

Common problems

• An absolute element is placed relative to the page, not its box. Add position-relative to the parent.
• sticky-top doesn’t stick. A parent has overflow set, or the parent is no taller than the element.
• Content hides under a fixed navbar. Add top padding to the body or main content.
• A positioned element is covered by a dropdown or modal. Bootstrap’s components use z-index values of 1000 and above, so z-3 won’t lift anything over them.
• left-0 does nothing. Bootstrap has no left-* or right-* classes. Use start-0 and end-0.

FAQ

How do I position an element absolutely in Bootstrap?

Add position-relative to the parent and position-absolute to the element, then place it with edge classes such as top-0 end-0 for the top-right corner. Add translate-middle to center the element on that point.

How do I center an element with Bootstrap position classes?

Use position-absolute top-50 start-50 translate-middle inside a parent with position-relative. The edge classes move the element’s corner to the center, and translate-middle shifts it back by half its size.

What is the difference between fixed-top and sticky-top in Bootstrap?

fixed-top takes the element out of the page flow and pins it to the top of the window at all times, so content needs top padding. sticky-top keeps the element in the flow and only pins it once you scroll to it, with no padding needed.

Why is sticky-top not working in Bootstrap?

Usually a parent element has overflow: hidden or overflow: auto, which stops sticky positioning, or the parent isn’t taller than the sticky element, so there’s no room to stick. Remove the overflow or move the sticky element higher in the page.

Are Bootstrap position classes responsive?

The position-* and edge classes aren’t responsive. Only the sticky helpers are: sticky-sm-top through sticky-xxl-top, and the matching -bottom classes, apply from their breakpoint up.

What z-index classes does Bootstrap 5 have?

Bootstrap 5.3 has z-n1 (-1), z-0, z-1, z-2, and z-3. They’re for stacking elements within a component. Bootstrap’s own components use z-index values from 1000 (dropdowns) to 1090 (toasts).