Web Designer Wall

Snippets Footer

Bootstrap 5 Footer with Newsletter and Social Links

A four-column site footer with brand blurb and contact details, two link lists, a newsletter signup, a bottom navigation row and social icons. Built with Bootstrap 5 grid utilities and inline SVG icons on a fixed dark surface.

Bootstrap 5 No jQuery Jul 2019 3.7K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1140px">
    <footer class="ft rounded-5 p-4 p-md-5" data-bs-theme="dark" aria-label="Site footer">
      <div class="row g-4 g-lg-5">
        <div class="col-md-6 col-lg-4">
          <a href="#" class="d-inline-flex align-items-center gap-2 text-white fw-bold fs-5 ft-brand mb-3"><span class="wdw-icon" style="width:2.25rem;height:2.25rem;border-radius:.65rem"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 8 4.5v9L12 21l-8-4.5v-9Z"/><path d="M12 12 4 7.5M12 12l8-4.5M12 12v9"/></svg></span>Pixelworks</a>
          <p class="ft-muted small mb-4">Image editing and retouching for e-commerce teams, studios and photographers. Fast turnaround, consistent results.</p>
          <ul class="list-unstyled small d-grid gap-2 mb-0">
            <li class="d-flex gap-2 align-items-start"><span class="text-primary mt-1"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg></span>9878/25 Sector 9, Rohini, New Delhi</li>
            <li class="d-flex gap-2 align-items-center"><span class="text-primary"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"/></svg></span><a href="tel:+919999878398" class="ft-link">+91 99998 78398</a></li>
            <li class="d-flex gap-2 align-items-center"><span class="text-primary"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><a href="mailto:[email protected]" class="ft-link">[email protected]</a></li>
          </ul>
        </div>
        <nav class="col-6 col-lg-2" aria-label="Services">
          <h2 class="ft-title">Services</h2>
          <ul class="list-unstyled d-grid gap-2 small mb-0">
            <li><a href="#" class="ft-link">Image rectouring</a></li><li><a href="#" class="ft-link">Clipping path</a></li><li><a href="#" class="ft-link">Ghost mannequin</a></li><li><a href="#" class="ft-link">Amazon & eBay listings</a></li><li><a href="#" class="ft-link">Hair masking</a></li>
          </ul>
        </nav>
        <nav class="col-6 col-lg-2" aria-label="Resources">
          <h2 class="ft-title">Resources</h2>
          <ul class="list-unstyled d-grid gap-2 small mb-0">
            <li><a href="#" class="ft-link">Background removal</a></li><li><a href="#" class="ft-link">Shadows & reflection</a></li><li><a href="#" class="ft-link">Logo design</a></li><li><a href="#" class="ft-link">Vectorisation</a></li><li><a href="#" class="ft-link">Image cropping</a></li>
          </ul>
        </nav>
        <div class="col-lg-4">
          <h2 class="ft-title">Stay in the loop</h2>
          <p class="ft-muted small">Monthly tips on product photography and editing workflows. No spam.</p>
          <form class="ft-news d-flex gap-2" novalidate>
            <label for="ft-email" class="visually-hidden">Email address</label>
            <input type="email" id="ft-email" class="form-control rounded-pill px-3" placeholder="[email protected]" required>
            <button class="btn btn-primary rounded-pill px-4" type="submit">Join</button>
          </form>
          <p class="small mt-2 mb-0 d-none text-success" id="ft-msg" role="status">Thanks, you are on the list.</p>
        </div>
      </div>
      <hr class="my-4 ft-rule">
      <div class="d-flex flex-column flex-md-row justify-content-between align-items-center gap-3">
        <p class="small ft-muted mb-0">© 2026 Pixelworks. All rights reserved.</p>
        <ul class="list-unstyled d-flex flex-wrap justify-content-center gap-3 small mb-0">
          <li><a href="#" class="ft-link">Home</a></li><li><a href="#" class="ft-link">About</a></li><li><a href="#" class="ft-link">Pricing</a></li><li><a href="#" class="ft-link">Blog</a></li><li><a href="#" class="ft-link">Contact</a></li>
        </ul>
        <div class="d-flex gap-2">
          <a href="#" class="ft-social" aria-label="Facebook"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3Z"/></svg></a>
          <a href="#" class="ft-social" aria-label="X"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4l16 16M20 4 4 20"/></svg></a>
          <a href="#" class="ft-social" aria-label="LinkedIn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" 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-4 0v7h-4v-7a6 6 0 0 1 6-6ZM2 9h4v12H2zM4 4a2 2 0 1 0 0 .01"/></svg></a>
          <a href="#" class="ft-social" aria-label="Instagram"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><path d="M17.5 6.5h.01"/></svg></a>
        </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