This article is about Bootstrap responsive footer examples, here in this article we will learn how to create Bootstrap footer.
And here i will provide comple source code of Responsive Footer Templates free download.
Step-1: Add Media Files
Add thease css files in your head section
http://schauhan.in/Examples/Responsive-footer/bootstrap.min.css http://schauhan.in/Examples/Responsive-footer/footer.css https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
Step-2 : Add HTML
<footer class="footer pt-5 pb-5">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="foot_desc mt-3">
<div class="foot_logo">
<img src="logo.png" alt="" class="img-fluid d-block">
</div>
<p class="text-muted mt-4">We help people focus on what is right in their life, right now & teach them how to cope with stress & find their joy, boost self-esteem so they are empowered.</p>
<p class="mb-0 text-muted">2020 © <span class="text-light font-weight-bold">schauhan.in</span></p>
</div>
</div>
<div class="col-lg-2">
<h5 class="mt-3">About</h5>
<ul class="list-unstyled footer_menu_list mb-0 mt-4">
<li><a href="#">Home</a></li>
<li><a href="#">Investment Plan</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div class="col-lg-2">
<h5 class="mt-3">Support</h5>
<ul class="list-unstyled footer_menu_list mb-0 mt-4">
<li><a href="#">Help & Support</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms & Conditions</a></li>
</ul>
</div>
<div class="col-lg-4">
<h5 class="mt-3">Subscribe To Get Updates</h5>
<div class="text-center subcribe-newslatter mt-4">
<form class="mx-auto position-relative">
<input type="text" placeholder="Email">
<button type="submit" class="btn"><i class="fe fe-arrow-right"></i></button>
</form>
</div>
<h5 class="mt-4">Follow Us</h5>
<div class="mt-4">
<ul class="list-inline fot_social mt-3">
<li class="list-inline-item"><a href="#" target="_blank" class="social-icon"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
<li class="list-inline-item"><a href="" class="social-icon"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
<li class="list-inline-item"><a href="" class="social-icon"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li class="list-inline-item"><a href="" class="social-icon"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<div class="bottom_footer">
<div class="container">
<div class="row">
<div class="col-lg-6">
<ul class="bfooter text-left">
<li><a href="#">Term & Condition</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
<div class="col-lg-6">
<ul class="bfooter text-right">
<li><a href="#">Term & Condition</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
</div>
</div>
</div>
Leave a Reply