Footer
  • Your browser does not support SVG
  • About
  • Getting Started
    • CSS
      • Color
      • Grid
      • Helpers
      • Media
      • Sass
      • Shadow
      • Table
      • Typography
    • Components
      • Badges
      • Buttons
      • Cards
      • Collections
      • Footer
      • Forms
      • Icons
      • Navbar
      • Preloader
    • JavaScript
      • Collapsible
      • Dialogs
      • Dropdown
      • Media
      • Modals
      • Parallax
      • Pushpin
      • Scrollspy
      • SideNav
      • Tabs
      • Waves
  • Mobile

Footers are a great way to organize a lot of site navigation and information at the end of a page. This is where the user will look once hes finished scrolling through the current page or is looking for additional information about your website.

Introduction

Note: We use flexbox to structure our html so that the footer is always on the bottom of the page. It is important to keep the structure of your page within the 3 HTML5 tags: <header>, <main>, <footer>

Footer Content

You can use rows and columns here to organize your footer content.

Links
  • Link 1
  • Link 2
  • Link 3
  • Link 4
  • © 2014 Copyright Text More Links

    
            <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">You can use rows and columns here to organize your footer content.</p>
                  </div>
                  <div class="col l4 offset-l2 s12">
                    <h5 class="white-text">Links</h5>
                    <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
                    <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
                    <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
                    <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
                  </div>
                </div>
              </div>
              <div class="footer-copyright">
                <div class="container">
                © 2014 Copyright Text
                <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
                </div>
              </div>
            </footer>
                
    • Footer
    Help Materialize Grow

    We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.

    Join the Discussion

    We have a gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.

    Chat
    Connect

    Follow @MaterializeCSS
    © 2014 Materialize, All rights reserved. MIT License