"Bootstrap Footer - Material Design & Bootstrap 4"
Bootstrap 4.0.0 Snippet by MDBootstrap

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body class="hm-gradient"> <main> <!--MDB Footers--> <div class="container mt-4"> <div class="text-center darken-grey-text mb-4"> <h1 class="font-bold mt-4 mb-3 h5">Built with Material Design for Bootstrap 4</h1> <a class="btn btn-danger btn-md" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">Free download<i class="fa fa-download pl-2"></i></a> </div> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-12 mb-4"> <!--Footer--> <footer class="page-footer blue text-center text-md-left mt-0"> <!--Footer Links--> <div class="container-fluid"> <div class="row"> <!--First column--> <div class="col-md-6"> <h5 class="title mb-3">Footer Content</h5> <p>Here you can use rows and columns here to organize your footer content.</p> </div> <!--/.First column--> <!--Second column--> <div class="col-md-6"> <h5 class="title mb-3">Links</h5> <ul> <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> <!--/.Second column--> </div> </div> <!--/.Footer Links--> <!--Copyright--> <div class="footer-copyright"> <div class="container-fluid"> © 2015 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a> </div> </div> <!--/.Copyright--> </footer> <!--/.Footer--> </div> <!-- Grid column --> </div> <!-- Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-12 mb-4"> <!--Footer--> <footer class="page-footer center-on-small-only stylish-color-dark"> <!--Footer Links--> <div class="container"> <div class="row"> <!--First column--> <div class="col-md-4"> <h5 class="title mb-4 mt-3 font-bold">Footer Content</h5> <p>Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <!--/.First column--> <hr class="clearfix w-100 d-md-none"> <!--Second column--> <div class="col-md-2 mx-auto"> <h5 class="title mb-4 mt-3 font-bold">Links</h5> <ul> <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> <!--/.Second column--> <hr class="clearfix w-100 d-md-none"> <!--Third column--> <div class="col-md-2 mx-auto"> <h5 class="title mb-4 mt-3 font-bold">Links</h5> <ul> <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> <!--/.Third column--> <hr class="clearfix w-100 d-md-none"> <!--Fourth column--> <div class="col-md-2 mx-auto"> <h5 class="title mb-4 mt-3 font-bold ">Links</h5> <ul> <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> <!--/.Fourth column--> </div> </div> <!--/.Footer Links--> <hr> <!--Call to action--> <div class="call-to-action"> <ul> <li> <h5 class="mb-1">Register for free</h5> </li> <li><a href="" class="btn btn-danger btn-rounded">Sign up!</a></li> </ul> </div> <!--/.Call to action--> <!--Copyright--> <div class="footer-copyright"> <div class="container-fluid"> © 2017 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a> </div> </div> <!--/.Copyright--> </footer> <!--/.Footer--> </div> <!-- Grid column --> </div> <!-- Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-12"> <!--Footer--> <footer class="page-footer deep-purple center-on-small-only pt-0"> <!--Footer Links--> <div class="container"> <!--Grid row--> <div class="row pt-5 mb-3 text-center d-flex justify-content-center"> <!--Grid column--> <div class="col-md-2 mb-3"> <h6 class="title font-bold"><a href="#!">About us</a></h6> </div> <!--Grid column--> <!--Grid column--> <div class="col-md-2 mb-3"> <h6 class="title font-bold"><a href="#!">Products</a></h6> </div> <!--Grid column--> <!--Grid column--> <div class="col-md-2 mb-3"> <h6 class="title font-bold"><a href="#!">Awards</a></h6> </div> <!--Grid column--> <!--Grid column--> <div class="col-md-2 mb-3"> <h6 class="title font-bold"><a href="#!">Help</a></h6> </div> <!--Grid column--> <!--Grid column--> <div class="col-md-2 mb-3"> <h6 class="title font-bold"><a href="#!">Contact</a></h6> </div> <!--Grid column--> </div> <!--Grid row--> <hr class="rgba-white-light" style="margin: 0 15%;"> <!--Grid row--> <div class="row d-flex text-center justify-content-center mb-md-0 mb-4"> <!--Grid column--> <div class="col-md-8 col-12 mt-5"> <p style="line-height: 1.7rem">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur.</p> </div> <!--Grid column--> </div> <!--Grid row--> <hr class="clearfix d-md-none rgba-white-light" style="margin: 10% 15% 5%;"> <!--Grid row--> <div class="row pb-3"> <!--Grid column--> <div class="col-md-12"> <div class="footer-socials mb-5 flex-center"> <!--Facebook--> <a class="icons-sm fb-ic"><i class="fa fa-facebook fa-lg white-text mr-md-4"> </i></a> <!--Twitter--> <a class="icons-sm tw-ic"><i class="fa fa-twitter fa-lg white-text mx-md-4"> </i></a> <!--Google +--> <a class="icons-sm gplus-ic"><i class="fa fa-google-plus fa-lg white-text mx-md-4"> </i></a> <!--Linkedin--> <a class="icons-sm li-ic"><i class="fa fa-linkedin fa-lg white-text mx-md-4"> </i></a> <!--Instagram--> <a class="icons-sm ins-ic"><i class="fa fa-instagram fa-lg white-text mx-md-4"> </i></a> <!--Pinterest--> <a class="icons-sm pin-ic"><i class="fa fa-pinterest fa-lg white-text ml-md-4"> </i></a> </div> </div> <!--Grid column--> </div> <!--Grid row--> </div> <!--/Footer Links--> <!--Copyright--> <div class="footer-copyright"> <div class="container-fluid"> © 2016 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a> </div> </div> <!--/Copyright--> </footer> <!--/Footer--> </div> <!-- Grid column --> </div> <!-- Grid row --> <hr class="my-4"> <div class="text-center darken-grey-text mb-4"> <h3 class="font-bold mb-3">Here you can find more Footers:</h3> <a class="btn btn-danger" href="https://mdbootstrap.com/components/bootstrap-footer/" target="_blank">Bootstrap footers</a> </div> </div> <!--MDB Footers--> </main> </body>
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); @import url(https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css); .hm-gradient { background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%); } .darken-grey-text { color: #2E2E2E; }

Related: See More

Vue Paper Dashboard
Bootstrap 4 Footer Design
Bootstrap Dual Design Registration Form
Team Design Section with Pure CSS Effect

Questions / Comments: