How to make Footer Section in Boostrap-5
The footer is an additional navigation method for websites. It contains links, buttons, company information, copyright, terms and many other elements.
The official Bootstrap documentation does not provide examples for footers, so we have built them using the containers, rows and columns provided by the Bootstrap web framework.
Before copying and pasting any of the code below, be sure to add a Bootstrap link and script to your HTML template.
HTML Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Footer Design</title>
<link rel="stylesheet" href="css/style.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg=="
crossorigin="anonymous"
/>
</head>
<body>
<div class="py-5" id="footer">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="img/logo-white.png" alt="" class="img-fluid" />
<p class="text-white mt-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non ducimus ea doloribus, nam dolores reiciendis eius numquam quia hic quisquam nisi culpa earum, ut magnam.</p>
</div>
<div class="col-md-2" id="footer-content1">
<h4 class="text-white">Explore</h4>
<ul class="mt-4">
<li><a href="" class="text-white">Home</a></li>
<li class="my-2"><a href="" class="text-white">About us</a></li>
<li class="my-2"><a href="" class="text-white my-2">Services</a></li>
<li class="my-2"><a href="" class="text-white my-2">Blogs</a></li>
<li class="my-2"><a href="" class="text-white my-2">Gallery</a></li>
<li><a href="" class="text-white">Contact us</a></li>
</ul>
</div>
<div class="col-md-2" id="footer-content1">
<h4 class="text-white">Resources</h4>
<ul class="mt-4">
<li class="my-2"><a href="" class="text-white">Team</a></li>
<li class="my-2"><a href="" class="text-white my-2">Contact us</a></li>
<li class="my-2"><a href="" class="text-white my-2">FAQ</a></li>
<li class="my-2"><a href="" class="text-white my-2">Blogs</a></li>
<li class="my-2"><a href="" class="text-white my-2">Services</a></li>
<li class="my-2"><a href="" class="text-white">Blog</a></li>
</ul>
</div>
<div class="col-md-4" id="footer-content2">
<h4 class="text-white">Address</h4>
<ul class="mt-4">
<li>
<span><i class="fa fa-location-arrow"></i></span>
<p>175 5th Ave Premium Area, New York, NY 10010, United States</p>
</li>
<li class="my-2">
<span><i class="fa fa-phone"></i></span>
<p>+1 (123) 456 7890</p>
</li>
<li>
<span><i class="fa fa-envelope"></i></span>
<p>hello@dibiz.com</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="copy-right bg-dark py-2">
<div class="container">
<p class="text-white text-center mt-2">2021 Dibiz is Proudly Powered by EnvyTheme</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
</body>
</html>
Use Font Awesome Icons:-
Another thing to note is that many of these footers have social media links attached to icons. Many of these footer examples use Font Awesome, an open-source project with over 1,000 vector icons and social media logos.
CSS Code
#footer{
width: 100%;
background-color: #000;
}
#footer-content2 ul li{
display: flex;
color: #fff;
}
#footer-content2 ul li span {
margin-right: 15px;
font-size: 22px;
/* align-self: center; */
/* align-items: center; */
margin-top: 4px;
}
#footer-content1 ul li a{
list-style: none;
text-decoration: none;
margin-left: 0;
padding-left: 0px;
font-weight: 500;
}
Previous post
How To Create About Us in Bootstrap 5
Next post