The Footer in Materialize based Projects

You should use HTML 5 <footer> tag with page-footer class for creating footer component on your website that is based on Materialize framework.

The footer section generally contains content and navigational links that go across the website.

The following section shows examples with markup for creating simple and sticky footers using Materialize CSS classes.

An example of the simple footer with content and links

In this example, a footer is created with informational content and links. The bottom in footer contains copyright text where you may add more links.

materialize footer

See online demo and code

The markup:

The following classes are used related to the footer:

  • The <footer> tag is assigned the page-footer
  • For the copyright text, the footer-copyright class is used.
  • Besides, the required grid, color etc. classes are used as per the requirement.

Changing the style of footer demo

The default color for Materialize footer is reddish. If you want to change it as per requirement then you may override the existing page-footer class that specifies the background color of the footer along with text color and padding.

See the following example where I changed the properties in page-footer class for customizing the footer:

materialize footer custom

See online demo and code

The CSS used in the <style> section:

The demo of sticky footer

The sticky footer is the one that stays at the bottom. For large content, the materialize footer is pushed down; so it is different than the fixed footer.

For creating sticky footer in Materialize, use CSS in your web page as used in the example below:

materialize footer sticky

See online demo and code

See the complete code on the example page. There you can see, the footer sticks at the bottom as the content is smaller.

Note: You must use the <main> tag in order to make sticky footer work. In the example, you can see I just used it to fulfill the requirement of Materialize CSS, otherwise, it did not contain any content.