Footer

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 they have finished scrolling through the current page or are looking for additional information about your website.

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 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>
                                                                                <ul>
                                                                                    <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>
                                                                                </ul>
                                                                            </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>
                                                            
                    

Sticky Footer

A sticky footer always stays on 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 to your CSS file.

                                                            
                                                                body {
                                                                    display: flex;
                                                                    min-height: 100vh;
                                                                    flex-direction: column;
                                                                }
                                                                main {
                                                                    flex: 1 0 auto;
                                                                }