Bootstrap Footer Examples

bootstrap header and footer template
Best Bootstrap 4 Footer Templates in 2020

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>

Best Bootstrap Footer Templates Free Download

Bootstrap Footer Templates

Bootstrap Footer Examples

Leave a Reply

avatar
  Subscribe  
Notify of