Web Designer Wall

Snippets Footer

Bootstrap 5 Multi-Column Footer with Newsletter and Social Links

A multi-column site footer with grouped link lists, a newsletter signup, social icons and a legal bar that stacks cleanly on small screens.

Bootstrap 5 No jQuery Feb 2020 2.4K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1100px">
    <div class="wdw-aurora rounded-5 p-4 p-md-5 mb-4 d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
      <div class="position-relative"><h1 class="h3 fw-bold mb-1">Ready to build something great?</h1><p class="mb-0 opacity-75">Join 12,000 teams shipping faster with Nowrap.</p></div>
      <a href="#" class="btn btn-light rounded-pill px-4 fw-bold position-relative flex-shrink-0">Get started</a>
    </div>
    <footer class="site-footer rounded-5 overflow-hidden">
      <div class="row g-4 g-lg-5 p-4 p-md-5">
        <nav class="col-6 col-md-3 col-lg-2" aria-label="Company"><h2 class="footer-h">Company</h2><ul class="list-unstyled mb-0 d-grid gap-2"><li><a href="#">About us</a></li><li><a href="#">Services</a></li><li><a href="#">Pricing</a></li><li><a href="#">Customers</a></li><li><a href="#">Careers</a></li></ul></nav>
        <nav class="col-6 col-md-3 col-lg-2" aria-label="Resources"><h2 class="footer-h">Resources</h2><ul class="list-unstyled mb-0 d-grid gap-2"><li><a href="#">Documentation</a></li><li><a href="#">Blog</a></li><li><a href="#">eBooks</a></li><li><a href="#">Webinars</a></li></ul></nav>
        <nav class="col-6 col-md-3 col-lg-2" aria-label="Support"><h2 class="footer-h">Support</h2><ul class="list-unstyled mb-0 d-grid gap-2"><li><a href="#">Help centre</a></li><li><a href="#">Contact sales</a></li><li><a href="#">Status</a></li><li><a href="#">Advertise</a></li></ul></nav>
        <div class="col-12 col-md-3 col-lg-6 col-xl-4 ms-xl-auto">
          <h2 class="footer-h">Stay updated</h2>
          <p class="small footer-muted">One short email a month with new tutorials and product news.</p>
          <form class="d-flex flex-column flex-sm-row gap-2 footer-form" novalidate>
            <label for="ft-email" class="visually-hidden">Email address</label>
            <input type="email" id="ft-email" class="form-control rounded-pill" placeholder="Enter your email" required autocomplete="email">
            <button type="submit" class="btn btn-primary rounded-pill px-4">Subscribe</button>
          </form>
          <p class="small mt-2 mb-0 footer-status" role="status"></p>
        </div>
      </div>
      <div class="footer-bar d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 px-4 px-md-5 py-3">
        <p class="small mb-0 footer-muted">© 2026 Nowrap Inc. All rights reserved.</p>
        <ul class="list-inline mb-0 small d-flex flex-wrap gap-3"><li><a href="#">Terms & Conditions</a></li><li><a href="#">Privacy Policy</a></li><li><a href="#">Cookies</a></li></ul>
        <ul class="list-unstyled mb-0 d-flex gap-2 footer-social">
          <li><a href="#" aria-label="GitHub"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21"/></svg></a></li>
          <li><a href="#" aria-label="LinkedIn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg></a></li>
          <li><a href="#" aria-label="Instagram"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".6" fill="currentColor"/></svg></a></li>
          <li><a href="#" aria-label="YouTube"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M22 8.5a3 3 0 0 0-2-2C18 6 12 6 12 6s-6 0-8 .5a3 3 0 0 0-2 2C1.5 10.4 1.5 12 1.5 12s0 1.600.5 3.500a3 3 0 0 0 2 2C6 18 12 18 12 18s6 0 8-.5a3 3 0 0 0 2-2c.5-1.900.5-3.500.5-3.500s0-1.600-.5-3.500z"/><path d="m10 15 5-3-5-3z"/></svg></a></li>
        </ul>
      </div>
    </footer>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More footer snippets