Position
Use these shorthand utilities for quickly configuring the position of an element.
Position on Bootstrap.position-static
.position-relative
.position-absolute
.position-sticky
.fixed-top
.fixed-bottom<div class="position-relative bg-body-secondary mb-4" style="height: 200px;">
<div class="p-3 bg-body-quaternary rounded-1 position-absolute top-0 start-0"></div>
<div class="p-3 bg-body-quaternary rounded-1 position-absolute top-0 end-0"></div>
<div class="p-3 bg-body-quaternary rounded-1 position-absolute top-50 start-50"></div>
<div class="p-3 bg-body-quaternary rounded-1 position-absolute bottom-50 end-50"></div>
<div class="p-3 bg-body-quaternary rounded-1 position-absolute bottom-0 start-0"></div>
<div class="p-3 bg-body-quaternary rounded-1 position-absolute bottom-0 end-0"></div>
</div>
<div class="position-relative" style="height: 100px; width: 100px">
<div class="bg-body-quaternary rounded-1 text-white d-flex flex-center position-absolute all-0">.all-0</div>
</div>.all-0
<div class="position-relative bg-body-secondary" style="height: 200px;">
<div class="p-3 bg-body-quaternary rounded-1 position-absolute top-0 start-50 translate-middle-x"></div>
<div class="p-3 bg-body-quaternary rounded-1 position-absolute top-50 start-0 translate-middle-y"></div>
<div class="p-3 bg-body-quaternary rounded-1 position-absolute top-50 start-50 translate-middle"></div>
<div class="p-3 bg-body-quaternary rounded-1 position-absolute top-50 end-0 translate-middle-y"></div>
<div class="p-3 bg-body-quaternary rounded-1 position-absolute bottom-0 start-50 translate-middle-x"></div>
</div>
