Position
Use these shorthand utilities for quickly configuring the position of an element.
Position on BootstrapPosition values
Quick positioning classes are available, though they are not responsive.
.position-static
.position-relative
.position-absolute
.position-sticky
.fixed-top
.fixed-bottomArrange Elements
Arrange elements easily with the edge positioning utilities. The format is {property}-{position}. has special utility class .all-0 to give full height/width to child element of parent element.
<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
Center Elements
In addition, you can also center the elements with the transform utility classes .translate-middle, .translate-middle-x , .translate-middle-y. Responsive variations also exist for transform-middle, For example: transform-{xxl|xl|lg|md|sm}-middle-{x|y}.
<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>