Hey, developer today I am going to share a Bootstrap Responsive Footer with Social Media icons. To implement this you have to first create a index.html file then you have to copy the HTML code given below.
After open the index.html file in your browser and see the output.
Preview
HTML Code
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Responsive Footer </title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<!-- Adding Font Awesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!-- Bootstrap Footer -->
<div class="w-100 h-50 bg-dark py-5 px-5">
<!-- Footer Social -->
<div class="container border-bottom">
<ul class="d-flex w-100 justify-content-center flex-wrap flex-sm-row">
<li class="pe-auto list-group-item my-2 px-4"><a href=""><i class="fs-5 text-white fa-brands fa-instagram"></i></a></li>
<li class="pe-auto list-group-item my-2 px-4"><a href=""><i class="fs-5 text-white fa-brands fa-facebook"></i></a></li>
<li class="pe-auto list-group-item my-2 px-4"><a href=""><i class="fs-5 text-white fa-brands fa-linkedin"></i></a></li>
<li class="pe-auto list-group-item my-2 px-4"><a href=""><i class="fs-5 text-white fa-brands fa-github"></i></a></li>
<li class="pe-auto list-group-item my-2 px-4"><a href=""><i class="fs-5 text-white fa-brands fa-twitter"></i></a></li>
</ul>
</div>
<!-- Footer Company Name -->
<h4 class="text-center my-4 text-white">
Geeks Help
</h4>
<!-- Footer Flex Container -->
<div class="w-100 d-flex flex-wrap justify-content-between">
<!-- Footer Flex Item -->
<div class="m-2 flex-item" style="width: 20rem;">
<h4 class="heading" style="color: #e65b00;">Geeks Help</h4>
<div class="content">
<ul class="px-0">
<li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">Geeks Help is an independent website, especially for Web Developers, Programming Beginners, BCA and Computer Science Students. We provide programming, web development content with free pdf and web development projects.</a></li>
</ul>
</div>
</div>
<!-- Footer Flex Item -->
<div class="m-2 flex-item">
<h4 class="heading" style="color: #e65b00;">Products</h4>
<div class="content">
<ul class="px-0">
<li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">HTML</a></li>
<li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">CSS</a></li>
<li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">JavaScript</a></li>
<li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">Bootstrap</a></li>
<li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">ReactJS</a></li>
</ul>
</div>
</div>
<!-- Footer Flex Item -->
<div class="m-2 flex-item">
<h4 class="heading" style="color: #e65b00;">Useful Links</h4>
<div class="content">
<ul class="px-0">
<li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">Help</a></li>
<li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">Pricing</a></li>
<li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">Settings</a></li>
<li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">Order Details</a></li>
</ul>
</div>
</div>
<!-- Footer Flex Item -->
<div class="m-2 flex-item">
<h4 class="heading" style="color: #e65b00;">Contact Us</h4>
<div class="content">
<ul class="px-0">
<li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">XYZ, ABC, India</a></li>
<li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">contact@geekshelp@gmail.com</a></li>
<li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">+91 1234567890</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Adding Scripts to Our HTML code -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<!-- Bootstrap Responsive Footer with Social Media icons created by raju_webdev -->
</body>
</html>
