Materialize CSS
  Prev Page
Next Page  
Materialize Footers
Footers are used to organize a lot of site navigation and information at the end of a page. we are adding aditional information like little bit about us, links , subscribe forms, social links icons and copy rights etc,.

page-footer : This footer is used to sets the div container.

footer-copyright : It is used to set the div container as a footer-copyright container.

<footer class="page-footer">
    <div class="row">
      <div class="col l6 m6 s12">
        <h5 class="white-text">About Us</h5>
        <p class="grey-text text-lighten-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
      </div>
      <div class="col l3 m3 s12">
        <h6 class="white-text">Front-End Tutorials</h6>
        <ul>
          <li><a class="grey-text text-lighten-3" href="#!">HTML5</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">CSS3</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">Bootstrap 3</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">Bootstrap 4</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">Material Design</a></li>
        </ul>
      </div>
      <div class="col l3 m3 s12">
        <h6 class="white-text">Back-End Tutorials</h6>
        <ul>
          <li><a class="grey-text text-lighten-3" href="#!">Java</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">Microsoft .NET</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">PHP/MySQL</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">Python</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">Ruby on Rails</a></li>
        </ul>
      </div>
    </div>
  <div class="footer-copyright">
        <div class="col l6 m6 s12">&copy; 2018 Copyright <a class="white-text text-lighten-4" href="http://www.freetimelearning.com/" target="_blank">Free Time Learn</a></div>
        
        <div class="col l6 m6 s12"><a class="grey-text text-lighten-4 right" href="http://www.freetimelearning.com/" target="_blank">Designed By F T L</a></div>
  </div>
</footer>
Output :
Sticky Footer

A sticky footer always stays on the bottom of the page regardless of how little content is on the page. However, this footer will be pushed down if there is a lot of content, so it is different from a fixed footer.

Note: This footer is a weak support(Looking not good) for Internet Explorer and Firefox browsers. 

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

main {
    flex: 1 0 auto;
  }
  Prev Page
Next Page