Footer section completes a website. You can add logo, useful links, social icons, subscription form, etc. in your footer section that should appear all the pages. Here is the code for Web-Boots theme’s footer block elements as you can see in the demo.
Ensure to replace the text, image and video content in the demo code with your own content.
4 Columns Footer
<section class="cid-rkNzvNx7wJ" id="footer1-7">
<div class="container">
<div class="media-container-row content text-white">
<div class="col-12 col-md-3">
<div class="media-wrap">
<a href="footers.html">
<img src="assets/images/logo-122x117.png" alt="Web-Boots" title="Web-Boots">
</a>
</div>
</div>
<div class="col-12 col-md-3 wn-fonts-style display-7">
<h5 class="pb-3">
Address
</h5>
<p class="wn-text">
1234 Street Name
<br>City, AA 99999
</p>
</div>
<div class="col-12 col-md-3 wn-fonts-style display-7">
<h5 class="pb-3">
Contacts
</h5>
<p class="wn-text">
Email: [email protected]
<br>Phone: +1 (0) 000 0000 001
<br>Fax: +1 (0) 000 0000 002
</p>
</div>
<div class="col-12 col-md-3 wn-fonts-style display-7">
<h5 class="pb-3">
Links
</h5>
<p class="wn-text">Link #1<br>Link #2<br>Link #3</p>
</div>
</div>
<div class="footer-lower">
<div class="media-container-row">
<div class="col-sm-12">
<hr>
</div>
</div>
<div class="media-container-row wn-white">
<div class="col-sm-6 copyright">
<p class="wn-text wn-fonts-style display-7">
© Copyright 2019 Web-Boots - All Rights Reserved
</p>
</div>
<div class="col-md-6">
<div class="social-list align-right">
<div class="soc-item">
<a href="https://twitter.com/" target="_blank">
<span class="socicon-twitter socicon wn-iconfont wn-iconfont-social"></span>
</a>
</div>
<div class="soc-item">
<a href="https://www.facebook.com/" target="_blank">
<span class="socicon-facebook socicon wn-iconfont wn-iconfont-social"></span>
</a>
</div>
<div class="soc-item">
<a href="https://www.youtube.com/" target="_blank">
<span class="socicon-youtube socicon wn-iconfont wn-iconfont-social"></span>
</a>
</div>
<div class="soc-item">
<a href="https://instagram.com/" target="_blank">
<span class="socicon-instagram socicon wn-iconfont wn-iconfont-social"></span>
</a>
</div>
<div class="soc-item">
<a href="https://plus.google.com/" target="_blank">
<span class="socicon-googleplus socicon wn-iconfont wn-iconfont-social"></span>
</a>
</div>
<div class="soc-item">
<a href="https://www.behance.net/" target="_blank">
<span class="socicon-behance socicon wn-iconfont wn-iconfont-social"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Footer with Google Map
<section class="cid-rkNzxkB9jt" id="footer2-8">
<div class="container">
<div class="media-container-row content wn-white">
<div class="col-12 col-md-3 wn-fonts-style display-7">
<p class="wn-text">
<strong>Address</strong>
<br>
<br>1234 Street Name
<br>City, AA 99999
<br>
<br>
<br><strong>Contacts</strong>
<br>
<br>Email: [email protected]
<br>Phone: +1 (0) 000 0000 001
<br>Fax: +1 (0) 000 0000 002
</p>
</div>
<div class="col-12 col-md-3 wn-fonts-style display-7">
<p class="wn-text">
<strong>Links</strong>
<br>
<br>Link #1<br>Link #2<br>Link #3<br>
<br><strong>Feedback</strong>
<br>
<br>Please send us your ideas, bug reports, suggestions! Any feedback would be appreciated.
</p>
</div>
<div class="col-12 col-md-6">
<div class="google-map"><iframe frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCx3d07zxHPLvkFBLlAR3Ng8a9wsAsGoJ8&q=place_id:ChIJn6wOs6lZwokRLKy1iqRcoKw" allowfullscreen=""></iframe></div>
</div>
</div>
<div class="footer-lower">
<div class="media-container-row">
<div class="col-sm-12">
<hr>
</div>
</div>
<div class="media-container-row wn-white">
<div class="col-sm-6 copyright">
<p class="wn-text wn-fonts-style display-7">
© Copyright 2019 Web-Boots - All Rights Reserved
</p>
</div>
<div class="col-md-6">
<div class="social-list align-right">
<div class="soc-item">
<a href="https://twitter.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-twitter-square fa"></span>
</a>
</div>
<div class="soc-item">
<a href="https://www.facebook.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-facebook-square fa"></span>
</a>
</div>
<div class="soc-item">
<a href="https://www.youtube.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-youtube-square fa"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Default Site Footer with Different Color
<section class="footer3 cid-rkNzyzDEnB" id="footer3-9">
<div class="container">
<div class="media-container-row content">
<div class="col-md-2 col-sm-4">
<div class="mb-3 img-logo">
<a href="footers.html">
<img src="assets/images/logo-122x117.png" alt="Web-Boots" title="Web-Boots">
</a>
</div>
<p class="wn-fonts-style foot-logo display-5">
Web-Boots</p>
</div>
<div class="col-md-3 col-sm-4">
<p class="mb-4 wn-fonts-style foot-title display-7">
RECENT NEWS
</p>
<p class="wn-text wn-links-column wn-fonts-style display-7">
<a href="#" class="text-black">About us</a>
<br><a href="#" class="text-black">Services</a>
<br><a href="#" class="text-black">Selected Work</a>
<br><a href="#" class="text-black">Get In Touch</a>
<br><a href="#" class="text-black">Careers</a>
</p>
</div>
<div class="col-md-3 col-sm-4">
<p class="mb-4 wn-fonts-style foot-title display-7">
CATEGORIES
</p>
<p class="wn-text wn-fonts-style wn-links-column display-7">
<a href="#" class="text-black">Business</a>
<br><a href="#" class="text-black">Design</a>
<br><a href="#" class="text-black">Real life</a>
<br><a href="#" class="text-black">Science</a>
<br><a href="#" class="text-black">Tech</a>
</p>
</div>
<div class="col-md-4 col-sm-12">
<p class="mb-4 wn-fonts-style foot-title display-7">
SUBSCRIBE
</p>
<p class="wn-text form-text wn-fonts-style display-7">
Get monthly updates and free resources.
</p>
<div class="media-container-column" data-form-type="formoid">
<!---Formbuilder Form--->
<form action="#" method="POST" class="wn-form form-with-styler" data-form-title="Form"><input type="hidden" name="email" data-form-email="true" value="09T0abBNgghByPPjGMbS5f8jQxhcvJeBHdLMRzHDXYCfBWZoVy+phY1MvLnLJLU8JTOC494tTffhVipJ3CSs1rGz6Ql0JS2Ia2fB0WJnIXuwxlHkIwxu9AANffjTVA9b">
<div class="row form-inline justify-content-center">
<div hidden="hidden" data-form-alert="" class="alert alert-success col-12">Thanks for filling out the form!</div>
<div hidden="hidden" data-form-alert-danger="" class="alert alert-danger col-12">
</div>
</div>
<div class="dragArea row form-inline justify-content-center">
<div class="col-auto form-group " data-for="email">
<input type="email" name="email" placeholder="Email" data-form-field="Email" required="required" class="form-control input-sm input-inverse my-2 display-7" id="email-footer3-9">
</div>
<div class="col-auto input-group-btn m-2">
<button type="submit" class="btn btn-primary m-0 display-4">Subscribe</button>
</div>
</div>
<span class="gdpr-block "><label><input type="checkbox" name="gdpr" id="gdpr-footer3-9" required="">By continiung you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</label></span></form><!---Formbuilder Form--->
</div>
</div>
</div>
<div class="footer-lower">
<div class="media-container-row">
<div class="col-sm-12">
<hr>
</div>
</div>
<div class="media-container-row">
<div class="col-sm-6 copyright">
<p class="wn-text wn-fonts-style display-7">
© Copyright 2019 Web-Boots - All Rights Reserved
</p>
</div>
<div class="col-md-6">
<div class="social-list align-right">
<div class="soc-item">
<a href="https://twitter.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-twitter-square fa"></span>
</a>
</div>
<div class="soc-item">
<a href="https://www.facebook.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-facebook-square fa"></span>
</a>
</div>
<div class="soc-item">
<a href="https://www.youtube.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-youtube-square fa"></span>
</a>
</div>
<div class="soc-item">
<a href="https://instagram.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-instagram fa"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Links, Social and Logo Footer
<section class="cid-rkNzB9g9bQ" id="footer5-a">
<div class="container">
<div class="media-container-row">
<div class="col-md-3">
<div class="media-wrap">
<a href="footers.html">
<img src="assets/images/logo-122x117.png" alt="Web-Boots" title="Web-Boots">
</a>
</div>
</div>
<div class="col-md-9">
<p class="wn-text align-right links wn-fonts-style display-7">
<a href="#" class="text-black">ABOUT</a>
<a href="#" class="text-black">TERMS</a>
<a href="#" class="text-black">CAREERS</a>
<a href="#" class="text-black">CONTACT</a>
</p>
</div>
</div>
<div class="footer-lower">
<div class="media-container-row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="media-container-row wn-white">
<div class="col-md-6 copyright">
<p class="wn-text wn-fonts-style display-7">
© Copyright 2019 Web-Boots - All Rights Reserved
</p>
</div>
<div class="col-md-6">
<div class="social-list align-right">
<div class="soc-item">
<a href="https://twitter.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-twitter-square fa"></span>
</a>
</div>
<div class="soc-item">
<a href="https://www.facebook.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-facebook-square fa"></span>
</a>
</div>
<div class="soc-item">
<a href="https://www.youtube.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-youtube-square fa"></span>
</a>
</div>
<div class="soc-item">
<a href="https://instagram.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-instagram fa"></span>
</a>
</div>
<div class="soc-item">
<a href="https://www.pinterest.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-pinterest fa"></span>
</a>
</div>
<div class="soc-item">
<a href="https://github.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-github-square fa"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Simple Links & Social Footer
<section once="" class="cid-rkNzBYLtpI" id="footer7-b">
<div class="container">
<div class="media-container-row align-center wn-white">
<div class="row row-links">
<ul class="foot-menu">
<li class="foot-menu-item wn-fonts-style display-7">
<a class="text-white wn-bold" href="#" target="_blank">About us</a>
</li><li class="foot-menu-item wn-fonts-style display-7">
<a class="text-white wn-bold" href="#" target="_blank">Services</a>
</li><li class="foot-menu-item wn-fonts-style display-7">
<a class="text-white wn-bold" href="#" target="_blank">Get In Touch</a>
</li><li class="foot-menu-item wn-fonts-style display-7">
<a class="text-white wn-bold" href="#" target="_blank">Careers</a>
</li><li class="foot-menu-item wn-fonts-style display-7">
<a class="text-white wn-bold" href="#" target="_blank">Work</a>
</li></ul>
</div>
<div class="row social-row">
<div class="social-list align-right pb-2">
<div class="soc-item">
<a href="https://twitter.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-twitter-square fa"></span>
</a>
</div><div class="soc-item">
<a href="https://www.facebook.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-facebook-square fa"></span>
</a>
</div><div class="soc-item">
<a href="https://www.youtube.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-youtube-square fa"></span>
</a>
</div><div class="soc-item">
<a href="https://instagram.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-instagram fa"></span>
</a>
</div><div class="soc-item">
<a href="https://www.pinterest.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-pinterest fa"></span>
</a>
</div><div class="soc-item">
<a href="https://github.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-github-square fa"></span>
</a>
</div></div>
</div>
<div class="row row-copirayt">
<p class="wn-text mb-0 wn-fonts-style wn-white align-center display-7">
© Copyright 2019 Web-Boots - All Rights Reserved
</p>
</div>
</div>
</div>
</section>Default Site Footer
<section class="footer4 cid-rkwcsW9eFM" id="footer4-4">
<div class="container">
<div class="media-container-row content wn-white">
<div class="col-md-3 col-sm-4">
<div class="mb-3 img-logo">
<a href="index.html">
<img src="assets/images/logo-122x117.png" alt="Web-Boots Theme" title="Web-Boots Theme Footer Logo">
</a>
</div>
<p class="mb-3 wn-fonts-style foot-title display-5">
Web-Boots</p>
<p class="wn-text wn-fonts-style wn-links-column display-7">
<a href="#" class="text-white">About Us</a>
<br><a href="#" class="text-white">Services</a>
<br><a href="#" class="text-white">Selected Work</a>
<br><a href="#" class="text-white">Get In Touch</a>
</p>
</div>
<div class="col-md-4 col-sm-8">
<p class="mb-4 foot-title wn-fonts-style display-5">
ABOUT US</p>
<p class="wn-text wn-fonts-style foot-text display-7">
Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem. <br>
<br>Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.
</p>
</div>
<div class="col-md-4 offset-md-1 col-sm-12">
<p class="mb-4 foot-title wn-fonts-style display-5">
SUBSCRIBE
</p>
<p class="wn-text wn-fonts-style form-text display-7">
Get monthly updates and free resources.
</p>
<div class="media-container-column" data-form-type="formoid">
<!---Formbuilder Form--->
<form action="#" method="POST" class="wn-form form-with-styler" data-form-title="Form"><input type="hidden" name="email" data-form-email="true" value="j2pCmnXhWdQPotkjMfUXb77MdGPz0wAi1eAkf1RIk/ALGNrWTHpvW9EkO2YSgZmwowrVv87UPW6tpQ77bjCRHKxWfhH9OuQmEhNYL+vlXQ7yU9+MhaBXKtkizyx4PhOx">
<div class="row form-inline justify-content-center">
<div hidden="hidden" data-form-alert="" class="alert alert-success col-12">Thanks for filling out the form!</div>
<div hidden="hidden" data-form-alert-danger="" class="alert alert-danger col-12">
</div>
</div>
<div class="dragArea row form-inline justify-content-center">
<div class="col-auto form-group " data-for="email">
<input type="email" name="email" placeholder="Enter Your Email Address..." data-form-field="Email" required="required" class="form-control input-sm input-inverse my-2 display-7" id="email-footer4-4">
</div>
<div class="col-auto input-group-btn m-2"><button type="submit" class="btn btn-primary m-0 display-4">Subscribe</button></div>
</div>
<span class="gdpr-block "><label><input type="checkbox" name="gdpr" id="gdpr-footer4-4" required="">By continiung you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</label></span></form><!---Formbuilder Form--->
</div>
<p class="mb-4 wn-fonts-style foot-title display-5">
<br>CONNECT WITH US
</p>
<div class="social-list pl-0 mb-0">
<div class="soc-item">
<a href="https://twitter.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-twitter-square fa"></span>
</a>
</div>
<div class="soc-item">
<a href="https://www.facebook.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-facebook-square fa"></span>
</a>
</div>
<div class="soc-item">
<a href="https://www.youtube.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-youtube-square fa"></span>
</a>
</div>
<div class="soc-item">
<a href="https://instagram.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-instagram fa"></span>
</a>
</div>
<div class="soc-item">
<a href="https://www.pinterest.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-pinterest-square fa"></span>
</a>
</div>
<div class="soc-item">
<a href="https://github.com/" target="_blank">
<span class="wn-iconfont wn-iconfont-social fa-github-square fa"></span>
</a>
</div>
</div>
</div>
</div>
<div class="footer-lower">
<div class="media-container-row">
<div class="col-sm-12">
<hr>
</div>
</div>
<div class="media-container-row wn-white">
<div class="col-sm-12 copyright">
<p class="wn-text wn-fonts-style display-7">
© Copyright 2019 Web-Boots - All Rights Reserved
</p>
</div>
</div>
</div>
</div>
</section>