Web Designer Wall

Snippets Footer

Bootstrap 5 Footer with Social Links and Contact Info

A four-column footer on a brand gradient with logo, social icons, account links, location phone numbers and a help call-to-action.

Bootstrap 5 No jQuery Jul 2019 2.2K views 

<section class="bg-body-tertiary min-vh-100 d-flex flex-column">
  <div class="container py-5 flex-grow-1 d-flex align-items-center">
    <div class="w-100 text-center">
      <span class="wdw-eyebrow mb-2">Page content</span>
      <h1 class="wdw-heading h2 mb-2">Everything you need, in one footer</h1>
      <p class="wdw-muted mb-0">Scroll down to see the footer.</p>
    </div>
  </div>
  <footer class="wdw-aurora ft-footer pt-5 pb-4">
    <div class="container position-relative">
      <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 fw-bold fs-5 text-decoration-none mb-3">
            <span class="ft-logo"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19V6a2 2 0 0 1 2-2h13v15H6a2 2 0 0 0-2 2 2 2 0 0 0 2 2h13"/></svg></span>Lakeside Libraries</a>
          <p class="ft-dim mb-4">Engaging students, faculty and community members in the discovery and creation of knowledge.</p>
          <div class="d-flex gap-2">
            <a href="#" class="ft-soc" aria-label="Twitter"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.2 2h3.3l-7.2 8.3L22.8 22h-6.6l-5.2-6.8L5 22H1.7l7.7-8.8L1.2 2H8l4.7 6.2zm-1.2 18h1.8L7 3.9H5.1z"/></svg></a>
            <a href="#" class="ft-soc" aria-label="Instagram"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><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>
            <a href="#" class="ft-soc" aria-label="LinkedIn"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3zM9.75 9.75h3.8v1.6h.06c.53-1 1.82-1.95 3.75-1.95 4 0 4.74 2.5 4.74 5.8V21h-4v-5.1c0-1.2 0-2.8-1.75-2.8s-2 1.3-2 2.7V21h-4z"/></svg></a>
          </div>
        </div>
        <div class="col-6 col-lg-2">
          <h2 class="ft-h">Your account</h2>
          <ul class="list-unstyled d-grid gap-2 mb-0"><li><a href="#" class="ft-link">Feedback</a></li><li><a href="#" class="ft-link">Catalog links</a></li><li><a href="#" class="ft-link">Suggestion box</a></li><li><a href="#" class="ft-link">Image attribution</a></li></ul>
        </div>
        <div class="col-6 col-lg-3">
          <h2 class="ft-h">Locations</h2>
          <ul class="list-unstyled d-grid gap-2 mb-0 ft-dim"><li><span class="text-white">Bradenton</span><br>941-752-5305</li><li><span class="text-white">Venice</span><br>941-408-1435</li><li><span class="text-white">Lakewood</span><br>941-363-7250</li><li><span class="text-white">Text</span><br>941-270-9643</li></ul>
        </div>
        <div class="col-lg-3">
          <h2 class="ft-h">Need help?</h2>
          <p class="ft-dim">Our librarians answer questions every day.</p>
          <a href="#" class="btn btn-light rounded-pill px-4">Ask a librarian</a>
        </div>
      </div>
      <hr class="border-light opacity-25 my-4">
      <p class="small ft-dim mb-0">© 2026 Lakeside Libraries. All rights reserved.</p>
    </div>
  </footer>
</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