Components

Bootstrap 5 Footer Examples: Simple, Columns and Sticky

By the bootstrap.build team · 5 min read · Published

Bootstrap has no footer component. A footer is built from the same pieces as the rest of a page: a container, the grid, flex utilities, and nav links. That makes it flexible, but it also means there is no single snippet in the docs to copy. This guide gives you four complete footers to copy, from a one-line copyright bar to a multi-column footer with a newsletter form, then shows how to keep a footer at the bottom of short pages, and how to style it. Everything is for Bootstrap 5.3.

A copyright line on the left and a few links on the right, stacking on phones:

<footer class="border-top py-4 mt-5">
  <div class="container d-flex flex-column flex-md-row justify-content-between align-items-center gap-3">
    <p class="mb-0 text-body-secondary">&copy; 2026 Brand, Inc.</p>
    <ul class="nav">
      <li class="nav-item"><a href="/privacy/" class="nav-link px-2 text-body-secondary">Privacy</a></li>
      <li class="nav-item"><a href="/terms/" class="nav-link px-2 text-body-secondary">Terms</a></li>
      <li class="nav-item"><a href="/contact/" class="nav-link px-2 text-body-secondary">Contact</a></li>
    </ul>
  </div>
</footer>

flex-column flex-md-row stacks the two parts on phones and puts them side by side from 768px up. justify-content-between pushes them to opposite ends. The flexbox guide explains these classes.

The classic site footer: brand and a short description, then columns of links. The grid stacks the columns on phones, shows two per row on tablets, and puts them all in one row on desktops:

<footer class="bg-body-tertiary border-top pt-5 pb-4 mt-5">
  <div class="container">
    <div class="row g-4">
      <div class="col-12 col-lg-4">
        <a href="/" class="d-inline-block mb-2 fs-5 fw-bold text-body text-decoration-none">Brand</a>
        <p class="text-body-secondary small mb-0">Website tools for small teams. Made in Lisbon.</p>
      </div>
      <div class="col-6 col-lg-2">
        <h2 class="h6 text-uppercase">Product</h2>
        <ul class="list-unstyled small">
          <li class="mb-2"><a href="/features/" class="link-secondary text-decoration-none">Features</a></li>
          <li class="mb-2"><a href="/pricing/" class="link-secondary text-decoration-none">Pricing</a></li>
          <li class="mb-2"><a href="/changelog/" class="link-secondary text-decoration-none">Changelog</a></li>
        </ul>
      </div>
      <div class="col-6 col-lg-2">
        <h2 class="h6 text-uppercase">Company</h2>
        <ul class="list-unstyled small">
          <li class="mb-2"><a href="/about/" class="link-secondary text-decoration-none">About</a></li>
          <li class="mb-2"><a href="/blog/" class="link-secondary text-decoration-none">Blog</a></li>
          <li class="mb-2"><a href="/careers/" class="link-secondary text-decoration-none">Careers</a></li>
        </ul>
      </div>
      <div class="col-6 col-lg-2">
        <h2 class="h6 text-uppercase">Support</h2>
        <ul class="list-unstyled small">
          <li class="mb-2"><a href="/docs/" class="link-secondary text-decoration-none">Docs</a></li>
          <li class="mb-2"><a href="/status/" class="link-secondary text-decoration-none">Status</a></li>
          <li class="mb-2"><a href="/contact/" class="link-secondary text-decoration-none">Contact</a></li>
        </ul>
      </div>
      <div class="col-6 col-lg-2">
        <h2 class="h6 text-uppercase">Legal</h2>
        <ul class="list-unstyled small">
          <li class="mb-2"><a href="/privacy/" class="link-secondary text-decoration-none">Privacy</a></li>
          <li class="mb-2"><a href="/terms/" class="link-secondary text-decoration-none">Terms</a></li>
        </ul>
      </div>
    </div>
    <div class="border-top pt-3 mt-4 small text-body-secondary">&copy; 2026 Brand, Inc.</div>
  </div>
</footer>

The column headings are <h2> elements styled with .h6, so the page keeps a sensible heading order while they look small. g-4 adds space between the columns when they wrap. See the grid guide for how the column classes work.

<footer class="bg-dark py-4 mt-5" data-bs-theme="dark">
  <div class="container d-flex flex-column flex-sm-row justify-content-between align-items-center gap-3">
    <span class="text-body-secondary">&copy; 2026 Brand, Inc.</span>
    <ul class="list-unstyled d-flex gap-3 mb-0 fs-5">
      <li><a class="link-body-emphasis" href="https://github.com/" aria-label="GitHub"><i class="bi bi-github"></i></a></li>
      <li><a class="link-body-emphasis" href="https://www.linkedin.com/" aria-label="LinkedIn"><i class="bi bi-linkedin"></i></a></li>
      <li><a class="link-body-emphasis" href="https://www.youtube.com/" aria-label="YouTube"><i class="bi bi-youtube"></i></a></li>
    </ul>
  </div>
</footer>

data-bs-theme="dark" switches the footer to dark-mode colors, so text-body-secondary and link-body-emphasis turn light without any custom CSS. The icons come from Bootstrap Icons; give each icon link an aria-label, since the icon has no text.

<footer class="border-top py-5 mt-5">
  <div class="container">
    <div class="row g-4 align-items-center">
      <div class="col-md-6">
        <h2 class="h5">Get the monthly update</h2>
        <p class="text-body-secondary mb-0">One email a month. No spam, unsubscribe any time.</p>
      </div>
      <div class="col-md-6">
        <form class="d-flex gap-2" action="/subscribe" method="post">
          <label for="footer-email" class="visually-hidden">Email address</label>
          <input id="footer-email" type="email" name="email" class="form-control" placeholder="you@example.com" required>
          <button class="btn btn-primary" type="submit">Subscribe</button>
        </form>
      </div>
    </div>
  </div>
</footer>

The visually hidden label keeps the field accessible without showing a label on screen.

Keep the footer at the bottom of the page

On a short page, the footer floats up into the middle of the window. A “sticky footer” keeps it at the bottom of the window when the content is short, and below the content when it is long. Make the body a flex column at least as tall as the window, and give the footer mt-auto:

<body class="d-flex flex-column min-vh-100">
  <header>...</header>
  <main class="flex-shrink-0">...</main>
  <footer class="mt-auto py-3 border-top">...</footer>
</body>

mt-auto absorbs all the free space above the footer, which pushes it down. If your content sits in a wrapper rather than directly in <body>, put the same classes on the wrapper instead.

Fixed footer. To keep a footer visible at all times, even while scrolling, use fixed-bottom. It takes the footer out of the page flow, so add bottom padding to the body equal to the footer’s height, or the last lines of content will hide behind it. For most sites, the sticky footer above is the better choice.

Use utilities for most changes: bg-body-tertiary or bg-dark with data-bs-theme="dark" for the background, border-top for a dividing line, py-4 or py-5 for height, and small for smaller text. Footer links usually look best in a muted color without underlines: link-secondary text-decoration-none, or link-body-emphasis for stronger contrast.

For a brand color, set your own background and pick the theme that matches it:

<footer class="py-4" style="background-color: #0f172a;" data-bs-theme="dark">...</footer>

To change the colors these utilities produce across the whole site, customize the theme colors in Sass or in the builder.

FAQ

No. Bootstrap has no .footer class or footer component. You build a footer from a <footer> element, a container, the grid or flex utilities, and nav or list utilities for the links.

Add d-flex flex-column min-vh-100 to the <body> (or your page wrapper) and mt-auto to the <footer>. The footer then sits at the bottom of the window on short pages and below the content on long ones.

Put a .row inside a .container in the footer and give each column responsive classes such as col-6 col-lg-2. The columns stack on phones, sit two per row on tablets, and line up in one row on large screens.

How do I center the text in a Bootstrap footer?

Add text-center to the footer or its container. To center items laid out with flex, use d-flex justify-content-center instead.

fixed-bottom pins the footer to the bottom of the window at all times, covering content as the user scrolls, so the body needs bottom padding. A sticky footer made with flex utilities stays in the page flow: it sits at the bottom of short pages and below the content on long ones.

Try it in the builder

Make these changes visually with a live preview, then export clean Bootstrap Sass or CSS.

Open the Builder