Hello! Today, we're building a responsive Bootstrap 5 footer section. We'll cover creating a footer, making it responsive, adding a newsletter section, social media icons, copyright info, and useful links. Make sure you have a Bootstrap 5 project set up or refer to the article for guidance.
How to install & setup bootstrap 5
Example
1. Bootstrap 5 responsive footer section with social media icons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap 5 Footer</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<footer class="container p-4 rounded">
<div class="d-lg-flex justify-content-between">
<div>
<span>LOGO</span>
</div>
<div class="copyright">
<p>developed and maintained by <a href="#" target="_blank">company</a></p>
</div>
<div>
<ul class="d-flex gap-3 list-unstyled">
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
<li><a href="#"><i class="bi bi-twitter"></i></a></li>
<li><a href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>
bootstrap 5 responsive footer
2. Building a Responsive Bootstrap 5 Footer with Logo, Quick Links, and Address.
<footer>
<div class="container">
<div class="row">
<div class="col-xl-3 col-lg-4 col-md-6">
<div>
<h3>Logo</h3>
<p class="mb-30 footer-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad soluta facilis
eos quia optio iusto odit atque eum tempore, quisquam officiis vero veniam hic,</p>
</div>
</div>
<div class="col-xl-2 offset-xl-1 col-lg-2 col-md-6">
<div class="">
<h4>Quick Link</h4>
<ul class="list-unstyled">
<li>
<a href="#" class="text-decoration-none">Home</a>
</li>
<li>
<a href="#" class="text-decoration-none">About Us</a>
</li>
<li>
<a href="#" class="text-decoration-none">Service</a>
</li>
<li>
<a href="#" class="text-decoration-none">Contact</a>
</li>
</ul>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6">
<div>
<h4>Service</h4>
<ul class="list-unstyled">
<li>
<a href="#" class="text-decoration-none">Marketing</a>
</li>
<li>
<a href="#" class="text-decoration-none">Branding</a>
</li>
<li>
<a href="#" class="text-decoration-none">Web Design</a>
</li>
<li>
<a href="#" class="text-decoration-none">Graphics Design</a>
</li>
</ul>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6">
<div>
<h4>Address</h4>
<ul class="list-unstyled">
<li>
<p>+017367234</p>
</li>
<li>
<p><a href="#">[email protected]</a>
</p>
</li>
<li>
<p>New York
City in New York State
New York City comprises 5 boroughs sitting where the Hudson River meets th</p>
</li>
</ul>
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<div class="copyright">
<p>Developed and maintained by <a href="#" target="_blank">company</a></p>
</div>
</div>
</div>
</footer>
responsive footer examples
3. Designing a Bootstrap 5 Footer Section with a Newsletter Form.
<footer>
<div class="container">
<div class="row">
<div class="col-xl-3 col-lg-4 col-md-6">
<div>
<h3>Logo</h3>
<p class="mb-30 footer-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad soluta facilis
eos quia optio iusto odit atque eum tempore, quisquam officiis vero veniam hic,</p>
</div>
</div>
<div class="col-xl-2 offset-xl-1 col-lg-2 col-md-6">
<div class="">
<h4>Quick Link</h4>
<ul class="list-unstyled">
<li>
<a href="#" class="text-decoration-none">Home</a>
</li>
<li>
<a href="#" class="text-decoration-none">About Us</a>
</li>
<li>
<a href="#" class="text-decoration-none">Service</a>
</li>
<li>
<a href="#" class="text-decoration-none">Contact</a>
</li>
</ul>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6">
<div>
<h4>Service</h4>
<ul class="list-unstyled">
<li>
<a href="#" class="text-decoration-none">Marketing</a>
</li>
<li>
<a href="#" class="text-decoration-none">Branding</a>
</li>
<li>
<a href="#" class="text-decoration-none">Web Design</a>
</li>
<li>
<a href="#" class="text-decoration-none">Graphics Design</a>
</li>
</ul>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6">
<div>
<h4>Newsletter</h4>
<div>
<label for="Newsletter" class="form-label">Subscribe To Our Newsletter</label>
<input type="text" class="form-control" Placeholder="Enter Your Email">
<button class="btn btn-danger mt-3">Subscribe</button>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<div class="copyright">
<p>Developed and maintained by <a href="#" target="_blank">company</a></p>
</div>
</div>
</div>
</footer>
how to create footer in bootstrap 5
