Introduction
Bootstrap 5 Footer Example is a simple yet essential component for almost every website. A footer usually includes navigation links, copyright text, and social icons. In this snippet, you’ll learn how to build a clean, responsive footer using Bootstrap 5 classes.
Bootstrap 5 Footer Example Code
<footer class="bg-light text-center text-lg-start">
<div class="container p-4">
<div class="row">
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">QuickDevTips</h5>
<p>Short, practical coding snippets and tips for developers. Copy > Paste > Done.</p>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled mb-0">
<li><a href="#!" class="text-dark">Home</a></li>
<li><a href="#!" class="text-dark">Snippets</a></li>
<li><a href="#!" class="text-dark">Examples</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Follow Us</h5>
<a href="#" class="me-3 text-dark"><i class="bi bi-facebook"></i></a>
<a href="#" class="me-3 text-dark"><i class="bi bi-twitter"></i></a>
<a href="#" class="text-dark"><i class="bi bi-github"></i></a>
</div>
</div>
</div>
<div class="text-center p-3 bg-dark text-white">
© 2025 QuickDevTips
</div>
</footer>
How It Works
This Bootstrap 5 Footer Example uses a container and row layout with multiple columns for branding, links, and social icons. The footer ends with a copyright section styled with .bg-dark.
Why Use This?
A footer provides users with quick access to important links and social channels, while also giving your website a professional finish.
Common Mistake
Forgetting to use responsive grid classes may cause the footer layout to break on smaller screens.
Pro Tip
Use fixed-bottom if you want the footer always visible, but use it carefully to avoid covering content.