Bootstrap Position Utility Classes

You can use these shorthand utilities for quickly configuring the position of an element.

images/coding/coding08.webp

For example,

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

Edge Positioning Utilities

You can arrange elements easily with the edge positioning utilities. The format is {property}-{position}.

Where property is one of:

  • top - for the vertical top position
  • start - for the horizontal left position (in LTR)
  • bottom - for the vertical bottom position
  • end - for the horizontal right position (in LTR)

Where position is one of:

  • 0 - for 0 edge position
  • 50 - for 50% edge position
  • 100 - for 100% edge position

How to Use

Add position-relative class to the parent container and postion-absolute class along with edge positioning classes to the child items.

Translate Middle

You can also center the elements with the transform utility class .translate-middle. This class applies the transformations translateX(-50%) and translateY(-50%) to the element which, in combination with the edge positioning utilities, allows you to absolute center an element.

By adding .translate-middle-x or .translate-middle-y classes, elements can be positioned only in horizontal or vertical direction.