Position

Place a component outside the normal document flow.

Warnings
Common Positioning
Quick Positioning
SASS Reference
- Variables
- Mixins

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>

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.
`$utility-position-breakpoints`	string	`map-keys($grid-breakpoints)`	Map of breakpoints that will be used to generate responsive position 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.