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>Position static</div>
<h4 class="h5 text-muted mt-3">Relative</h4>
<div>Position relative</div>
<h4 class="h5 text-muted mt-3">Absolute</h4>
<div>Position absolute</div>
<h4 class="h5 text-muted mt-3">Fixed</h4>
<div>Position fixed</div>
<h4 class="h5 text-muted mt-3">Sticky</h4>
<div>Position sticky</div><h4 class="h5 text-muted mt-3">Static</h4>
<div>Position static</div>
<h4 class="h5 text-muted mt-3">Relative</h4>
<div>Position relative</div>
<h4 class="h5 text-muted mt-3">Absolute</h4>
<div>Position absolute</div>
<h4 class="h5 text-muted mt-3">Fixed</h4>
<div>Position fixed</div>
<h4 class="h5 text-muted mt-3">Sticky</h4>
<div>Position sticky</div>
Arrange elements
Top left
Top right
Center (top left)
Center (bottom right)
Bottom left
Bottom right
<div class="border m-5 w-50" style="height: 300px;">
<div class="p-2 text-white bg-dark">Top left</div>
<div class="p-2 text-white bg-dark">Top right</div>
<div class="p-2 text-white bg-dark">Center (top left)</div>
<div class="p-2 text-white bg-dark">Center (bottom right)</div>
<div class="p-2 text-white bg-dark">Bottom left</div>
<div class="p-2 text-white bg-dark">Bottom right</div>
</div><div class="border m-5 w-50" style="height: 300px;">
<div class="p-2 text-white bg-dark">Top left</div>
<div class="p-2 text-white bg-dark">Top right</div>
<div class="p-2 text-white bg-dark">Center (top left)</div>
<div class="p-2 text-white bg-dark">Center (bottom right)</div>
<div class="p-2 text-white bg-dark">Bottom left</div>
<div class="p-2 text-white bg-dark">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">Top left</div>
<div class="p-2 text-white bg-dark">Top center</div>
<div class="p-2 text-white bg-dark">Top right</div>
<div class="p-2 text-white bg-dark">Middle left</div>
<div class="p-2 text-white bg-dark">Middle center</div>
<div class="p-2 text-white bg-dark">Middle right</div>
<div class="p-2 text-white bg-dark">Bottom left</div>
<div class="p-2 text-white bg-dark">Bottom center</div>
<div class="p-2 text-white bg-dark">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">Top left</div>
<div class="p-2 text-white bg-dark">Top center</div>
<div class="p-2 text-white bg-dark">Top right</div>
<div class="p-2 text-white bg-dark">Middle left</div>
<div class="p-2 text-white bg-dark">Middle center</div>
<div class="p-2 text-white bg-dark">Middle right</div>
<div class="p-2 text-white bg-dark">Bottom left</div>
<div class="p-2 text-white bg-dark">Bottom center</div>
<div class="p-2 text-white bg-dark">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">Top left</div>
<div class="p-2 text-white bg-dark">Top center</div>
<div class="p-2 text-white bg-dark">Top right</div>
<div class="p-2 text-white bg-dark">Middle left</div>
<div class="p-2 text-white bg-dark">Middle center</div>
<div class="p-2 text-white bg-dark">Middle right</div>
<div class="p-2 text-white bg-dark">Bottom left</div>
<div class="p-2 text-white bg-dark">Bottom center</div>
<div class="p-2 text-white bg-dark">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">Top left</div>
<div class="p-2 text-white bg-dark">Top center</div>
<div class="p-2 text-white bg-dark">Top right</div>
<div class="p-2 text-white bg-dark">Middle left</div>
<div class="p-2 text-white bg-dark">Middle center</div>
<div class="p-2 text-white bg-dark">Middle right</div>
<div class="p-2 text-white bg-dark">Bottom left</div>
<div class="p-2 text-white bg-dark">Bottom center</div>
<div class="p-2 text-white bg-dark">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">
Messages <span class="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">
Messages <span class="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">
Marker
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" 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="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="badge bg-primary rounded-pill d-flex justify-content-center align-items-center" style="width: 2rem; height: 2rem;">1</div>
<div class="badge bg-primary rounded-pill d-flex justify-content-center align-items-center" style="width: 2rem; height: 2rem;">2</div>
<div class="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">
Messages <span class="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">
Messages <span class="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">
Marker
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" 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="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="badge bg-primary rounded-pill d-flex justify-content-center align-items-center" style="width: 2rem; height: 2rem;">1</div>
<div class="badge bg-primary rounded-pill d-flex justify-content-center align-items-center" style="width: 2rem; height: 2rem;">2</div>
<div class="badge bg-secondary rounded-pill d-flex justify-content-center align-items-center" style="width: 2rem; height: 2rem;">3</div>
</div>