Position
Position values
Static
Position static
Relative
Position relative
Absolute
Position absolute
Fixed
Position fixed
Sticky
Position sticky
<h4 class="h5 text-muted mt-3">Static</h4>
<div class="position-static">Position static</div>
<h4 class="h5 text-muted mt-3">Relative</h4>
<div class="position-relative">Position relative</div>
<h4 class="h5 text-muted mt-3">Absolute</h4>
<div class="position-absolute">Position absolute</div>
<h4 class="h5 text-muted mt-3">Fixed</h4>
<div class="position-fixed">Position fixed</div>
<h4 class="h5 text-muted mt-3">Sticky</h4>
<div class="position-sticky">Position sticky</div><h4 class="h5 text-muted mt-3">Static</h4>
<div class="position-static">Position static</div>
<h4 class="h5 text-muted mt-3">Relative</h4>
<div class="position-relative">Position relative</div>
<h4 class="h5 text-muted mt-3">Absolute</h4>
<div class="position-absolute">Position absolute</div>
<h4 class="h5 text-muted mt-3">Fixed</h4>
<div class="position-fixed">Position fixed</div>
<h4 class="h5 text-muted mt-3">Sticky</h4>
<div class="position-sticky">Position sticky</div>
Arrange elements
Top left
Top right
Center (top left)
Center (bottom right)
Bottom left
Bottom right
<div class="position-relative border m-5 w-50" style="height: 300px;">
<div class="p-2 text-white bg-dark position-absolute top-0 start-0">Top left</div>
<div class="p-2 text-white bg-dark position-absolute top-0 end-0">Top right</div>
<div class="p-2 text-white bg-dark position-absolute top-50 start-50">Center (top left)</div>
<div class="p-2 text-white bg-dark position-absolute bottom-50 end-50">Center (bottom right)</div>
<div class="p-2 text-white bg-dark position-absolute bottom-0 start-0">Bottom left</div>
<div class="p-2 text-white bg-dark position-absolute bottom-0 end-0">Bottom right</div>
</div><div class="position-relative border m-5 w-50" style="height: 300px;">
<div class="p-2 text-white bg-dark position-absolute top-0 start-0">Top left</div>
<div class="p-2 text-white bg-dark position-absolute top-0 end-0">Top right</div>
<div class="p-2 text-white bg-dark position-absolute top-50 start-50">Center (top left)</div>
<div class="p-2 text-white bg-dark position-absolute bottom-50 end-50">Center (bottom right)</div>
<div class="p-2 text-white bg-dark position-absolute bottom-0 start-0">Bottom left</div>
<div class="p-2 text-white bg-dark position-absolute bottom-0 end-0">Bottom right</div>
</div>
Center elements
Both directions
Horizontal and vertical centering only works when using top and start values for positioning.
Top left
Top center
Top right
Middle left
Middle center
Middle right
Bottom left
Bottom center
Bottom right
One direction
Horizontal centering only works when using start value for positioning.
Vertical centering only works when using top value for positioning.
Top left
Top center
Top right
Middle left
Middle center
Middle right
Bottom left
Bottom center
Bottom right
<h4 class="h5 text-muted mt-3">Both directions</h4>
<p>Horizontal and vertical centering only works when using top and start values for positioning.</p>
<div class="position-relative border m-5 w-50" style="height: 300px;">
<div class="p-2 text-white bg-dark position-absolute top-0 start-0 translate-middle">Top left</div>
<div class="p-2 text-white bg-dark position-absolute top-0 start-50 translate-middle">Top center</div>
<div class="p-2 text-white bg-dark position-absolute top-0 start-100 translate-middle">Top right</div>
<div class="p-2 text-white bg-dark position-absolute top-50 start-0 translate-middle">Middle left</div>
<div class="p-2 text-white bg-dark position-absolute top-50 start-50 translate-middle">Middle center</div>
<div class="p-2 text-white bg-dark position-absolute top-50 start-100 translate-middle">Middle right</div>
<div class="p-2 text-white bg-dark position-absolute top-100 start-0 translate-middle">Bottom left</div>
<div class="p-2 text-white bg-dark position-absolute top-100 start-50 translate-middle">Bottom center</div>
<div class="p-2 text-white bg-dark position-absolute top-100 start-100 translate-middle">Bottom right</div>
</div>
<h4 class="h5 text-muted mt-3">One direction</h4>
<p>
Horizontal centering only works when using start value for positioning.<br>
Vertical centering only works when using top value for positioning.
</p>
<div class="position-relative border m-5 w-50" style="height: 300px;">
<div class="p-2 text-white bg-dark position-absolute top-0 start-0">Top left</div>
<div class="p-2 text-white bg-dark position-absolute top-0 start-50 translate-middle-x">Top center</div>
<div class="p-2 text-white bg-dark position-absolute top-0 end-0">Top right</div>
<div class="p-2 text-white bg-dark position-absolute top-50 start-0 translate-middle-y">Middle left</div>
<div class="p-2 text-white bg-dark position-absolute top-50 start-50 translate-middle">Middle center</div>
<div class="p-2 text-white bg-dark position-absolute top-50 end-0 translate-middle-y">Middle right</div>
<div class="p-2 text-white bg-dark position-absolute bottom-0 start-0">Bottom left</div>
<div class="p-2 text-white bg-dark position-absolute bottom-0 start-50 translate-middle-x">Bottom center</div>
<div class="p-2 text-white bg-dark position-absolute bottom-0 end-0">Bottom right</div>
</div><h4 class="h5 text-muted mt-3">Both directions</h4>
<p>Horizontal and vertical centering only works when using top and start values for positioning.</p>
<div class="position-relative border m-5 w-50" style="height: 300px;">
<div class="p-2 text-white bg-dark position-absolute top-0 start-0 translate-middle">Top left</div>
<div class="p-2 text-white bg-dark position-absolute top-0 start-50 translate-middle">Top center</div>
<div class="p-2 text-white bg-dark position-absolute top-0 start-100 translate-middle">Top right</div>
<div class="p-2 text-white bg-dark position-absolute top-50 start-0 translate-middle">Middle left</div>
<div class="p-2 text-white bg-dark position-absolute top-50 start-50 translate-middle">Middle center</div>
<div class="p-2 text-white bg-dark position-absolute top-50 start-100 translate-middle">Middle right</div>
<div class="p-2 text-white bg-dark position-absolute top-100 start-0 translate-middle">Bottom left</div>
<div class="p-2 text-white bg-dark position-absolute top-100 start-50 translate-middle">Bottom center</div>
<div class="p-2 text-white bg-dark position-absolute top-100 start-100 translate-middle">Bottom right</div>
</div>
<h4 class="h5 text-muted mt-3">One direction</h4>
<p>
Horizontal centering only works when using start value for positioning.<br>
Vertical centering only works when using top value for positioning.
</p>
<div class="position-relative border m-5 w-50" style="height: 300px;">
<div class="p-2 text-white bg-dark position-absolute top-0 start-0">Top left</div>
<div class="p-2 text-white bg-dark position-absolute top-0 start-50 translate-middle-x">Top center</div>
<div class="p-2 text-white bg-dark position-absolute top-0 end-0">Top right</div>
<div class="p-2 text-white bg-dark position-absolute top-50 start-0 translate-middle-y">Middle left</div>
<div class="p-2 text-white bg-dark position-absolute top-50 start-50 translate-middle">Middle center</div>
<div class="p-2 text-white bg-dark position-absolute top-50 end-0 translate-middle-y">Middle right</div>
<div class="p-2 text-white bg-dark position-absolute bottom-0 start-0">Bottom left</div>
<div class="p-2 text-white bg-dark position-absolute bottom-0 start-50 translate-middle-x">Bottom center</div>
<div class="p-2 text-white bg-dark position-absolute bottom-0 end-0">Bottom right</div>
</div>
Examples
Notification number
Notification circle
Marker
Progress with steps
1
2
3
<h4 class="h5 text-muted mt-3">Notification number</h4>
<button type="button" class="btn btn-primary position-relative">
Messages <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">3 <span class="visually-hidden">unread messages</span></span>
</button>
<h4 class="h5 text-muted mt-3">Notification circle</h4>
<button type="button" class="btn btn-primary position-relative">
Messages <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
</button>
<h4 class="h5 text-muted mt-3">Marker</h4>
<button type="button" class="btn btn-dark position-relative">
Marker
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill position-absolute top-100 start-50 translate-middle mt-1 text-dark" viewBox="0 0 16 16">
<path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"></path>
</svg>
</button>
<h4 class="h5 text-muted mt-3">Progress with steps</h4>
<div class="position-relative m-4 w-50">
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="position-absolute top-0 start-0 translate-middle badge bg-primary rounded-pill d-flex justify-content-center align-items-center" style="width: 2rem; height: 2rem;">1</div>
<div class="position-absolute top-0 start-50 translate-middle badge bg-primary rounded-pill d-flex justify-content-center align-items-center" style="width: 2rem; height: 2rem;">2</div>
<div class="position-absolute top-0 start-100 translate-middle badge bg-secondary rounded-pill d-flex justify-content-center align-items-center" style="width: 2rem; height: 2rem;">3</div>
</div><h4 class="h5 text-muted mt-3">Notification number</h4>
<button type="button" class="btn btn-primary position-relative">
Messages <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">3 <span class="visually-hidden">unread messages</span></span>
</button>
<h4 class="h5 text-muted mt-3">Notification circle</h4>
<button type="button" class="btn btn-primary position-relative">
Messages <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
</button>
<h4 class="h5 text-muted mt-3">Marker</h4>
<button type="button" class="btn btn-dark position-relative">
Marker
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill position-absolute top-100 start-50 translate-middle mt-1 text-dark" viewBox="0 0 16 16">
<path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"></path>
</svg>
</button>
<h4 class="h5 text-muted mt-3">Progress with steps</h4>
<div class="position-relative m-4 w-50">
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="position-absolute top-0 start-0 translate-middle badge bg-primary rounded-pill d-flex justify-content-center align-items-center" style="width: 2rem; height: 2rem;">1</div>
<div class="position-absolute top-0 start-50 translate-middle badge bg-primary rounded-pill d-flex justify-content-center align-items-center" style="width: 2rem; height: 2rem;">2</div>
<div class="position-absolute top-0 start-100 translate-middle badge bg-secondary rounded-pill d-flex justify-content-center align-items-center" style="width: 2rem; height: 2rem;">3</div>
</div>