How do I make a sticky header or sticky footer using Bootstrap 5 utilities?

Asked on Jun 01, 2025

1 Answer

To create a sticky header or footer using Bootstrap 5 utilities, you can use the `position-sticky` utility class along with `top-0` or `bottom-0` to fix the element at the top or bottom of the viewport.

<!-- BEGIN COPY / PASTE -->
        <!-- Sticky Header -->
        <header class="bg-primary text-white p-3 position-sticky top-0">
            Sticky Header
        </header>

        <!-- Content -->
        <div class="content" style="height: 200vh;">
            <p>Scroll to see the sticky header in action.</p>
        </div>

        <!-- Sticky Footer -->
        <footer class="bg-secondary text-white p-3 position-sticky bottom-0">
            Sticky Footer
        </footer>
        <!-- END COPY / PASTE -->

Additional Comment:

Use `position-sticky` to make an element sticky.
Combine with `top-0` for a sticky header or `bottom-0` for a sticky footer.
Ensure the parent container has a defined height for the sticky effect to work properly.
The sticky element will remain in place while scrolling within its parent container.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions