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-200 mb-4" style="height: 200px;">
<div class="light p-3 bg-600 rounded-1 position-absolute top-0 start-0"></div>
<div class="light p-3 bg-600 rounded-1 position-absolute top-0 end-0"></div>
<div class="light p-3 bg-600 rounded-1 position-absolute top-50 start-50"></div>
<div class="light p-3 bg-600 rounded-1 position-absolute bottom-50 end-50"></div>
<div class="light p-3 bg-600 rounded-1 position-absolute bottom-0 start-0"></div>
<div class="light p-3 bg-600 rounded-1 position-absolute bottom-0 end-0"></div>
</div>
<div class="position-relative light" style="height: 100px; width: 100px">
<div class="bg-600 rounded-1 text-white d-flex flex-center position-absolute all-0">.all-0</div>
</div>.all-0
<div class="position-relative bg-200" style="height: 200px;">
<div class="light p-3 bg-600 rounded-1 position-absolute top-0 start-50 translate-middle-x"></div>
<div class="light p-3 bg-600 rounded-1 position-absolute top-50 start-0 translate-middle-y"></div>
<div class="light p-3 bg-600 rounded-1 position-absolute top-50 start-50 translate-middle"></div>
<div class="light p-3 bg-600 rounded-1 position-absolute top-50 end-0 translate-middle-y"></div>
<div class="light p-3 bg-600 rounded-1 position-absolute bottom-0 start-50 translate-middle-x"></div>
</div>