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
The .page-footer class is used to set the div container as a footer.
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

Materialize CSS Footer

Process To Create Materialize Footer

Sticky Footer

Add the following code inside your CSS file

Web Tutorials