v4 Beta now available! Try it out! Feedback welcome!
Looking for v3 docs?

Position

Place a component outside the normal document flow.

Page Contents

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.