A collection of important elements at the bottom of the web page. Footers are surprisingly essential to a website’s performance.This is the best way to end a web page insead of finishing a webpage just like apart from that appropriate footer content signals thats user have reached to end of the page.
Another important reason to have a footer in your website is it give site visitors one more chance to take a desired action. If you want people to sign up for your mailing list, view a product demo, or contact you, inviting them at the end of a scroll is an effective call to action, much like the CTAs at the end of ads.
A simple footer style with install app CTA's and few quick and important links for the website for the user navigation.
<section class="bg-dark pt-5 pb-5">
<div class="container">
<div class="row">
<div class="col-md-3">
<h3 class="light-text-1 mb-4 font-400 fs-4">
Company
</h3>
<ul>
<li class="mb-2">
<a href="#" class="light-text-4">
About us
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Blog
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Careers
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Contact us
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h3 class="light-text-1 mb-4 font-400 fs-4">
Support
</h3>
<ul>
<li class="mb-2">
<a href="#" class="light-text-4">
Help center
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Safety center
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Guidelines
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h3 class="light-text-1 mb-4 font-400 fs-4">
Legal
</h3>
<ul>
<li class="mb-2">
<a href="#" class="light-text-4">
Cookies policy
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Privacy policy
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Terms of service
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Law inforcement
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h3 class="light-text-1 mb-4 font-400 fs-4">
Install App
</h3>
<ul>
<li class="mb-2">
<a href="#" class="light-text-4">
<img src="https://bootstraprev.com/img/blocks/img/android-app.png" alt="" class="img-fluid">
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
<img src="https://bootstraprev.com/img/blocks/img/ios-app.png" alt="" class="img-fluid">
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
Footer with brand logo and copyright on the left and important links on the right side for user easy navigation.
© 2020 Bootstrap Rev. All rights reserved
<section class="bg-dark pt-5 pb-5">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="thumb pr-5 mb-4">
<img src="https://bootstraprev.com/img/logo-h-w.svg" alt="" class="img-fluid">
</div>
<p class="fs-7 light-text-4">
© 2020 Bootstrap Rev. All rights reserved
</p>
</div>
<div class="col-md-3">
<h3 class="text-white mb-4 font-400 fs-4">
Company
</h3>
<ul>
<li class="mb-2">
<a href="#" class="light-text-4">
About us
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Blog
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Careers
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Contact us
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h3 class="text-white mb-4 font-400 fs-4">
Support
</h3>
<ul>
<li class="mb-2">
<a href="#" class="light-text-4">
Help center
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Safety center
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Guidelines
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h3 class="text-white mb-4 font-400 fs-4">
Legal
</h3>
<ul>
<li class="mb-2">
<a href="#" class="light-text-4">
Cookies policy
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Privacy policy
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Terms of service
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Law inforcement
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
Brand logo social media icons and copyright on right side and newsletter form on the right to engage more users. Some quick links for the navigation are kept in center.
<section class="bg-dark pt-5 pb-5">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="thumb pr-5 mb-4">
<img src="https://bootstraprev.com/img/logo-h-w.svg" alt="" class="img-fluid">
</div>
<p class="fs-7 light-text-4">
© 2020 Bootstrap Rev. All rights reserved
</p>
<ul class="d-flex justify-content-start mt-4">
<li class="mr-2">
<a href="#" class="light-text-1">
<i class="bi bi-facebook"></i>
</a>
</li>
<li class="mr-2">
<a href="#" class="light-text-1">
<i class="bi bi-instagram"></i>
</a>
</li>
<li class="mr-2">
<a href="#" class="light-text-1">
<i class="bi bi-twitter"></i>
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h3 class="text-white mb-4 font-400 fs-4">
Company
</h3>
<ul>
<li class="mb-2">
<a href="#" class="light-text-4">
About us
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Blog
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Careers
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Contact us
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h3 class="text-white mb-4 font-400 fs-4">
Support
</h3>
<ul>
<li class="mb-2">
<a href="#" class="light-text-4">
Help center
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Safety center
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Guidelines
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h3 class="text-white mb-4 font-400 fs-4">
Stay up to date
</h3>
<div class="footer-subscribe">
<input type="email" placeholder="Email address">
<button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 0l-6 22-8.129-7.239 7.802-8.234-10.458 7.227-7.215-1.754 24-12zm-15 16.668v7.332l3.258-4.431-3.258-2.901z"/></svg>
</button>
</div>
</div>
</div>
</div>
</section>
Footer with contact information on left side and summery of compnay on right under brand logo with social media icons and important navigation in the middle.
Lorem ipsum dolor amet, consectetur adipiscing elit. Eget nisl nunc quam ac sed turpis volutpat. Cursus sed massa non nisi, placerat.
<section class="bg-dark pt-5 pb-5">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="thumb pr-5 mb-4">
<img src="https://bootstraprev.com/img/logo-h-w.svg" alt="" class="img-fluid">
</div>
<p class="fs-7 light-text-4">
Lorem ipsum dolor amet, consectetur adipiscing elit. Eget nisl nunc quam ac sed turpis volutpat. Cursus sed massa non nisi, placerat.
</p>
<ul class="d-flex justify-content-start mt-4">
<li class="mr-2">
<a href="#" class="light-text-1">
<i class="bi bi-facebook"></i>
</a>
</li>
<li class="mr-2">
<a href="#" class="light-text-1">
<i class="bi bi-instagram"></i>
</a>
</li>
<li class="mr-2">
<a href="#" class="light-text-1">
<i class="bi bi-twitter"></i>
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h3 class="text-white mb-4 font-400 fs-4">
Company
</h3>
<ul>
<li class="mb-2">
<a href="#" class="light-text-4">
About us
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Blog
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Careers
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Contact us
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h3 class="text-white mb-4 font-400 fs-4">
Support
</h3>
<ul>
<li class="mb-2">
<a href="#" class="light-text-4">
Help center
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Safety center
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
Guidelines
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h3 class="text-white mb-4 font-400 fs-4">
Reach us
</h3>
<ul>
<li class="mb-3">
<a href="#" class="light-text-4">
<i class="bi bi-envelope"></i> hello@bootstraprev.com
</a>
</li>
<li class="mb-3">
<a href="#" class="light-text-4">
<i class="bi bi-telephone"></i> +971 52 028 2601
</a>
</li>
<li class="mb-2">
<a href="#" class="light-text-4">
<i class="bi bi-geo-alt"></i> On Cloud
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
Enhanced small footer with flat brand logo, copyright information and social media icons.
<section class="bg-dark pt-3 pb-3">
<div class="container">
<div class="row align-items-center">
<div class="col-md-5">
<p class="light-text-1">
© 2021 Bootstrap Rev. All rights reserved
</p>
</div>
<div class="col-md-2">
<img src="https://bootstraprev.com/img/logo-cutout-white.svg" alt="" class="img-fluid">
</div>
<div class="col-md-5">
<ul class="d-flex justify-content-end">
<li class="ml-2">
<a href="#" class="light-text-1">
<i class="bi bi-facebook"></i>
</a>
</li>
<li class="ml-2">
<a href="#" class="light-text-1">
<i class="bi bi-instagram"></i>
</a>
</li>
<li class="ml-2">
<a href="#" class="light-text-1">
<i class="bi bi-twitter"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>