Materialize CSS Footer

Materialize Footer

Materialize CSS footer component is used at the end of the web page and it is used to organize a lot of site navigation, and information at the end of a page.

Process To Create Materialize Footer

Follow the given below steps to create materialize CSS footer component.

  • Add the .page-footer class to the <footer> element base class.
    Footer
       
     <footer class="page-footer"></footer>
         
  • Place all the copyright information inside the container having class the .footer-copyright.
    Footer Copyright
        
    <footer class="page-footer">
      <div class="footer-copyright"></div>
    </footer>
         

General Syntax

<footer class="page-footer">
  <div class="footer-copyright"></div>
</footer>    
Try It Now

Source Code

Download
<footer class="page-footer">
  <div class="container">
    <div class="row">
      <div class="col l6 s12">
        <h5 class="white-text">Footer Content</h5>
      </div>
      <div class="col l4 offset-l2 s12">
        <h5 class="white-text">Custom Links</h5>
        <ul>
          <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer-copyright">
    <div class="container">
      © 2021 Copyright Text
      <a class="grey-text text-lighten-4 right" href="#!">More Custom Links</a>
    </div>
  </div>
</footer>    
Try it yourself

Source Code : Output

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

  main {
    flex: 1 0 auto;
  } 
     

Source Code : Output

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS