Bootstrap Position Utilities are classes that help you control the position of elements on a webpage. They are useful for placing elements at the top, bottom, start, end, or center of a container.
position-static, position-relative,
position-absolute, position-fixed,
position-sticky, and utilities such as
top-0, bottom-0, start-0,
and end-0.
Position utilities control the CSS position property of
HTML elements.
They are useful when you need to:
The position-static class sets an element's position to
static.
<div class="position-static">
Static Element
</div>Static positioning is the normal positioning behavior of an HTML element.
The position-relative class sets
position: relative.
<div class="position-relative">
Relative Element
</div>A relatively positioned element remains in the normal document flow, but it can become a positioning reference for absolutely positioned children.
The position-absolute class sets
position: absolute.
<div class="position-relative">
<div class="position-absolute">
Absolute Element
</div>
</div>An absolutely positioned element is positioned relative to its nearest positioned ancestor.
The position-fixed class sets
position: fixed.
<div class="position-fixed">
Fixed Element
</div>A fixed element is positioned relative to the viewport and normally stays in place while the page is scrolled.
The position-sticky class sets
position: sticky.
<div class="position-sticky top-0">
Sticky Header
</div>A sticky element behaves like a normally positioned element until its specified threshold is reached while scrolling.
The top-0 class sets the top position to zero.
<div
class="position-absolute top-0">
Top Element
</div>
It is commonly used together with position-absolute or
position-fixed.
The bottom-0 class sets the bottom position to zero.
<div
class="position-absolute bottom-0">
Bottom Element
</div>This is useful for placing content at the bottom of a positioned container.
The start-0 class sets the logical start position to zero.
<div
class="position-absolute start-0">
Start Element
</div>The start side depends on the document's writing direction. For a normal left-to-right page, start is the left side.
The end-0 class sets the logical end position to zero.
<div
class="position-absolute end-0">
End Element
</div>For a left-to-right page, the end side is normally the right side.
The top-50 utility places an element at 50% of the
positioning container's top dimension.
<div
class="position-absolute top-50">
50% From Top
</div>It is commonly combined with transform utilities for exact centering.
The start-50 utility positions an element at 50% from
the logical start side.
<div
class="position-absolute start-50">
Center Area
</div>
It is often combined with translate-middle to center an
element.
The bottom-50 utility places an element 50% from the
bottom of its positioning container.
<div
class="position-absolute bottom-50">
Bottom Position
</div>
The end-50 utility positions an element 50% from the
logical end side.
<div
class="position-absolute end-50">
End Position
</div>
Bootstrap provides the translate-middle utility to help
center positioned elements.
<div
class="position-absolute
top-50
start-50
translate-middle">
Centered Element
</div>
Here, top-50 and start-50 move the element
to the middle point, while translate-middle moves it back
by half of its own width and height.
The translate-middle-x utility moves an element by
negative 50% of its own width along the horizontal axis.
<div
class="position-absolute
start-50
translate-middle-x">
Horizontally Centered
</div>
The translate-middle-y utility moves an element by
negative 50% of its own height along the vertical axis.
<div
class="position-absolute
top-50
translate-middle-y">
Vertically Centered
</div>Position utilities are commonly used with badges.
<div class="position-relative">
<button class="btn btn-primary">
Messages
</button>
<span
class="position-absolute
top-0
start-100
translate-middle
badge
rounded-pill
bg-danger">
5
</span>
</div>
The parent uses position-relative, allowing the badge to
be positioned relative to it.
Position utilities can place text or buttons over an image.
<div class="position-relative">
<img
src="image.jpg"
class="img-fluid"
alt="Example">
<div
class="position-absolute
top-50
start-50
translate-middle
text-white">
Image Text
</div>
</div>A fixed element can stay attached to the viewport.
<button
class="btn btn-primary
position-fixed
bottom-0
end-0
m-3">
Help
</button>This example places the button near the bottom-right corner of the viewport in a left-to-right layout.
The position-sticky class can be combined with
top-0 to create a sticky header.
<header
class="position-sticky top-0 bg-dark text-white p-3">
Sticky Header
</header>The surrounding layout and scrolling context affect how sticky positioning behaves.
A common positioning pattern is to make the parent relative and the child absolute.
<div
class="position-relative p-5 bg-light">
<div
class="position-absolute
top-0
start-0
p-2">
Top Left
</div>
<div
class="position-absolute
bottom-0
end-0
p-2">
Bottom Right
</div>
</div>
You can combine top-0 and end-0 to position
an element at the top-right side in a left-to-right layout.
<div
class="position-relative">
<span
class="position-absolute
top-0
end-0
badge
bg-danger">
New
</span>
</div>
The combination of bottom-0 and start-0 can
place an element at the bottom-left side in a left-to-right layout.
<div
class="position-relative p-5">
<span
class="position-absolute
bottom-0
start-0">
Bottom Left
</span>
</div>Position utilities are useful for adding labels and badges to cards.
<div
class="card
position-relative">
<div class="card-body">
<h4>
Course Card
</h4>
<p>
Bootstrap Course
</p>
</div>
<span
class="position-absolute
top-0
end-0
badge
bg-success">
New
</span>
</div>Position utilities can be used to place controls such as close buttons inside custom containers.
<div
class="position-relative
p-4
border">
<button
type="button"
class="btn-close
position-absolute
top-0
end-0
m-2"
aria-label="Close">
</button>
<p>
This is a custom notification.
</p>
</div>Avoid these common mistakes:
position-absolute without understanding its
positioning ancestor.position-relative.top-0.start and end are logical
directions.Position utilities can be combined with responsive classes to create different layouts at different breakpoints.
<div
class="position-relative">
<div
class="position-absolute
top-0
end-0
d-none d-md-block">
Desktop Badge
</div>
</div>The display utility controls visibility while the position utilities control placement.
The following example creates a message centered inside a container.
<div
class="position-relative"
style="min-height:200px;">
<div
class="position-absolute
top-50
start-50
translate-middle
text-center">
<h4>
Welcome!
</h4>
<p>
Learn Bootstrap step by step.
</p>
</div>
</div>The parent provides the positioning context, while the child is placed at the center.
This example combines relative positioning, absolute positioning, badges, and centering.
<div
class="card
position-relative
overflow-hidden">
<div class="card-body text-center p-5">
<h2>
Bootstrap Course
</h2>
<p>
Learn Bootstrap from
beginner to advanced level.
</p>
<button
class="btn btn-primary">
Start Learning
</button>
</div>
<span
class="position-absolute
top-0
start-100
translate-middle
badge
rounded-pill
bg-danger">
New
</span>
<span
class="position-absolute
bottom-0
end-0
p-2
bg-success
text-white">
60 Lessons
</span>
</div>Learn Bootstrap from beginner to advanced level.
position-static uses normal static positioning.position-relative positions an element relative to its
normal location and provides a positioning context for absolute
children.position-absolute removes the element from normal
document flow and positions it relative to a positioned ancestor.position-fixed positions an element relative to the
viewport.position-sticky creates sticky positioning behavior.top-0 places an element at the top.bottom-0 places an element at the bottom.start-0 places an element at the logical start.end-0 places an element at the logical end.top-50 and start-50 can be used for
center positioning.translate-middle helps center an absolutely positioned
element.translate-middle-x centers an element horizontally.translate-middle-y centers an element vertically.Question: Which Bootstrap class sets an element to fixed positioning?