Position

Use these shorthand utilities for quickly configuring the position of an element.

Position on Bootstrap

Position values

Quick positioning classes are available, though they are not responsive.

.position-static
.position-relative
.position-absolute
.position-sticky
.fixed-top
.fixed-bottom

Arrange Elements

Arrange elements easily with the edge positioning utilities. The format is {property}-{position}. has special utility class .all-0to 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-900 rounded-1 position-absolute top-0 start-0"></div>
  <div class="light p-3 bg-900 rounded-1 position-absolute top-0 end-0"></div>
  <div class="light p-3 bg-900 rounded-1 position-absolute top-50 start-50"></div>
  <div class="light p-3 bg-900 rounded-1 position-absolute bottom-50 end-50"></div>
  <div class="light p-3 bg-900 rounded-1 position-absolute bottom-0 start-0"></div>
  <div class="light p-3 bg-900 rounded-1 position-absolute bottom-0 end-0"></div>
</div>
<div class="position-relative light" style="height: 100px; width: 100px">
  <div class="bg-900 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-900 rounded-1 position-absolute top-0 start-50 translate-middle-x"></div>
  <div class="light p-3 bg-900 rounded-1 position-absolute top-50 start-0 translate-middle-y"></div>
  <div class="light p-3 bg-900 rounded-1 position-absolute top-50 start-50 translate-middle"></div>
  <div class="light p-3 bg-900 rounded-1 position-absolute top-50 end-0 translate-middle-y"></div>
  <div class="light p-3 bg-900 rounded-1 position-absolute bottom-0 start-50 translate-middle-x"></div>
</div>
On this page