Footer
eCommerce footer
Set of design blocks dedicated to building eCommerce footer component.
Basic example
<!-- Footer -->
<footer class="page-footer font-small elegant-color">
<div class="color-primary">
<div class="container">
<!-- Grid row-->
<div class="row py-4 d-flex align-items-center">
<!-- Grid column -->
<div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
<h6 class="mb-0">Get connected with us on social networks!</h6>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6 col-lg-7 text-center text-md-right">
<!-- Facebook -->
<a class="fb-ic">
<i class="fab fa-facebook-f white-text mr-4"> </i>
</a>
<!-- Twitter -->
<a class="tw-ic">
<i class="fab fa-twitter white-text mr-4"> </i>
</a>
<!-- Google +-->
<a class="gplus-ic">
<i class="fab fa-google-plus-g white-text mr-4"> </i>
</a>
<!--Linkedin -->
<a class="li-ic">
<i class="fab fa-linkedin-in white-text mr-4"> </i>
</a>
<!--Instagram-->
<a class="ins-ic">
<i class="fab fa-instagram white-text"> </i>
</a>
</div>
<!-- Grid column -->
</div>
<!-- Grid row-->
</div>
</div>
<!-- Footer Links -->
<div class="container text-center text-md-left pt-4 pt-md-5">
<!-- Grid row -->
<div class="row mt-1 mt-md-0 mb-4 mb-md-0">
<!-- Grid column -->
<div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>About me</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<p class="foot-desc mb-0">Here you can use rows and columns to organize your footer content. Lorem
ipsum dolor sit amet,
consectetur
adipisicing elit.</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>Products</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<ul class="list-unstyled foot-desc">
<li class="mb-2">
<a href="#!">MDBootstrap</a>
</li>
<li class="mb-2">
<a href="#!">MDWordPress</a>
</li>
<li class="mb-2">
<a href="#!">BrandFlow</a>
</li>
<li class="mb-2">
<a href="#!">Bootstrap Angular</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>Useful links</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<ul class="list-unstyled foot-desc">
<li class="mb-2">
<a href="#!">Your Account</a>
</li>
<li class="mb-2">
<a href="#!">Become an Affiliate</a>
</li>
<li class="mb-2">
<a href="#!">Shipping Rates</a>
</li>
<li class="mb-2">
<a href="#!">Help</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>Contacts</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<ul class="fa-ul foot-desc ml-4">
<li class="mb-2"><span class="fa-li"><i class="far fa-map"></i></span>New York, Avenue Street 10
</li>
<li class="mb-2"><span class="fa-li"><i class="fas fa-phone-alt"></i></span>042 876 836 908</li>
<li class="mb-2"><span class="fa-li"><i class="far fa-envelope"></i></span>company@example.com</li>
<li><span class="fa-li"><i class="far fa-clock"></i></span>Monday - Friday: 10-17</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Supported content
Footers come with built-in support for a handful of sub-components. Choose from the following as needed:
Copyright
The background color of the Copyright section will be automatically changed to a slightly darker shade than Footer itself.
You can easily change the color of the Footer by using one of the 300 predefined colors of the MDBootstrap palette.
<!-- Footer -->
<footer class="page-footer font-small elegant-color">
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Links
You can adjust the number of the columns by using Bootstrap Grid.
On the smaller devices, dividers between columns become visible.
<!-- Footer -->
<footer class="page-footer font-small elegant-color">
<!-- Footer Links -->
<div class="container text-center text-md-left pt-4 pt-md-5">
<!-- Grid row -->
<div class="row mt-1 mt-md-0 mb-4 mb-md-0">
<!-- Grid column -->
<div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>Links</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<ul class="list-unstyled">
<li>
<a href="#!">Very long link 1</a>
</li>
<li>
<a href="#!">Very long link 2</a>
</li>
<li>
<a href="#!">Very long link 3</a>
</li>
<li>
<a href="#!">Very long link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>Links</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>Links</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>Links</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Text
For more advanced text options have a look at the Typography docs or Text utilities docs .
<!-- Footer -->
<footer class="page-footer font-small elegant-color">
<!-- Footer Links -->
<div class="container text-center text-md-left pt-4 pt-md-5">
<!-- Grid row -->
<div class="row mt-1 mt-md-0 mb-4 mb-md-0">
<!-- Grid column -->
<div class="col-md-6 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>Footer text 1</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis asperiores pariatur consequuntur,
officia
deserunt, laboriosam sed atque error esse perferendis nam ut saepe iste iure voluptatibus laborum
iusto
vitae magni.</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-6 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">
<!-- Links -->
<h5>Footer text 2</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta ducimus magni ea mollitia placeat
harum
doloribus aut, qui expedita ipsam sed cum, modi totam sit libero? Quis, hic inventore! Impedit?</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Forms
At your disposal is a variety of the inputs and predefined forms.
<!-- Footer -->
<footer class="page-footer font-small elegant-color">
<!-- Footer Links -->
<div class="container text-center text-md-left pt-3 pt-md-5">
<!-- Grid row -->
<div class="row mt-1 mt-md-0">
<!-- Grid column -->
<div class="col-md-6 mx-auto mt-4 pt-2 mt-md-0 pt-md-0 mb-4 pb-2 mb-md-5 pb-md-0">
<div class="md-form md-outline my-0 d-flex justify-content-between align-items-center">
<input type="text" id="search12" placeholder="Search" class="form-control form-control-sm mb-0">
<a href="#!" class="btn btn-flat btn-md px-3 waves-effect"><i class="fas fa-search fa-lg"></i></a>
</div>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-6 mx-auto mt-4 pt-2 mt-md-0 pt-md-0 mb-5">
<div class="md-form md-outline input-group my-0">
<input type="text" id="email12" class="form-control form-control-sm" placeholder="Your email" aria-label="Your email" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-sm btn-outline-white my-0" type="button" style="padding-top: 8px; padding-bottom: 7px;">Sign up</button>
</div>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Images
For more advanced image options have a look at Images docs .
<!-- Footer -->
<footer class="page-footer font-small elegant-color">
<!-- Footer Links -->
<div class="container text-center text-md-left pt-4 pt-md-5">
<!-- Links -->
<h5>Latest projects</h5>
<hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">
<!-- Grid row -->
<div class="row row-cols-2 row-cols-md-4 row-cols-lg-8 mb-4 pb-2">
<!-- Grid column -->
<div class="col mb-3">
<img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Photos/Square/5.jpg"
alt="Project image">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col mb-3">
<img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Photos/Square/3.jpg"
alt="Project image">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col mb-3">
<img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Photos/Square/1.jpg"
alt="Project image">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col mb-3">
<img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Photos/Square/6.jpg"
alt="Project image">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col mb-3">
<img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Photos/Square/2.jpg"
alt="Project image">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col mb-3">
<img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Photos/Square/8.jpg"
alt="Project image">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col mb-3">
<img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Photos/Square/4.jpg"
alt="Project image">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col mb-3">
<img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Photos/Square/7.jpg"
alt="Project image">
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Iframe / video
For more advanced iframe / video options have a look at Embeds docs .
<!-- Footer -->
<footer class="page-footer font-small elegant-color">
<!-- Footer Links -->
<div class="container pt-5 mb-3 pb-2">
<div class="row d-flex justify-content-center">
<!--Grid column-->
<div class="col-md-8 col-lg-6">
<!-- Video -->
<div class="embed-responsive embed-responsive-16by9 mb-4">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM"
allowfullscreen></iframe>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Icons
You can use one of the 600 available icons. Learn more in the Icons docs.
<!-- Footer -->
<footer class="page-footer font-small elegant-color">
<!-- Footer Links -->
<div class="container">
<div class="row d-flex justify-content-center">
<!--Grid column-->
<div class="col d-flex justify-content-center my-5 pt-1">
<!-- Facebook -->
<a class="fb-ic">
<i class="fab fa-facebook-f fa-lg white-text mx-3 mx-md-4 fa-2x"> </i>
</a>
<!-- Twitter -->
<a class="tw-ic">
<i class="fab fa-twitter fa-lg white-text mx-3 mx-md-4 fa-2x"> </i>
</a>
<!-- Google +-->
<a class="gplus-ic">
<i class="fab fa-google-plus-g fa-lg white-text mx-3 mx-md-4 fa-2x"> </i>
</a>
<!--Linkedin -->
<a class="li-ic">
<i class="fab fa-linkedin-in fa-lg white-text mx-3 mx-md-4 fa-2x"> </i>
</a>
<!--Instagram-->
<a class="ins-ic">
<i class="fab fa-instagram fa-lg white-text mx-3 mx-md-4 fa-2x"> </i>
</a>
<!--Pinterest-->
<a class="pin-ic">
<i class="fab fa-pinterest fa-lg white-text mx-3 mx-md-4 fa-2x"> </i>
</a>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Buttons MDB Pro component
For more advanced Buttons options have a look at the Buttons docs .
<!-- Footer -->
<footer class="page-footer font-small elegant-color">
<!-- Footer Links -->
<div class="container">
<div class="row">
<!--Grid column-->
<div class="col my-5">
<!-- Call to action -->
<ul class="list-unstyled d-flex justify-content-center align-items-center mb-0">
<li>
<h5 class="mb-0 mr-3">Register for free</h5>
</li>
<li>
<a href="#!" class="btn btn-outline-white btn-rounded">Sign up!</a>
</li>
</ul>
<!-- Call to action -->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Social buttons MDB Pro component
For more advanced Social Buttons options have a look at the Social Buttons docs .
<!-- Footer -->
<footer class="page-footer font-small elegant-color">
<!-- Footer Links -->
<div class="container">
<div class="row">
<!--Grid column-->
<div class="col my-5">
<!-- Social buttons -->
<ul class="list-unstyled list-inline text-center mb-0">
<li class="list-inline-item">
<a class="btn-floating btn-fb mx-1">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-tw mx-1">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-gplus mx-1">
<i class="fab fa-google-plus-g"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-li mx-1">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-dribbble mx-1">
<i class="fab fa-dribbble"></i>
</a>
</li>
</ul>
<!-- Social buttons -->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Questions or feedback?
Let us know