Web Designer Wall

Snippets Footer

Bootstrap 5 Footer with Newsletter and Links

A four-column footer with company details, link groups, social icons and a newsletter sign-up.

Bootstrap 5 No jQuery Jul 2019 2K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 72rem;">
    <footer class="wdw-card overflow-hidden">
      <div class="wdw-aurora p-4 p-lg-5">
        <div class="row g-4 align-items-center">
          <div class="col-lg-6">
            <h2 class="fw-bold display-6 mb-2">Ship thoughtful products, faster.</h2>
            <p class="mb-0 opacity-75 fs-5">One short email a month. No spam, unsubscribe anytime.</p>
          </div>
          <div class="col-lg-6">
            <form id="footerNews" novalidate>
              <label for="footerEmail" class="visually-hidden">Email address</label>
              <div class="input-group wdw-pill-group rounded-pill">
                <input type="email" class="form-control" id="footerEmail" placeholder="[email protected]" autocomplete="email" required>
                <button type="submit" class="btn btn-primary rounded-pill px-4">Subscribe</button>
              </div>
              <p class="small mt-2 mb-0 ps-3" id="footerNewsMsg" role="status" aria-live="polite"></p>
            </form>
          </div>
        </div>
      </div>
      <div class="p-4 p-lg-5">
        <div class="row g-4 g-lg-5">
          <div class="col-lg-4">
            <a href="#" class="d-inline-flex align-items-center gap-2 text-body-emphasis text-decoration-none fw-bold fs-4 mb-3">
              <span class="wdw-icon" style="width:2.5rem;height:2.5rem;border-radius:.8rem;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 8 4.5v9L12 21l-8-4.5v-9z"/></svg></span>Northwind
            </a>
            <p class="wdw-muted mb-3">7637 Laurel Dr.<br>King of Prussia, PA 19406</p>
            <p class="wdw-muted mb-4">Tools and templates for teams that ship thoughtful products.</p>
            <div class="d-flex gap-2">
              <a href="#" class="wdw-social" aria-label="LinkedIn"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg></a>
              <a href="#" class="wdw-social" aria-label="GitHub"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg></a>
              <a href="#" class="wdw-social" aria-label="YouTube"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"/><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"/></svg></a>
            </div>
          </div>
          <div class="col-6 col-md-4 col-lg-2">
            <h2 class="h6 fw-bold mb-3">Company</h2>
            <ul class="list-unstyled d-grid gap-2 mb-0"><li><a href="#" class="wdw-flink">About</a></li><li><a href="#" class="wdw-flink">Team</a></li><li><a href="#" class="wdw-flink">Careers</a></li><li><a href="#" class="wdw-flink">Contact</a></li></ul>
          </div>
          <div class="col-6 col-md-4 col-lg-2">
            <h2 class="h6 fw-bold mb-3">Product</h2>
            <ul class="list-unstyled d-grid gap-2 mb-0"><li><a href="#" class="wdw-flink">Templates</a></li><li><a href="#" class="wdw-flink">Components</a></li><li><a href="#" class="wdw-flink">Pricing</a></li><li><a href="#" class="wdw-flink">Changelog</a></li></ul>
          </div>
          <div class="col-6 col-md-4 col-lg-2">
            <h2 class="h6 fw-bold mb-3">Support</h2>
            <ul class="list-unstyled d-grid gap-2 mb-0"><li><a href="#" class="wdw-flink">Help centre</a></li><li><a href="#" class="wdw-flink">Terms</a></li><li><a href="#" class="wdw-flink">Privacy</a></li><li><a href="#" class="wdw-flink">Refunds</a></li></ul>
          </div>
          <div class="col-6 col-lg-2">
            <h2 class="h6 fw-bold mb-3">Resources</h2>
            <ul class="list-unstyled d-grid gap-2 mb-0"><li><a href="#" class="wdw-flink">Docs</a></li><li><a href="#" class="wdw-flink">Blog</a></li><li><a href="#" class="wdw-flink">Community</a></li><li><a href="#" class="wdw-flink">Status</a></li></ul>
          </div>
        </div>
        <hr class="my-4">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 small wdw-muted">
          <span>© 2026 Northwind Inc. All rights reserved.</span>
          <div class="d-flex align-items-center gap-3">
            <span class="badge rounded-pill bg-success-subtle text-success-emphasis"><span class="wdw-dot"></span> All systems normal</span>
            <label for="footerLang" class="visually-hidden">Language</label>
            <select class="form-select form-select-sm rounded-pill w-auto" id="footerLang"><option>English</option><option>Deutsch</option><option>Español</option></select>
          </div>
        </div>
      </div>
    </footer>
  </div>
</section>

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

Related snippets

More footer snippets