Author: Dawid Adach
Footer
Our theme is almost ready. In this lesson, we will focus on the footer. This part usually contains site/company information or useful links.
Firstly, let's move our footer code into the right place
- Cut the footer code from
index.php
: - And paste it at the top of the:
footer.php
. - Save both files and refresh the page.
<!--Footer-->
<footer class="page-footer text-center font-small mt-4 wow fadeIn">
<!--Call to action-->
<div class="pt-4">
<a class="btn btn-outline-white" href="https://mdbootstrap.com/docs/b4/jquery/getting-started/download/" target="_blank" role="button">Download MDB
<i class="fa fa-download ml-2"></i>
</a>
<a class="btn btn-outline-white" href="https://mdbootstrap.com/education/bootstrap/" target="_blank" role="button">Start free tutorial
<i class="fa fa-graduation-cap ml-2"></i>
</a>
</div>
<!--/.Call to action-->
<hr class="my-4">
<!-- Social icons -->
<div class="pb-4">
<a href="https://www.facebook.com/mdbootstrap" target="_blank">
<i class="fab fa-facebook-f mr-3"></i>
</a>
<a href="https://twitter.com/MDBootstrap" target="_blank">
<i class="fab fa-twitter mr-3"></i>
</a>
<a href="https://www.youtube.com/watch?v=7MUISDJ5ZZ4" target="_blank">
<i class="fa fa-youtube mr-3"></i>
</a>
<a href="https://plus.google.com/u/0/b/107863090883699620484" target="_blank">
<i class="fab fa-google-plus-g mr-3"></i>
</a>
<a href="https://dribbble.com/mdbootstrap" target="_blank">
<i class="fa fa-dribbble mr-3"></i>
</a>
<a href="https://pinterest.com/mdbootstrap" target="_blank">
<i class="fa fa-pinterest mr-3"></i>
</a>
<a href="https://github.com/mdbootstrap/mdb-ui-kit" target="_blank">
<i class="fa fa-github mr-3"></i>
</a>
<a href="http://codepen.io/mdbootstrap/" target="_blank">
<i class="fa fa-codepen mr-3"></i>
</a>
</div>
<!-- Social icons -->
<!--Copyright-->
<div class="footer-copyright py-3">
© 2018 Copyright:
<a href="https://mdbootstrap.com/education/bootstrap/" target="_blank"> MDBootstrap.com </a>
</div>
<!--/.Copyright-->
As you noticed, nothing has changed and that is the expected result. Now you can navigate to our documentation where you will find a range of different types of footers. Pick the one which suits you most and adjust it to your needs.
Previous lesson Download Live preview Next lesson
Spread the word:
