Position

Position values

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

<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>

Arrange elements

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 start position
• bottom - for the vertical bottom bottom position
• end - for the horizontal right end position

Where position is one of:

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

Examples

<div class="position-absolute top-0 start-0"></div>
<div class="position-absolute bottom-50 end-50"></div>

Center elements

In addition, 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.

Examples

<div class="position-absolute top-0 start-0 translate-middle"></div>
<div class="position-absolute top-0 start-100 translate-middle"></div>
<div class="position-absolute top-0 start-50 translate-middle-x"></div>
<div class="position-absolute top-50 end-0 translate-middle-y"></div>

<button class="btn btn-primary position-relative me-3">
    Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99</span>
</button>

<button class="btn btn-primary position-relative">
    Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
</button>