Bootstrap Snippet Bootstrap Footer - Material Design & Bootstrap 4 using HTML CSS Bootstrap

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

4.0.0 footer material design

22.1K 12 Fav

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>  <body class="hm-gradient"> <main>  <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>  <div class="row">  <div class="col-md-12 mb-4">  <footer class="page-footer blue text-center text-md-left mt-0">  <div class="container-fluid"> <div class="row">  <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>   <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>  </div> </div>   <div class="footer-copyright"> <div class="container-fluid"> © 2015 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a> </div> </div>  </footer>  </div>  </div>   <div class="row">  <div class="col-md-12 mb-4">  <footer class="page-footer center-on-small-only stylish-color-dark">  <div class="container"> <div class="row">  <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>  <hr class="clearfix w-100 d-md-none">  <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>  <hr class="clearfix w-100 d-md-none">  <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>  <hr class="clearfix w-100 d-md-none">  <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>  </div> </div>  <hr>  <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>   <div class="footer-copyright"> <div class="container-fluid"> © 2017 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a> </div> </div>  </footer>  </div>  </div>   <div class="row">  <div class="col-md-12">  <footer class="page-footer deep-purple center-on-small-only pt-0">  <div class="container">  <div class="row pt-5 mb-3 text-center d-flex justify-content-center">  <div class="col-md-2 mb-3"> <h6 class="title font-bold"><a href="#!">About us</a></h6> </div>   <div class="col-md-2 mb-3"> <h6 class="title font-bold"><a href="#!">Products</a></h6> </div>   <div class="col-md-2 mb-3"> <h6 class="title font-bold"><a href="#!">Awards</a></h6> </div>   <div class="col-md-2 mb-3"> <h6 class="title font-bold"><a href="#!">Help</a></h6> </div>   <div class="col-md-2 mb-3"> <h6 class="title font-bold"><a href="#!">Contact</a></h6> </div>  </div>  <hr class="rgba-white-light" style="margin: 0 15%;">  <div class="row d-flex text-center justify-content-center mb-md-0 mb-4">  <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>  </div>  <hr class="clearfix d-md-none rgba-white-light" style="margin: 10% 15% 5%;">  <div class="row pb-3">  <div class="col-md-12"> <div class="footer-socials mb-5 flex-center">  <a class="icons-sm fb-ic"><i class="fa fa-facebook fa-lg white-text mr-md-4"> </i></a>  <a class="icons-sm tw-ic"><i class="fa fa-twitter fa-lg white-text mx-md-4"> </i></a>  <a class="icons-sm gplus-ic"><i class="fa fa-google-plus fa-lg white-text mx-md-4"> </i></a>  <a class="icons-sm li-ic"><i class="fa fa-linkedin fa-lg white-text mx-md-4"> </i></a>  <a class="icons-sm ins-ic"><i class="fa fa-instagram fa-lg white-text mx-md-4"> </i></a>  <a class="icons-sm pin-ic"><i class="fa fa-pinterest fa-lg white-text ml-md-4"> </i></a> </div> </div>  </div>  </div>   <div class="footer-copyright"> <div class="container-fluid"> © 2016 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a> </div> </div>  </footer>  </div>  </div>  <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>  </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; }

Questions / Comments:

Posting GuidelinesFormatting