How to Fix a Footer on the Bottom in Bootstrap Without It Disappearing When Scrolling

Use Bootstrap's flexbox utilities (d-flex, flex-column, min-vh-100) on the page wrapper, apply flex-fill to the main content area, and mt-auto to the footer to push it to the bottom without using fixed positioning that causes the disappearing effect.

When building responsive layouts with the twbs/bootstrap framework, developers often encounter the "disappearing footer" problem—where the footer either floats in the middle of the viewport on short pages or appears to vanish when users scroll past fixed-positioned elements. The robust solution implements a sticky footer pattern using CSS flexbox via Bootstrap's utility classes, ensuring the footer stays at the bottom of the viewport when content is short and moves naturally with the document when content is long.

Why Fixed Positioning Causes Footers to Disappear

The fixed-bottom class (which applies position: fixed) removes the footer from the normal document flow and pins it to the viewport bottom. While this keeps the footer visible on short pages, it creates two critical issues:

1. Content Overlap: Fixed elements overlay page content, potentially hiding important text or interactive elements behind the footer.
2. The "Disappearing" Illusion: On long pages, when users scroll down, the fixed footer remains at the viewport bottom while the content scrolls behind it. If the footer has a background color matching the page, it can appear to "disappear" or detach from the content flow, creating a jarring user experience.

Technique	Behavior	Best Use Case
fixed-bottom	Removes element from flow; pins to viewport bottom regardless of scroll position	Persistent UI elements like navigation bars, not site footers
Flexbox with mt-auto	Keeps element in document flow; pushes footer to bottom of wrapper using auto margins	Site footers that must stay at bottom on short pages but scroll naturally on long pages

The Bootstrap Sticky Footer Solution Using Flexbox

The most reliable approach leverages Bootstrap's flexbox utilities to create a column layout where the main content expands to fill available vertical space, forcing the footer to the bottom. This technique is implemented in the official Bootstrap examples at docs/examples/sticky-footer/sticky-footer.html.

Step 1: Set Up the Flex Container

Apply flexbox utilities to the page wrapper (typically the <body> element) to establish a vertical flex container that spans at least the full viewport height:

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

• d-flex → Enables display: flex
• flex-column → Sets flex-direction: column to stack children vertically
• min-vh-100 → Ensures the wrapper is at least 100vh (full viewport height), preventing the footer from floating upward on short pages

Step 2: Expand the Main Content Area

Wrap your page content in a <main> element (or any container) and apply the flex-fill utility to make it grow and occupy all remaining vertical space:

<main class="flex-fill">
  <div class="container py-5">
    <!-- Your page content here -->
    <h1>Page Title</h1>
    <p>Content that expands to push the footer down...</p>
  </div>
</main>

• flex-fill → Applies flex: 1 1 auto, allowing the element to grow and shrink as needed while filling available space

Step 3: Push the Footer to the Bottom

Add the footer element with the mt-auto utility, which applies margin-top: auto and forces the footer to the bottom of the flex container:

<footer class="mt-auto py-3 bg-light">
  <div class="container text-center">
    <span class="text-muted">© 2026 Your Company</span>
  </div>
</footer>

• mt-auto → Pushes the footer to the bottom by consuming all available margin space above it
• py-3 → Adds vertical padding for visual breathing room
• bg-light → Provides a subtle background color to distinguish the footer from content

Using Bootstrap's Built-In Sticky Footer SCSS Helper

For projects using Bootstrap's source SCSS, the framework provides a dedicated helper file at scss/_sticky-footer.scss that encapsulates the flexbox pattern into reusable classes. This approach keeps your HTML markup cleaner while maintaining the same robust behavior.

Import the sticky footer styles in your custom SCSS:

@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/bootstrap/scss/sticky-footer";

Then apply the .sticky-footer class to your page wrapper and .footer to the footer element:

<body class="sticky-footer">
  <header class="bg-primary text-white p-3">
    <div class="container">Site Header</div>
  </header>

  <main class="container py-5">
    <!-- Page content -->
  </main>

  <footer class="footer bg-light py-3">
    <div class="container text-center">
      © 2026 Example Corp
    </div>
  </footer>
</body>

According to the source code in scss/_sticky-footer.scss, this helper applies display: flex; flex-direction: column; min-height: 100vh; to the wrapper and margin-top: auto; to the footer, mirroring the utility-class approach but with semantic class names.

Edge Cases and Troubleshooting

Situation	Solution
Footer must remain visible during scroll (e.g., legal notices)	Use fixed-bottom but add compensating padding to the <main> element (e.g., pb-5) to prevent content from being hidden behind the footer.
Multiple footer sections (e.g., navigation + copyright)	Wrap sections in a single container and apply mt-auto to the outer wrapper, or apply mt-auto to the first footer section if they are separate siblings.
Dynamic content loading (e.g., infinite scroll or AJAX)	The flexbox layout automatically recalculates dimensions when content changes; no JavaScript adjustments are required.
Legacy browser support	Bootstrap's scss/_sticky-footer.scss includes fallbacks using vh units and negative margins for browsers with limited flexbox support.

Summary

• Avoid fixed-bottom for site footers because it removes the element from document flow, causing content overlap and the illusion that the footer disappears when scrolling.
• Use the flexbox pattern by applying d-flex flex-column min-vh-100 to the page wrapper, flex-fill to the main content, and mt-auto to the footer. This keeps the footer at the bottom on short pages and allows it to scroll naturally on long pages.
• Leverage Bootstrap's SCSS helper at scss/_sticky-footer.scss if you prefer semantic class names (.sticky-footer and .footer) over utility classes.
• Reference the official example at docs/examples/sticky-footer/sticky-footer.html for a complete implementation reference.

Frequently Asked Questions

Why does my footer disappear when I scroll?

The "disappearing" effect typically occurs when using position: fixed (via Bootstrap's fixed-bottom class) on a footer. Fixed positioning removes the element from the normal document flow and pins it to the viewport. When users scroll down long content, the fixed footer remains at the bottom of the screen while the page content moves behind it, creating the illusion that the footer has detached or disappeared from the page structure. Use the flexbox sticky footer pattern instead to keep the footer in the document flow.

What is the difference between a sticky footer and a fixed footer?

A fixed footer uses position: fixed (Bootstrap's fixed-bottom class) to pin the element to the viewport bottom regardless of scroll position. It always stays visible but overlays content and is removed from document flow. A sticky footer (implemented via flexbox with mt-auto) remains in the normal document flow, sits at the bottom of the content on long pages, and sticks to the viewport bottom only when the content is shorter than the screen height. The sticky approach prevents content overlap and scrolling artifacts.

How do I make the footer stay at the bottom on short pages?

Apply Bootstrap's flexbox utilities to create a column layout that forces the footer downward. Add d-flex flex-column min-vh-100 to the <body> or wrapper element, flex-fill to your main content container, and mt-auto to the <footer> element. The min-vh-100 ensures the wrapper is at least viewport height, while flex-fill makes the content area expand to fill available space, pushing the footer to the bottom. This technique works in scss/_sticky-footer.scss and the official example at docs/examples/sticky-footer/sticky-footer.html.

Can I use this technique with Bootstrap 4?

Yes, the flexbox sticky footer technique works with Bootstrap 4, 5, and future versions because it relies on standard CSS flexbox properties exposed through Bootstrap's utility classes. In Bootstrap 4, use d-flex, flex-column, min-vh-100 (available in 4.4+), flex-fill (or flex-grow-1), and mt-auto exactly as shown in the Bootstrap 5 examples. The underlying CSS in scss/_sticky-footer.scss uses the same flexbox principles across versions, ensuring consistent behavior for keeping the footer fixed at the bottom without disappearing during scroll.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}