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

> Fix your Bootstrap footer to the bottom of the page without it disappearing on scroll. Learn to use flexbox utilities for a seamless layout.

- Repository: [Bootstrap/bootstrap](https://github.com/twbs/bootstrap)
- Tags: how-to-guide
- Published: 2026-02-16

---

**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`](https://github.com/twbs/bootstrap/blob/main/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:

```html
<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:

```html
<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:

```html
<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`](https://github.com/twbs/bootstrap/blob/main/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:

```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:

```html
<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`](https://github.com/twbs/bootstrap/blob/main/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`](https://github.com/twbs/bootstrap/blob/main/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`](https://github.com/twbs/bootstrap/blob/main/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`](https://github.com/twbs/bootstrap/blob/main/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`](https://github.com/twbs/bootstrap/blob/main/scss/_sticky-footer.scss) and the official example at [`docs/examples/sticky-footer/sticky-footer.html`](https://github.com/twbs/bootstrap/blob/main/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`](https://github.com/twbs/bootstrap/blob/main/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.