Bootstrap Footer with Social Media Icons

In the digital era, social media is essential for connecting with audiences, sharing content, and building brand identity. Adding social media icons to your website’s footer effectively encourages visitors to engage with your brand across various platforms.

Bootstrap 5 Component Update

We have updated this Bootstrap component to Bootstrap 5.3.3 and BSB Framework 2.0.4. We have rechecked this Bootstrap snippet on May 3, 2024.

Best Ready to Use Web Themes & Templates

Download Now

Bootstrap Footer with Social Media Icons

The Free Bootstrap Footer with Social Media Icons is a versatile template designed to enhance user engagement by seamlessly integrating social media links into your website’s footer. Built on the popular Bootstrap framework, this free resource offers a simple yet effective solution for improving navigation and encouraging social media interaction.

PreviewGet Code
More SnippetsJoin BS Brain

Bootstrap 5 Templates

Bootstrap One Page Templates, Bootstrap 5 Templates, Free Bootstrap Templates

Social Media Icons

The footer template comes pre-packaged with recognizable icons representing popular social media platforms such as Facebook, Twitter, Instagram, and LinkedIn. These icons serve as visual cues, making it easy for users to identify and connect with you on social media.

Customizability

While the template provides predefined social media icons, it also offers flexibility for customization. You can easily adjust the icons’ size, color, and placement to match your website’s design aesthetic and branding.

Features

  • Bootstrap 5
  • BSB Framework
  • Business Links
  • Legal Links
  • Social Media Icons
  • HTML5 & CSS3
  • W3C Valid
  • Clean Snippet
  • Commented Code
  • Responsive Layout
  • Easy to Use
  • SEO Optimized
  • Cross Browser Compatible

Tags

, , , , , , , , , , , ,

Bootstrap 5 Components

Bootstrap Login Forms, Bootstrap 5 Snippets, Bootstrap Cards, Bootstrap Carousels, Bootstrap Heroes, Bootstrap Footers

Preview

Preview
<!-- Footer 13 - Bootstrap Brain Component -->
<footer class="py-3 py-md-5 py-xl-6">

  <!-- Logo - Bootstrap Brain Component -->
  <div>
    <div class="container">
      <div class="row gy-3">
        <div class="col-12">
          <div class="footer-logo-wrapper">
            <a href="#!">
              <img src="./assets/img/bsb-logo.svg" alt="BootstrapBrain Logo" width="141" height="46">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Widgets - Bootstrap Brain Component -->
  <section class="py-4 pb-md-6 pb-xl-7 pb-xxl-10">
    <div class="container">
      <div class="row gy-3">
        <div class="col-6 col-md-3">
          <div class="link-wrapper">
            <h4 class="mb-2 fs-10 fw-light text-secondary text-uppercase bsb-ls-1">Company</h4>
            <ul class="m-0 list-unstyled">
              <li class="mb-1">
                <a href="#!" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-dark fw-medium">
                  About Us
                </a>
              </li>
              <li class="mb-1">
                <a href="#!" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-dark fw-medium">
                  Our Team
                </a>
              </li>
              <li class="mb-1">
                <a href="#!" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-dark fw-medium">
                  Mission & Values
                </a>
              </li>
              <li class="mb-1">
                <a href="#!" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-dark fw-medium">
                  Company Culture
                </a>
              </li>
              <li class="mb-1">
                <a href="#!" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-dark fw-medium">
                  Contact Us
                </a>
              </li>
              <li class="mb-1">
                <a href="#!" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-dark fw-medium">
                  Careers
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-6 col-md-3">
          <div class="link-wrapper">
            <h4 class="mb-2 fs-10 fw-light text-secondary text-uppercase bsb-ls-1">Products</h4>
            <ul class="m-0 list-unstyled">
              <li class="mb-1">
                <a href="#!" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-dark fw-medium">
                  Product Catalog
                </a>
              </li>
              <li class="mb-1">
                <a href="#!" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-dark fw-medium">
                  New Arrivals
                </a>
              </li>
              <li class="mb-1">
                <a href="#!" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-dark fw-medium">
                  Best Sellers
                </a>
              </li>
              <li class="mb-1">
                <a href="#!" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-dark fw-medium">
                  Product Reviews
                </a>
              </li>
              <li class="mb-1">
                <a href="#!" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-dark fw-medium">
                  Request a Demo
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-6 col-md-3">
          <div class="link-wrapper">
            <h4 class="mb-2 fs-10 fw-light text-secondary text-uppercase bsb-ls-1">Information</h4>
            <ul class="m-0 list-unstyled">
              <li class="mb-1">
                <a href="#!" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-dark fw-medium">
                  Blog
                </a>
              </li>
              <li class="mb-1">
                <a href="#!" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-dark fw-medium">
                  Resources
                </a>
              </li>
              <li class="mb-1">
                <a href="#!" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-dark fw-medium">
                  Whitepapers
                </a>
              </li>
              <li class="mb-1">
                <a href="#!" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-dark fw-medium">
                  Infographics
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-6 col-md-3">
          <div class="link-wrapper">
            <h4 class="mb-2 fs-10 fw-light text-secondary text-uppercase bsb-ls-1">Support</h4>
            <ul class="m-0 list-unstyled">
              <li class="mb-1">
                <a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1 link-dark fw-medium">
                  Feedback
                </a>
              </li>
              <li class="mb-1">
                <a href="#!" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-dark fw-medium">
                  Help Desk
                </a>
              </li>
              <li>
                <a href="#!" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-dark fw-medium">
                  Live Chat
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!--  Links & SM - Bootstrap Brain Component -->
  <div class="pb-3">
    <div class="container">
      <div class="row gy-2">
        <div class="col-12 col-sm-9">
          <div class="link-wrapper">
            <ul class="m-0 list-unstyled d-flex justify-content-start gap-2 gap-md-3">
              <li>
                <a href="#!" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center pe-2 pe-md-3 bsb-sep bsb-sep-border">
                  Privacy
                </a>
              </li>
              <li>
                <a href="#!" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center pe-2 pe-md-3 bsb-sep bsb-sep-border">
                  Terms
                </a>
              </li>
              <li>
                <a href="#!" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center pe-2 pe-md-3 bsb-sep bsb-sep-border">
                  Disclaimer
                </a>
              </li>
              <li>
                <a href="#!" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center">
                  Compliance
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-sm-3">
          <div class="social-wrapper">
            <ul class="m-0 list-unstyled d-flex justify-content-start justify-content-sm-end gap-2">
              <li>
                <a href="#!" class="btn btn-dark bsb-btn-circle bsb-btn-circle-xs link-opacity-75-hover link-light">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
                    <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
                  </svg>
                </a>
              </li>
              <li>
                <a href="#!" class="btn btn-dark bsb-btn-circle bsb-btn-circle-xs link-opacity-75-hover link-light">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
                    <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" />
                  </svg>
                </a>
              </li>
              <li>
                <a href="#!" class="btn btn-dark bsb-btn-circle bsb-btn-circle-xs link-opacity-75-hover link-light">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
                    <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
                  </svg>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Copyright - Bootstrap Brain Component -->
  <div>
    <div class="container border-top border-light-subtle pt-3">
      <div class="row">
        <div class="col-12">
          <div class="copyright-wrapper d-block mb-1 text-start text-sm-center fs-8">
            &copy; 2024. All Rights Reserved.
          </div>
          <div class="credit-wrapper d-block text-secondary fs-9 text-start text-sm-center">
            Built by<a href="https://bootstrapbrain.com/" class="link-secondary text-decoration-none">
              BootstrapBrain</a> with <span class="text-primary">&#9829;</span>
          </div>
        </div>
      </div>
    </div>
  </div>

</footer>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/utilities/bsb-btn-circle/bsb-btn-circle.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/utilities/bsb-ls/bsb-ls.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/utilities/bsb-sep/bsb-sep.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/utilities/font-size/font-size.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/utilities/padding/padding.css">
  • Use in personal projects
  • Customize the template files
  • Number of websites/domains
  • Create websites for clients
  • Remove footer credit link
  • Working PHP/AJAX contact form
  • Sass/SCSS Files
  • JS Source Files
  • Premium support via Email
  • Forum support
  • Free Updates
  • Access to all 8 Pro Templates
  • Access to all 51 Pro Components
  • Use in SaaS
  • Resell & Redistribute

BB Startup

Freelancer

$49

3 Months Access

8 Pro BS Templates

51 Pro BS Components

  • Use in personal projects
  • Customize the template files
  • Unlimited Number of websites/domains
  • Create websites for clients
  • Remove footer credit link
  • Working PHP/AJAX contact form
  • Sass/SCSS Files
  • JS Source Files
  • Premium support via Email
  • Forum support
  • 3 Months Free Updates
  • Access to all our 8 Pro Templates
  • Access to all our 51 Pro Components
  • Use in SaaS
  • Resell & Redistribute
Buy Now

BB Club

Agency

$149

12 Months Access

8 Pro BS Templates

51 Pro BS Components

  • Use in personal projects
  • Customize the template files
  • Unlimited Number of websites/domains
  • Create websites for clients
  • Remove footer credit link
  • Working PHP/AJAX contact form
  • Sass/SCSS Files
  • JS Source Files
  • Premium support via Email
  • Forum support
  • 12 Months Free Updates
  • Access to all our 8 Pro Templates
  • Access to all our 51 Pro Components
  • Use in SaaS
  • Resell & Redistribute
Buy Now