Fixed top
Position an element at the top of the viewport, from edge to edge.
Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.
vue
<template>
<b-div fixed="top">
fixed-top
</b-div>
</template>
Fixed bottom
Position an element at the bottom of the viewport, from edge to edge.
Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.
vue
<template>
<b-div position="fixed-bottom">
...
</b-div>
</template>
Sticky top
Position an element at the top of the viewport, from edge to edge, but only after you scroll past it.
The sticky-top, value uses CSS's position: sticky, which isn't fully supported in all browsers.
vue
<template>
<b-div sticky="top">
...
</b-div>
</template>
Responsive sticky top
Responsive variations also exist for sticky-top utility.
vue
<template>
<b-div sticky="sm-top">
Stick to the top on viewports sized SM (small) or wider
</b-div>
<b-div sticky="md-top">
Stick to the top on viewports sized MD (medium) or wider
</b-div>
<b-div sticky="lg-top">
Stick to the top on viewports sized LG (large) or wider
</b-div>
<b-div sticky="xl-top">
Stick to the top on viewports sized XL (extra-large) or wider
</b-div>
</template>