Position

Place a component outside the normal document flow.

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.

Name Type Default Description
$enable-utility-position boolean true Enable the generation of the position utility classes. Smaller segements of the position utilities can be disabled with the following $enable-* variables.
$enable-utility-position-fixed-top boolean true Enable the generation of the fixed top position utility class.
$enable-utility-position-fixed-bottom boolean true Enable the generation of the fixed bottom position utility class.
$enable-utility-position-sticky-top boolean true Enable the generation of the sticky top position utility class.
$enable-utility-position-sticky-top-responsive boolean true Enable the generation of the additional responsive sticky top position utility class. $enable-utility-position-sticky-top needs to be true for this setting be be observed.
$enable-utility-position-sticky-bottom boolean true Enable the generation of the sticky bottom position utility class.
$enable-utility-position-sticky-bottom-responsive boolean true Enable the generation of the additional responsive sticky bottom position utility class. $enable-utility-position-sticky-bottom needs to be true for this setting be be observed.
$enable-utility-position-placement boolean true Enable the generation of the placement position utility classes.
$enable-utility-position-translate boolean true Enable the generation of the translate position utility classes.
$utility-position-breakpoints string map-keys($grid-breakpoints) Map of breakpoints that will be used to generate responsive position utilities.
$utility-sticky-top-breakpoints string map-keys($grid-breakpoints) Map of breakpoints that will be used to generate responsive sticky-top utilities.
$utility-sticky-bottom-breakpoints string map-keys($grid-breakpoints) Map of breakpoints that will be used to generate responsive sticky-bottom utilities.
$utility-placement-breakpoints string "xs"

Map of breakpoints that will be used to generate responsive placement utilities.

By default this is limited to just the xs breakpoint, so not all the responsive variants are created.
$utility-translate-breakpoints string "xs"

Map of breakpoints that will be used to generate responsive translate utilities.

By default this is limited to just the xs breakpoint, so not all the responsive variants are created.
$utility-position string static, relative, absolute, fixed, sticky List of position values that will be used to generate responsive position utilities.
$position-offsets string
("0":    0,
"50":   50%,
"100":  100%)
Map of length (offset) values that will be used to generate placement utilities.
$position-top-offsets string $position-offsets Map of length (offset) values that will be used to generate top placement utilities.
$position-end-offsets string $position-offsets Map of length (offset) values that will be used to generate end-side placement utilities.
$position-bottom-offsets string $position-offsets Map of length (offset) values that will be used to generate bottom placement utilities.
$position-start-offsets string $position-offsets Map of length (offset) values that will be used to generate start-side placement utilities.

Mixins

No mixins available.