18 Bootstrap Footer Examples to Copy-Paste (2026)

Every Bootstrap project needs a footer, and Bootstrap ships no footer component — which is why “bootstrap footer” stays one of the framework’s most-searched patterns. Here are 18 copy-paste Bootstrap 5 footer examples covering every case that actually comes up — from the basic copyright bar through multi-column, newsletter, dark, sticky, e-commerce, mobile-accordion, and international footers — each with a screenshot, the full code, and the accessibility details most snippets skip. All examples use Bootstrap 5.3 utilities only: no custom CSS required, dark-mode-ready via bg-body-* tokens.

1. Basic centered footer

The one-liner every project starts with: a bg-body-tertiary bar, centered copyright, border-top for separation. The bg-body-* utilities (Bootstrap 5.3+) adapt automatically to dark mode — prefer them over the old bg-light.

<footer class="bg-body-tertiary text-center py-4 mt-auto border-top">
  <div class="container">
    <span class="text-body-secondary">&copy; 2026 Acme Inc. All rights reserved.</span>
  </div>
</footer>

2. Multi-column link footer

The classic marketing-site footer: brand column plus four link groups on the responsive grid, collapsing to two columns on phones (col-6 col-lg-2). The bottom strip separates legal from navigation. Use link-secondary text-decoration-none for quiet links that still meet contrast.

<footer class="bg-body-tertiary border-top mt-auto pt-5 pb-4">
  <div class="container">
    <div class="row g-4">
      <div class="col-lg-4">
        <h5 class="mb-2"><i class="bi bi-box-seam me-2"></i>Acme</h5>
        <p class="text-body-secondary small mb-0">Admin tooling for teams that ship. Since 2014.</p>
      </div>
      <div class="col-6 col-lg-2">
        <h6 class="text-uppercase small fw-bold mb-3">Product</h6>
        <ul class="list-unstyled small">
          <li class="mb-2"><a class="link-secondary text-decoration-none" href="#">Features</a></li>
          <li class="mb-2"><a class="link-secondary text-decoration-none" href="#">Pricing</a></li>
          <li class="mb-2"><a class="link-secondary text-decoration-none" href="#">Changelog</a></li>
        </ul>
      </div>
      <div class="col-6 col-lg-2">
        <h6 class="text-uppercase small fw-bold mb-3">Company</h6>
        <ul class="list-unstyled small">
          <li class="mb-2"><a class="link-secondary text-decoration-none" href="#">About</a></li>
          <li class="mb-2"><a class="link-secondary text-decoration-none" href="#">Blog</a></li>
          <li class="mb-2"><a class="link-secondary text-decoration-none" href="#">Careers</a></li>
        </ul>
      </div>
      <div class="col-6 col-lg-2">
        <h6 class="text-uppercase small fw-bold mb-3">Resources</h6>
        <ul class="list-unstyled small">
          <li class="mb-2"><a class="link-secondary text-decoration-none" href="#">Docs</a></li>
          <li class="mb-2"><a class="link-secondary text-decoration-none" href="#">Support</a></li>
          <li class="mb-2"><a class="link-secondary text-decoration-none" href="#">Status</a></li>
        </ul>
      </div>
      <div class="col-6 col-lg-2">
        <h6 class="text-uppercase small fw-bold mb-3">Legal</h6>
        <ul class="list-unstyled small">
          <li class="mb-2"><a class="link-secondary text-decoration-none" href="#">Privacy</a></li>
          <li class="mb-2"><a class="link-secondary text-decoration-none" href="#">Terms</a></li>
        </ul>
      </div>
    </div>
    <div class="border-top pt-3 mt-4 d-flex justify-content-between small text-body-secondary">
      <span>&copy; 2026 Acme Inc.</span>
      <span>Made with Bootstrap 5</span>
    </div>
  </div>
</footer>

3. Footer with newsletter signup

Email capture belongs where users end up — the footer converts surprisingly well. Note the visually-hidden label (accessibility without visual noise) and flex-shrink-0 on the button so it never squashes on small screens.

<footer class="bg-body-tertiary border-top mt-auto py-5">
  <div class="container">
    <div class="row g-4 align-items-center">
      <div class="col-lg-6">
        <h5 class="mb-1">Stay in the loop</h5>
        <p class="text-body-secondary small mb-0">One email a month. Product updates, no spam.</p>
      </div>
      <div class="col-lg-6">
        <form class="d-flex gap-2" action="#" method="post">
          <label for="footer-email" class="visually-hidden">Email address</label>
          <input type="email" class="form-control" id="footer-email" placeholder="[email protected]" required>
          <button class="btn btn-primary flex-shrink-0" type="submit">Subscribe</button>
        </form>
      </div>
    </div>
    <div class="border-top pt-3 mt-4 d-flex flex-wrap justify-content-between small text-body-secondary">
      <span>&copy; 2026 Acme Inc.</span>
      <div class="d-flex gap-3">
        <a class="link-secondary text-decoration-none" href="#">Privacy</a>
        <a class="link-secondary text-decoration-none" href="#">Terms</a>
      </div>
    </div>
  </div>
</footer>

4. Dark footer with social icons

A dark footer on a light site frames the page bottom. The trick is scoping: data-bs-theme="dark" on the footer element alone re-tints every Bootstrap token inside it — no custom dark CSS. Social icons get aria-labels; icon-only links are invisible to screen readers without them.

<!-- add data-bs-theme="dark" on <footer> (or <html>) -->
<footer class="bg-dark text-light mt-auto py-5" data-bs-theme="dark">
  <div class="container text-center">
    <h5 class="mb-3">Acme</h5>
    <div class="d-flex justify-content-center gap-3 mb-4 fs-4">
      <a class="link-light" href="#" aria-label="X (Twitter)"><i class="bi bi-twitter-x"></i></a>
      <a class="link-light" href="#" aria-label="GitHub"><i class="bi bi-github"></i></a>
      <a class="link-light" href="#" aria-label="LinkedIn"><i class="bi bi-linkedin"></i></a>
      <a class="link-light" href="#" aria-label="YouTube"><i class="bi bi-youtube"></i></a>
    </div>
    <ul class="list-inline small mb-3">
      <li class="list-inline-item"><a class="link-secondary text-decoration-none" href="#">Features</a></li>
      <li class="list-inline-item mx-3"><a class="link-secondary text-decoration-none" href="#">Pricing</a></li>
      <li class="list-inline-item"><a class="link-secondary text-decoration-none" href="#">Docs</a></li>
      <li class="list-inline-item mx-3"><a class="link-secondary text-decoration-none" href="#">Contact</a></li>
    </ul>
    <span class="text-body-secondary small">&copy; 2026 Acme Inc.</span>
  </div>
</footer>

5. Sticky footer (always at the bottom)

The most-asked footer question: keeping it at the bottom on short pages. Forget absolute positioning — the flexbox pattern is three classes: d-flex flex-column min-vh-100 on body, flex-grow-1 on main (or mt-auto on the footer). Works with any footer design on this page.

<!-- The flexbox pattern: body gets the classes, footer gets mt-auto -->
<body class="d-flex flex-column min-vh-100">

  <main class="flex-grow-1">
    <!-- page content -->
  </main>

  <footer class="bg-body-tertiary border-top py-3 mt-auto">
    <div class="container d-flex justify-content-between small text-body-secondary">
      <span>&copy; 2026 Acme Inc.</span>
      <span>v4.2.0</span>
    </div>
  </footer>

</body>

6. Admin dashboard footer (AdminLTE-style)

Dashboards need a quieter footer: a slim strip with copyright and app version, container-fluid to match the admin canvas. This mirrors AdminLTE’s own app-footer — in the official React/Angular libraries it’s the footer slot of the dashboard layout component.

<footer class="border-top bg-body py-2 mt-auto">
  <div class="container-fluid d-flex flex-wrap justify-content-between align-items-center small">
    <span class="text-body-secondary">
      <strong>&copy; 2026 <a href="#" class="text-decoration-none">Acme Admin</a>.</strong> All rights reserved.
    </span>
    <span class="text-body-secondary d-none d-sm-inline"><b>Version</b> 4.2.0</span>
  </div>
</footer>

7. Footer with CTA band

The conversion pattern: a primary-colored call-to-action band riding above the legal strip. Because the CTA band is just a bg-primary section inside