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.

Process To Create Materialize Footer

Follow the steps given below to create a footer in materialize CSS.

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

Materialize 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

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

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4