Position

Common Positioning

The following utilities are available for positioning.

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

Responsive variants are also available in the form of .position{breakpoint}-{type}, such as .position-md-relative. Please refer to how our breakpoint nomenclature is used.

Fixed Top

Position an element at the top of the viewport, from edge to edge.

<div class="fixed-top">...</div>

Fixed Bottom

Position an element at the bottom of the viewport, from edge to edge.

<div class="fixed-bottom">...</div>

Sticky Top

Position an element at the top of the viewport, or container, from edge to edge, but only after you scroll past it.
This sticky utility uses CSS's position: sticky, which isn't fully supported in all browsers. Additional support information can be found at Can I Use - CSS position:sticky.

IE11 and IE10 will render position: sticky as position: relative. As such, we wrap the styles in a @supports query, limiting the stickiness to only browsers that can render it properly.

<div class="sticky-top">...</div>

Responsive Sticky Top

Responsive variations also exist for .sticky-top utility.

<div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>

Sticky Bottom

Position an element at the bottom of the viewport, or container, from edge to edge, but only until you scroll past it.

<div class="sticky-bottom">...</div>

Responsive Sticky Bottom

Responsive variations also exist for .sticky-bottom utility.

<div class="sticky-sm-bottom">Stick to the bottom on viewports sized SM (small) or wider</div>
<div class="sticky-md-bottom">Stick to the bottom on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-bottom">Stick to the bottom on viewports sized LG (large) or wider</div>
<div class="sticky-xl-bottom">Stick to the bottom on viewports sized XL (extra-large) or wider</div>

Element Placement

Arrange elements with the placement positioning utilities. The syntax 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 offset length
• 50 - for 50% offset length
• 100 - for 100% offset length

You can add more position values by adding entries to the $position-offsets Sass map variable. It is also possible to generate the responsive variants by modifying the $utility-placement-breakpoints Sass variable.

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

Element Translate

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.

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

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

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

It is also possible to generate the responsive variants of the translate utilities by modifying the $utility-translate-breakpoints Sass variable.

Examples

Here are some real life examples of these classes:

<button type="button" class="btn btn-primary position-relative">
  Mails <span class="position-absolute top-0 start-100 translate-middle badge radius-pill bg-secondary">+99 <span class="sr-only">unread messages</span></span>
</button>

<button type="button" class="btn btn-dark position-relative">
  Marker <svg width="1em" height="1em" viewBox="0 0 8 8" class="position-absolute top-100 start-50 translate-middle mt-0_25 text-dark" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M0 0l4 4 4-4h-8z" transform="translate(0 2)" /></svg>
</button>

<button type="button" class="btn btn-primary position-relative">
  Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light radius-circle bg-danger p-0_5"><span class="sr-only">unread messages</span></span>
</button>

You can use these classes with existing components to create new ones. Remember that you can extend its functionality by adding entries to the $position-offsets variable.

<div class="position-relative m-1_5">
  <div class="progress" role="progressbar" aria-label="Progress" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px;">
    <div class="progress-bar bg-primary" style="width: 50%;"></div>
  </div>
  <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary radius-circle">1</button>
  <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary radius-circle">2</button>
  <button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary radius-circle">3</button>
</div>

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

("0":    0,
"50":   50%,
"100":  100%)

Mixins

No mixins available.