Bootstrap Sticky Footer Layout

When a page has only a little content, the footer can float in the middle of the screen. This layout keeps the footer at the bottom of the window with only flex utilities, and it moves down when the content is long.

<div class="d-flex flex-column" style="min-height: 300px">
  <header class="navbar bg-dark" data-bs-theme="dark">
    <div class="container"><a class="navbar-brand" href="#">MySite</a></div>
  </header>

  <main class="flex-grow-1">
    <div class="container py-4">
      <h1 class="h3">Short page</h1>
      <p>This page has only a little content, but the footer is still at the bottom.</p>
    </div>
  </main>

  <footer class="bg-body-tertiary border-top py-3">
    <div class="container text-body-secondary small">&copy; 2026 MySite. All rights reserved.</div>
  </footer>
</div>

How it works

• The wrapper is a flex column: d-flex flex-column, with a minimum height of the full screen.
• flex-grow-1 on the main element makes it take all the free space, so the footer is pushed to the bottom.
• On a real page, use min-vh-100 on the wrapper instead of the fixed height used in this small preview:

<body class="d-flex flex-column min-vh-100">
  <header>...</header>
  <main class="flex-grow-1">...</main>
  <footer>...</footer>
</body>

• Previous Code
• Next Code

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.