Materialize CSS 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 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

     
      <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

     
      <footer class="page-footer">
    <div class="footer-copyright">
    <div class="container"> © copyright Text 
      <a class="grey-text text-lighten-4 right" href="#!">More Custom Links
      </a> 
    </div>
  </div>
</footer>

Try it yourself

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

Materialize CSS Footer

Process To Create Materialize Footer

Footer

Footer Copyright

CSS Code

Web Tutorials