How do I make a sticky footer with Bootstrap 5?

Asked on Sep 26, 2025

Answer

To create a sticky footer using Bootstrap 5, you can utilize the utility classes and flexbox layout. This ensures that the footer stays at the bottom of the viewport when the content is not tall enough to fill the page. 
<!-- BEGIN COPY / PASTE -->
        <div class="d-flex flex-column min-vh-100">
            <main class="flex-fill">
                <!-- Your main content here -->
            </main>
            <footer class="bg-light text-center py-3 mt-auto">
                <!-- Footer content here -->
                &copy; 2023 Your Company
            </footer>
        </div>
        <!-- END COPY / PASTE -->
Additional Comment:
  • The `d-flex` and `flex-column` classes create a flexbox container with a column direction.
  • `min-vh-100` ensures the container takes at least the full height of the viewport.
  • `flex-fill` makes the main content area expand to fill the available space.
  • `mt-auto` on the footer pushes it to the bottom when the content is not enough to fill the page.
✅ Answered with Bootstrap 5 best practices.
Recommended Links:

Fatal error: Uncaught PDOException: SQLSTATE[23000]: Integrity constraint violation: 1062 Duplicate entry '' for key 'slug' in /home/qandanet/public_html/bootstrap/pages/question.php:132 Stack trace: #0 /home/qandanet/public_html/bootstrap/pages/question.php(132): PDOStatement->execute(Array) #1 /home/qandanet/public_html/bootstrap/pages/question.php(173): ensureVendor(Object(PDO), 'AI Bootstrap Bu...', 'https://ai-boot...', 'paid') #2 /home/qandanet/public_html/bootstrap/index.php(56): include('/home/qandanet/...') #3 {main} thrown in /home/qandanet/public_html/bootstrap/pages/question.php on line 132