What is the best way to use Bootstrap 5 utilities to make a sticky footer that stays at the bottom of the viewport?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

What is the best way to use Bootstrap 5 utilities to make a sticky footer that stays at the bottom of the viewport?

Asked on Sep 17, 2025

Answer

To create a sticky footer using Bootstrap 5 utilities, you can use the `d-flex`, `flex-column`, and `mt-auto` classes to ensure the footer sticks to the bottom of the viewport. Here's a simple example:

<!-- BEGIN COPY / PASTE -->
        <div class="d-flex flex-column min-vh-100">
            <header class="bg-primary text-white p-3">
                Header
            </header>
            <main class="flex-fill">
                Main content
            </main>
            <footer class="bg-dark text-white p-3 mt-auto">
                Sticky Footer
            </footer>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

This layout uses `d-flex` and `flex-column` to create a vertical flexbox container.
`min-vh-100` ensures the container takes at least the full height of the viewport.
`flex-fill` allows the main content to expand and fill the available space.
`mt-auto` pushes the footer to the bottom of the container.
This approach is responsive and works well across different screen sizes.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

What is the best way to use Bootstrap 5 utilities to make a sticky footer that stays at the bottom of the viewport?

Asked on Sep 17, 2025

Answer

The Q&A Network