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
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.
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
Bootstrap 5 Components
Bootstrap Login Forms, Bootstrap 5 Snippets, Bootstrap Cards, Bootstrap Carousels, Bootstrap Heroes, Bootstrap Footers
<!-- 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">
© 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">♥</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">
Bootstrap 5 Footer Snippets
Browse our stunning pack of Bootstrap Footer snippets and templates. These footer components are elementary to use for your website or blog.
- 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
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