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.
Follow the steps given below to create a footer in materialize CSS.
.page-footer
class is used to set the div container as a footer..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>
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>
Source Code: Output
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.
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>
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>
Source Code: Output