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.