Position

The position helpers are used to configure the position of an element within the viewport. There are responsive variations for the sticky positions as well.

Using the .fixed-top class will position the element at the top of the page, from edge to edge. Be sure to understand the implications of the fixed position before using.

Using the .fixed-bottom class will position the element at the bottom of the page, from edge to edge. Be sure to understand the implications of the fixed position before using.

Using the .sticky-top class will position the element at the top of the page once you scroll past it. Note that if you're already using a navigation bar, elements with sticky position might overlap; This case needs to be handled specifically, depending on the elements on the page.

There are also 5 variations of the .sticky-top class, based on the breakpoints. These are usefull when a certain element needs to stick to the top for certain devices only.

• .sticky-sm-top
• .sticky-md-top
• .sticky-lg-top
• .sticky-xl-top
• .sticky-xxl-top

Using the .sticky-bottom class will position the element at the bottom of the page once you scroll past it. Note that if you're already using a navigation bar, elements with sticky position might overlap; This case needs to be handled specifically, depending on the elements on the page.

There are also 5 variations of the .sticky-bottom class, based on the breakpoints. These are usefull when a certain element needs to stick to the bottom for certain devices only.

• .sticky-sm-bottom
• .sticky-md-bottom
• .sticky-lg-bottom
• .sticky-xl-bottom
• .sticky-xxl-bottom