Materialize CSS Footer

Every website has a footer section that exists at the end of the page and Materialize CSS footer is basically used to organize a lot of site navigation information at the end of the web page.

Let us discuss some classes that are used during footer formation.

Process To Create Materialize Footer

  1. The .page-footer class is used to set the div container as a footer.
  2. The .footer-copyright is used to set the div container as a footer-copyright container.

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 now

Source Code: Output

Sticky Footer

A sticky footer always stays at 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.

Add the following code inside your CSS file

body { display: flex; min-height: 100vh; flex-direction: column; } main { flex: 1 0 auto; }

General Syntax

      <footer class="page-footer">
  <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 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>
        <p class="grey-text text-lighten-4">Write your footer content here.</p>
      </div>
    </div>
  </div>
  <div class="footer-copyright">
    <div class="container">© 2014 Copyright Text 
      <a class="grey-text text-lighten-4 right" href="#!">More Custom Links</a></div>
  </div>
</footer>
        
Try it now

Source Code: Output

Footer Content

Write your footer content here.

Web Tutorials

Materialize CSS Footer
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4