Bootstrap Footer with Social Media Icons
<!-- 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/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bs-brain@2.0.4/utilities/bsb-btn-circle/bsb-btn-circle.css">
<link rel="stylesheet" href="https://unpkg.com/bs-brain@2.0.4/utilities/bsb-ls/bsb-ls.css">
<link rel="stylesheet" href="https://unpkg.com/bs-brain@2.0.4/utilities/bsb-sep/bsb-sep.css">
<link rel="stylesheet" href="https://unpkg.com/bs-brain@2.0.4/utilities/font-size/font-size.css">
<link rel="stylesheet" href="https://unpkg.com/bs-brain@2.0.4/utilities/padding/padding.css">
The Bootstrap Footer with Social Media Icons is a dynamic and engaging component tailored for Bootstrap-based websites. This footer template integrates seamlessly, featuring prominent icons linked to various social media platforms. It provides users convenient access to connect with the website's social media profiles, fostering engagement and brand visibility. With its clean design and customizable options, this footer enhances the overall aesthetic while maintaining responsiveness across devices. Whether for personal blogs, business websites, or online stores, the Bootstrap Footer with Social Media Icons is an effective tool for driving social interaction and expanding online presence.