How do I keep a footer at the bottom on short pages but below content on tall ones?

Asked on Sep 10, 2025

1 Answer

To keep a footer at the bottom of short pages while allowing it to be below content on taller pages, you can use a sticky footer layout with Bootstrap 5. This involves using flexbox to ensure the footer stays at the bottom when the content is short.

<!-- BEGIN COPY / PASTE -->
        <div class="d-flex flex-column min-vh-100">
            <main class="flex-fill">
                <!-- Your page content here -->
            </main>
            <footer class="bg-dark text-white text-center py-3">
                <!-- Footer content here -->
                Footer Content
            </footer>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

Use the `d-flex` and `flex-column` classes on a container to create a flexbox layout.
The `min-vh-100` class ensures the container takes at least the full viewport height.
The `flex-fill` class on the `
` element allows it to expand and take up available space, pushing the footer to the bottom if the content is short.
The footer will naturally move below the content on taller pages.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions