Position utilities

See Bootstrap docs
Responsive positioning
.position-{breakpoint}-{position}
<div class="position-static"></div>
<div class="position-sm-relative"></div>
<div class="position-md-absolute"></div>
<div class="position-lg-fixed"></div>
<div class="position-xl-sticky"></div>
Position elements when using .position-absolute
  • .top-0: sets top to 0.
  • .left-0: sets left to 0.
  • .right-0: sets right to 0.
  • .bottom-0: sets bottom to 0.
  • .center-x: centers the element on the x-axis.
  • .center-y: centers the element on the y-axis.
  • .center-xy: centers the element on the x and y axis.

.center-x, .center-y, and .center-xy are responsive, so you can easily set it at a specific breakpoint: .center-xy-md.

.top-0
.left-0
.center-xy
.top-0
.right-0
.bottom-0
.left-0
.center-y
.left-0
.center-y
.right-0
.top-0
.center-x
.bottom-0
.center-x
.bottom-0
.right-0
Relative top

For those cases when you need to make tiny changes up and down from 1 to 10 pixels. It sets position to relative and top in px.

.relative-top-(1-10) and .relative-top--(1-10) for negative values.

<div class="relative-top-1"></div>
<div class="relative-top-2"></div>
<div class="relative-top-3"></div>
<div class="relative-top-4"></div>
<div class="relative-top-5"></div>
<div class="relative-top-6"></div>
<div class="relative-top-7"></div>
<div class="relative-top-8"></div>
<div class="relative-top-9"></div>
<div class="relative-top-10"></div>

<div class="relative-top--1"></div>
<div class="relative-top--2"></div>
<div class="relative-top--3"></div>
<div class="relative-top--4"></div>
<div class="relative-top--5"></div>
<div class="relative-top--6"></div>
<div class="relative-top--7"></div>
<div class="relative-top--8"></div>
<div class="relative-top--9"></div>
<div class="relative-top--10"></div>