Footer

Footers give visitors a place to find useful links, learn about your project, and decide what to do next. Try these responsive layouts and copy the markup into your own page.

Multi-column footer

Group a short introduction with navigation and resource links. The columns stack on smaller screens.

<footer class="page-footer footer-bordered mt-0 px-4 pt-4">
  <div class="row">
    <div class="s12 m6">
      <h5 class="mt-0">Made with kmaterialize</h5>
      <p class="on-surface-variant-text">Build thoughtful interfaces with responsive components and Material themes.</p>
    </div>
    <div class="s6 m3">
      <h6 class="mt-0">Explore</h6>
      <ul>
        <li><a href="getting-started.html">Get started</a></li>
        <li><a href="cards.html">Components</a></li>
        <li><a href="themes.html">Themes</a></li>
      </ul>
    </div>
    <div class="s6 m3">
      <h6 class="mt-0">Resources</h6>
      <ul>
        <li><a href="about.html">About</a></li>
        <li><a href="icons.html">Icons</a></li>
        <li><a href="helpers.html">Layout helpers</a></li>
      </ul>
    </div>
  </div>
  <div class="footer-copyright screen-flex screen-wrap">
    <span>© 2026 Your team</span>
    <a href="about.html">About this project</a>
  </div>
</footer>

Compact footer

A simple copyright row for applications and smaller sites. Links wrap naturally when the available space is limited.

<footer class="page-footer footer-bordered mt-0 px-4 pt-0">
  <div class="footer-copyright screen-flex screen-wrap">
    <span class="mr-3">© 2026 Your product</span>
    <nav aria-label="Compact footer links">
      <ul class="screen-flex screen-wrap m-0">
        <li class="mr-3"><a href="about.html">About</a></li>
        <li><a href="getting-started.html">Documentation</a></li>
      </ul>
    </nav>
  </div>
</footer>

Centered footer

Use a centered layout for a small brand statement and a short set of links. Surface color utilities follow the active theme.

<footer class="page-footer footer-bordered center-align surface-variant on-surface-variant-text mt-0 p-4">
  <i class="material-icons" aria-hidden="true">landscape</i>
  <h5 class="mt-2">A little room to explore</h5>
  <p class="on-surface-variant-text">Components, ideas, and tools for your next project.</p>
  <nav aria-label="Centered footer links">
    <ul class="screen-flex screen-center-x screen-wrap">
      <li class="mx-2"><a href="cards.html">Discover</a></li>
      <li class="mx-2"><a href="timeline.html">Timeline</a></li>
      <li class="mx-2"><a href="about.html">Our story</a></li>
    </ul>
  </nav>
  <small>© 2026 Your team. Made with care.</small>
</footer>

Call-to-action footer

Give visitors a clear next step with a Material button and a primary-container background.

<footer class="page-footer footer-bordered primary-container on-primary-container-text mt-0 p-4">
  <div class="row">
    <div class="s12 m7">
      <h5 class="mt-0">Ready to build something?</h5>
      <p class="on-primary-container-text">Start with the essentials, then make every component your own.</p>
    </div>
    <div class="s12 m5 screen-flex screen-center-y">
      <crazy-button type="extended" variant="filled" size="normal" label="Get started" href="getting-started.html"></crazy-button>
    </div>
  </div>
  <div class="footer-copyright screen-flex screen-wrap">
    <span class="mr-3">Built for your next idea</span>
    <a href="themes.html">Explore themes</a>
  </div>
</footer>

Sticky footer

Keep the footer at the bottom of a short page while allowing long content to push it down. The example below uses a 320px preview area. On a real page, use a full-height flex column around your header, main content, and footer.

Your website

A short page

The content grows to fill the available space above the footer.

<div class="screen-flex screen-direction-y-asc surface-variant" style="min-height: 320px;">
  <div class="p-3"><strong>Your website</strong></div>
  <div class="element-flex-grow-1 p-3">
    <h5 class="mt-0">A short page</h5>
    <p>The content grows to fill the available space above the footer.</p>
  </div>
  <footer class="page-footer footer-bordered surface mt-0 px-3 pt-0">
    <div class="footer-copyright screen-flex screen-wrap">
      <span>© 2026 Your team</span>
      <a href="getting-started.html">Get started</a>
    </div>
  </footer>
</div>

For a complete page, use this structure and apply the following layout CSS. The footer stays in the normal document flow and does not cover the content.

<body>
  <header>Site navigation</header>
  <main>Page content</main>
  <footer class="page-footer footer-bordered mt-0">Footer content</footer>
</body>

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

body > main {
  flex: 1 0 auto;
}

body > header,
body > footer {
  flex-shrink: 0;
}

Sticky and fixed footer

Keep useful actions at the bottom of the viewport with footer-layout footer-fixed. The main area scrolls, and the footer reserves its actual height so it never covers the last line of content. Remove footer-fixed for a sticky footer that follows long content.

Use the Crazy Button controls to switch modes and add content. You can also open the full-page example. This demonstrates the sticky and fixed modes named in the reference pen.

<body class="footer-layout footer-fixed">
  <header>Site navigation</header>
  <main>
    <!-- Your page content scrolls here. -->
  </main>
  <footer class="page-footer footer-bordered surface-variant px-4 pt-0">
    <div class="footer-copyright screen-flex screen-wrap">
      <span>© 2026 Your team</span>
      <crazy-button type="extended" variant="filled" size="normal"
          label="Get started" href="getting-started.html"></crazy-button>
    </div>
  </footer>
</body>

Both layout classes belong on the page wrapper or body, with header, main, and footer as direct children. The default height is the viewport; set --footer-layout-height for an embedded layout. No JavaScript is needed for positioning. Load kmaterialize JavaScript to register crazy-button.

Choosing a footer

Use a multi-column footer for several navigation groups, a compact footer for a small application, or a centered footer for a short closing message. Keep link labels descriptive and give each navigation group an accessible label.

The footer layouts use kmaterialize classes and need no initialization. Add footer-bordered for the visible outline shown in these examples. Load kmaterialize JavaScript to register crazy-button for the call-to-action example. mt-0 removes the default space above a footer; padding utilities control its inner spacing. Pair background and text colors, such as primary-container on-primary-container-text, and resize the page or switch themes to preview each layout.

Multi-column footer
Compact footer
Centered footer
Call to action
Sticky footer
Sticky and fixed
Choosing a footer

Materialize is a modern responsive CSS framework based on Material Design by Google.