Position
Position values
Static
Relative
Absolute
Fixed
Sticky
<h4 class="h5 text-muted mt-3">Static</h4>
<h4 class="h5 text-muted mt-3">Relative</h4>
<h4 class="h5 text-muted mt-3">Absolute</h4>
<h4 class="h5 text-muted mt-3">Fixed</h4>
<h4 class="h5 text-muted mt-3">Sticky</h4><h4 class="h5 text-muted mt-3">Static</h4>
<h4 class="h5 text-muted mt-3">Relative</h4>
<h4 class="h5 text-muted mt-3">Absolute</h4>
<h4 class="h5 text-muted mt-3">Fixed</h4>
<h4 class="h5 text-muted mt-3">Sticky</h4>
Arrange elements
Center elements
Both directions
Horizontal and vertical centering only works when using top and start values for positioning.
One direction
Horizontal centering only works when using start value for positioning.
Vertical centering only works when using top value for positioning.
<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>
<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><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>
<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>
Examples
Notification number
Notification circle
Marker
Progress with steps
<h4 class="h5 text-muted mt-3">Notification number</h4>
<h4 class="h5 text-muted mt-3">Notification circle</h4>
<h4 class="h5 text-muted mt-3">Marker</h4>
<h4 class="h5 text-muted mt-3">Progress with steps</h4><h4 class="h5 text-muted mt-3">Notification number</h4>
<h4 class="h5 text-muted mt-3">Notification circle</h4>
<h4 class="h5 text-muted mt-3">Marker</h4>
<h4 class="h5 text-muted mt-3">Progress with steps</h4>