How do I create a sticky footer layout with Bootstrap 5 utilities only?

Asked on Jun 15, 2025

1 Answer

To create a sticky footer layout using Bootstrap 5 utilities, you can leverage the flexbox utilities provided by Bootstrap. This approach ensures that the footer stays at the bottom of the viewport when the content is short.

<!-- 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">
                <div class="container py-3">
                    Main content goes here.
                </div>
            </main>
            <footer class="bg-dark text-white p-3 mt-auto">
                Footer
            </footer>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

Use a `
` with `d-flex` and `flex-column` to create a vertical flexbox container.
Apply `min-vh-100` to ensure the container takes at least the full height of the viewport.
Use `flex-fill` on the `
` element to make it take up remaining space.
Add `mt-auto` to the `
` to push it to the bottom when the content is short.
Customize the header, main, and footer sections as needed for your design.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions