Position utilities

Notation #

The position property can be set using the following utility classes:

• .position-{value}
• .position-{breakpoint}-{value}

The {breakpoint} can be sm, md, lg, xl, or xxl. If the breakpoint is not provided, the element will be affected on all screen sizes (including on extra small screens). On the other hand, if it is provided, the element will be affected only for that breakpoint and up.

The {value} can be one of the following:

Arrange elements #

Elements can be easily arranged using the edge positioning utilities. The class names for these utilities come in the following formats:

• .{property}-{position}
• .{property}-{breakpoint}-{position}

The {property} can be one of the following:

The {position} can be one of the following:

You can see these classes in action in the example below.

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

Center elements #

You can also center the elements using the transform utility classes:

• .translate-middle / .translate-middle-{breakpoint} — centers both horizontally and vertically
• .translate-middle-x / .translate-middle-{breakpoint}-x — centers horizontally
• .translate-middle-y / .translate-middle-{breakpoint}-y — centers vertically

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

It is often useful to center elements only in one direction (horizontal or vertical), and as mentioned above, this can be done using .translate-middle-x and .translate-middle-y.

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

Examples #

Given below are some real life examples of these classes being used to build common UI/UX patterns for different components.

<!-- Input with inset label -->
<div class="position-relative">
  <label for="search-input" class="position-absolute top-50 start-0 translate-middle-y z-1 text-body-secondary ps-2">
    <i class="fa-regular fa-search"></i>
    <span class="visually-hidden">Search</span>
  </label>
  <input type="text" name="search" class="form-control" id="search-input" placeholder="Search" style="padding-left: 1.75rem;">
</div>

<!-- Button with floating badge -->
<button type="button" class="btn btn-secondary position-relative">
  <i class="fa-light fa-inbox me-1"></i> Inbox
  <span class="badge position-absolute top-0 start-100 translate-middle text-bg-primary">1</span>
</button>

<!-- Marker with arrow -->
<div class="position-relative d-inline-block px-3 py-1 text-bg-secondary border border-secondary rounded-pill">
  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</div>

Please note, the icons being used are taken from the Font Awesome icon library (opens in new tab). As shown in the examples above, the positioning utility classes can be used with different components in lots of useful ways. Here's another example of a step progress indicator.

<!-- Step progress indicator -->
<div class="position-relative my-4">
  <div class="progress bg-secondary bg-opacity-50 border-0 shadow-none" role="progressbar" aria-label="Progress" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: 1px;">
    <div class="progress-bar" style="width: 50%;"></div>
  </div>
  <button type="button" class="position-absolute top-0 start-0 translate-middle-y btn btn-primary rounded-pill" style="width: 30px;">1</button>
  <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-primary rounded-pill" style="width: 30px;">2</button>
  <button type="button" class="position-absolute top-0 end-0 translate-middle-y btn btn-secondary rounded-pill" style="width: 30px;">3</button>
</div>