Position

Place a component outside the normal document flow.

Warnings

Be sure you understand the ramifications of fixed and absolute position in your project; you may need to add aditional CSS.

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.

Quick Positioning

There are also some quick positioning utilities available, but they are not responsive.

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

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.
$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-position string static, relative, absolute, fixed, sticky List of position values that will be used to generate responsive position utilities.

Mixins

No mixins available.