Position

Fixed top and bottom #

You can position an element to the top or bottom of the viewport, from edge to edge, using the following utility classes:

• .fixed-top
• .fixed-bottom

Please be sure you understand the ramifications of fixed positioning in your project; you may need to add additional CSS. For example, if a navbar is fixed to the top, any :target inside the general content area will require scroll-margin-top greater than or equal to the height of the navbar.

Sticky top and bottom #

You can also position an element to the top or bottom of the viewport, from edge to edge, but only after you scroll past it. This can be done using the following utility classes:

• .sticky-top / .sticky-{breakpoint}-top
• .sticky-bottom / .sticky-{breakpoint}-bottom

The {breakpoint} can be sm, md, lg, xl, or xxl. If the breakpoint is not provided, the element will be affected on all screen sizes (including on extra small screens). On the other hand, if it is provided, the element will be affected only for that breakpoint and up.