Modern Bootstrap Footer with Links
<!-- Footer 8 - Bootstrap Brain Component -->
<footer>
<!-- Logo - Bootstrap Brain Component -->
<div class="py-3 py-md-4 py-xl-5 border-bottom">
<div class="container">
<div class="row gy-3 gy-sm-0 align-items-sm-center">
<div class="col-12 col-sm-6">
<div class="footer-logo-wrapper">
<a href="#!">
<img src="./assets/img/bsb-logo.svg" alt="BootstrapBrain Logo" width="175" height="57">
</a>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="social-media-wrapper">
<ul class="m-0 list-unstyled d-flex justify-content-sm-end gap-3">
<li>
<a href="#!" class="link-opacity-50-hover link-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z" />
</svg>
</a>
</li>
<li>
<a href="#!" class="link-opacity-50-hover link-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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="link-opacity-50-hover link-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334q.002-.211-.006-.422A6.7 6.7 0 0 0 16 3.542a6.7 6.7 0 0 1-1.889.518 3.3 3.3 0 0 0 1.447-1.817 6.5 6.5 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.32 9.32 0 0 1-6.767-3.429 3.29 3.29 0 0 0 1.018 4.382A3.3 3.3 0 0 1 .64 6.575v.045a3.29 3.29 0 0 0 2.632 3.218 3.2 3.2 0 0 1-.865.115 3 3 0 0 1-.614-.057 3.28 3.28 0 0 0 3.067 2.277A6.6 6.6 0 0 1 .78 13.58a6 6 0 0 1-.78-.045A9.34 9.34 0 0 0 5.026 15" />
</svg>
</a>
</li>
<li>
<a href="#!" class="link-opacity-50-hover link-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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>
<li>
<a href="#!" class="link-opacity-50-hover link-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Widgets - Bootstrap Brain Component -->
<section class="py-4 py-md-5 py-xl-6">
<div class="container">
<div class="row gy-3">
<div class="col-6 col-md-3">
<div class="link-wrapper mb-3 mb-md-4 mb-xl-5">
<h4 class="mb-2 fw-bold fs-6">Product</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-secondary">
AI
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Docs
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Wikis
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Projects
</a>
</li>
<li>
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
What's New
</a>
</li>
</ul>
</div>
<div class="link-wrapper">
<h4 class="mb-2 fw-bold fs-6">Solutions</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-secondary">
Enterprise
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Startups
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Education
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Nonprofits
</a>
</li>
<li>
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Managers
</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-md-3">
<div class="link-wrapper mb-3 mb-md-4 mb-xl-5">
<h4 class="mb-2 fw-bold fs-6">Download</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-secondary">
iOS & Android
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Mac & Windows
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Calendar
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Web Clipper
</a>
</li>
<li>
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
What's New
</a>
</li>
</ul>
</div>
<div class="link-wrapper">
<h4 class="mb-2 fw-bold fs-6">Build</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-secondary">
Integrations
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Templates
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
API Docs
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Guides & Tutorials
</a>
</li>
<li>
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Hire a Consultant
</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-md-3">
<div class="link-wrapper mb-3 mb-md-4 mb-xl-5">
<h4 class="mb-2 fw-bold fs-6">Get started</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-secondary">
Miro
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Sketch
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Framer
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Adobe XD
</a>
</li>
<li>
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Invision Studio
</a>
</li>
</ul>
</div>
<div class="link-wrapper">
<h4 class="mb-2 fw-bold fs-6">Resources</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-secondary">
Pricing
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
About Us
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Careers
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Media kit
</a>
</li>
<li>
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Email Us
</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-md-3">
<div class="link-wrapper mb-3 mb-md-4 mb-xl-5">
<h4 class="mb-2 fw-bold fs-6">Learn</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-secondary">
Customer Stories
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Help Center
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Webinars
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Blog
</a>
</li>
<li>
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Community
</a>
</li>
</ul>
</div>
<div class="link-wrapper">
<h4 class="mb-2 fw-bold fs-6">Explore</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-secondary">
Blog
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Best practice
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Color wheel
</a>
</li>
<li class="mb-1">
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Support
</a>
</li>
<li>
<a href="#!" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Developers
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Copyright - Bootstrap Brain Component -->
<div class="py-3 py-md-4 py-xl-5 border-top">
<div class="container">
<div class="row">
<div class="col-12">
<div class="copyright-wrapper mb-1 fs-7 text-md-center">
© 2024. All Rights Reserved.
</div>
<div class="credit-wrapper text-secondary fs-8 text-md-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/font-size/font-size.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/utilities/padding/padding.css">
The Free Modern Bootstrap Footer with Links is a contemporary user interface component designed to elevate the appearance and usability of websites built with the Bootstrap framework. This footer template features a sleek and minimalist design, enhanced with strategically placed links for easy navigation. It offers a clean layout that seamlessly integrates with Bootstrap projects, providing users with a modern and professional footer section. With its compatibility with Bootstrap and intuitive design, incorporating this footer into websites is straightforward, offering an enhanced user experience with convenient access to important links.
