December 15, 2016

Materialize Footer

Materialize Footer – Footer is an important part of any website, it contains useful information and navigation. Here in this tutorial we are going to explain how you can create Footer in Materialize. You can also use our online editor to edit and run the code online.

Materialize Footer Example

Let us create a simple footer in Materialize-

Materialize Footer Example:

  <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">This is test content.</p>
              </div>
              <div class="col l4 offset-l2 s12">
                <h5 class="white-text">Links Section</h5>
                <ul>
                  <li><a class="grey-text text-lighten-3" href="#!">About Us</a></li>
                  <li><a class="grey-text text-lighten-3" href="#!">Careers</a></li>
                  <li><a class="grey-text text-lighten-3" href="#!">Contact</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="footer-copyright">
            <div class="container">
            © 2016 Copyright Info Text Here
            <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
            </div>
         </div>
    </footer>

Try it »

If you run the above example it will produce output something like this –

Sticky Footer

Sometimes we need sticky footer which always stays on the bottom of the page. To create the sticky footer add the following css –

Materialize Sticky Example

   body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }