Bootstrap Footer Stick to Bottom

By Posted on

When building a webpage, you might want the footer to always stick to the bottom of the screen—even when the content is short. Luckily, Bootstrap makes this easy using its built-in Flexbox utility classes, available since Bootstrap 4+.

This tutorial walks you through how to create a sticky footer using Bootstrap 5 (but it also works with version 4).

Step 1: Set Up the Body Element

Apply the following Bootstrap classes to your <body> tag or main wrapper: 

<body class="d-flex flex-column min-vh-100">

Explanation of the classes:

  • d-flex: Enables Flexbox layout.
  • flex-column: Arranges child elements vertically (top to bottom).
  • min-vh-100: Ensures the element has a minimum height of 100% of the viewport height.

This setup allows your page layout to stretch vertically across the screen, leaving space at the bottom that can be occupied by the footer.

Step 2: Add mt-auto to the Footer

Add this class to your element: 

<footer class="mt-auto">

Explanation:

  • mt-auto: Stands for margin-top: auto.
  • This pushes the footer to the bottom of the available space, regardless of how much content exists above it.

Step 3: Full HTML Example

Here’s a complete implementation: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sticky Footer Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    html, body {
      height: 100%;
    }
  </style>
</head>
<body class="d-flex flex-column min-vh-100">

  <header class="bg-light p-3 text-center">
    <h1>My Website</h1>
  </header>

  <main class="flex-fill container py-5">
    <p>This is the main content of the page.</p>
  </main>

  <footer class="mt-auto bg-light text-center py-3">
    © 2025 My Website. All rights reserved.
  </footer>

</body>
</html>

The Result:

Bootstrap Footer Stick to Bottom

  • If the page has little content, the footer sticks to the bottom of the screen.
  • If there’s a lot of content, the footer is pushed below the content naturally.

With just two simple steps, you get a clean, responsive layout where the footer stays exactly where it should be—at the bottom. Happy coding!