Web Designer Wall

Snippets Footer

Bootstrap 5 Mega Footer with Newsletter

A mega footer with a brand block, three link columns, social icons and a newsletter signup on a deep indigo panel.

Bootstrap 5 No jQuery Jul 2019 3.5K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 1120px;">
    <footer class="mega-footer wdw-aurora rounded-5 overflow-hidden">
      <div class="p-4 p-md-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-white text-decoration-none fw-bold fs-5 mb-3">
              <span class="mf-logo" aria-hidden="true">N</span> Northwind
            </a>
            <p class="mf-text mb-4">Everything you need to shop, sell and ship with confidence. Fast delivery, honest prices and a support team that answers.</p>
            <div class="d-flex gap-2"><a href="#" class="soc" aria-label="X"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.8 3h3.1l-6.8 7.7L22 21h-6.2l-4.9-6.3L5.3 21H2.2l7.2-8.3L2 3h6.4l4.4 5.8L17.8 3Zm-1.1 16.2h1.7L7.3 4.7H5.5l11.2 14.5Z"/></svg></a>
<a href="#" class="soc" aria-label="Facebook"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.3-1.5 1.6-1.5h1.7V3.6c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.4-4 4.1v2.3H7.6V13h2.8v8h3.1Z"/></svg></a>
<a href="#" class="soc" aria-label="LinkedIn"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5.4 8.6H2.3V21h3.1V8.6ZM3.9 3.2a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6ZM21.7 13.9c0-3.3-1.8-4.9-4.1-4.9-1.9 0-2.700 1-3.200 1.800V8.600h-3.100c0 .8 0 12.400 0 12.400h3.100v-6.900c0-.4 0-.7.100-1 .3-.7.900-1.400 2-1.400 1.400 0 1.900 1 1.900 2.600V21h3.300v-7.100Z"/></svg></a>
<a href="#" class="soc" aria-label="YouTube"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21.6 7.2a2.500 2.500 0 0 0-1.800-1.800C18.200 5 12 5 12 5s-6.200 0-7.800.4A2.500 2.500 0 0 0 2.400 7.200C2 8.800 2 12 2 12s0 3.200.4 4.800a2.500 2.500 0 0 0 1.800 1.800C5.800 19 12 19 12 19s6.200 0 7.800-.4a2.500 2.500 0 0 0 1.800-1.800c.4-1.600.4-4.800.4-4.800s0-3.200-.4-4.800ZM10 15V9l5.200 3L10 15Z"/></svg></a></div>
          </div>
          <div class="col-6 col-md-4 col-lg-2">
            <h2 class="mf-title">Help center</h2>
            <ul class="list-unstyled d-grid gap-2 mb-0">
              <li><a href="#">How to pay</a></li><li><a href="#">FAQs</a></li><li><a href="#">Sitemap</a></li><li><a href="#">Delivery info</a></li>
            </ul>
          </div>
          <div class="col-6 col-md-4 col-lg-2">
            <h2 class="mf-title">Company</h2>
            <ul class="list-unstyled d-grid gap-2 mb-0">
              <li><a href="#">About us</a></li><li><a href="#">Sell your items</a></li><li><a href="#">Contact us</a></li><li><a href="#">RSS</a></li>
            </ul>
          </div>
          <div class="col-md-4 col-lg-4">
            <h2 class="mf-title">Security & privacy</h2>
            <ul class="list-unstyled d-grid gap-2 mb-4">
              <li><a href="#">Terms of use</a></li><li><a href="#">Privacy policy</a></li><li><a href="#">Cookie settings</a></li>
            </ul>
          </div>
        </div>
        <form class="mf-news d-flex flex-column flex-sm-row gap-2 mt-4 p-2 rounded-4" id="mf-form" novalidate>
          <label for="mf-email" class="visually-hidden">Email address</label>
          <input type="email" id="mf-email" class="form-control border-0 bg-transparent text-white" placeholder="Your email for weekly deals" required>
          <button type="submit" class="btn btn-light rounded-pill px-4 text-nowrap" id="mf-btn">Subscribe</button>
        </form>
      </div>
      <div class="mf-bar px-4 px-md-5 py-3 d-flex flex-column flex-sm-row justify-content-between gap-2 small">
        <span>© 2026 Northwind Inc. All rights reserved.</span>
        <span>Made for shoppers everywhere</span>
      </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