materialize-css/jade/page-contents/footer_content.html

Builds Materialize distribution packages

<div class="container">
  <div class="row">

    <div class="col s12 m9 l10">

    <!--  Footer Section-->
      <div id="footer" class="section scrollspy">
        <p class="caption">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. </p>
        <h2 class="header">Introduction</h2>
        <p>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: <code class="language-markup">&lt;header></code>, <code class="language-markup">&lt;main></code>, <code class="language-markup">&lt;footer></code></p>
        <footer class="page-footer example">
          <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>
        <div class="row">
          <div class="col s12">
            <br>
            <pre><code class="language-markup">
        &lt;footer class="page-footer">
          &lt;div class="container">
            &lt;div class="row">
              &lt;div class="col l6 s12">
                &lt;h5 class="white-text">Footer Content&lt;/h5>
                &lt;p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.&lt;/p>
              &lt;/div>
              &lt;div class="col l4 offset-l2 s12">
                &lt;h5 class="white-text">Links&lt;/h5>
                &lt;ul>
                  &lt;li>&lt;a class="grey-text text-lighten-3" href="#!">Link 1&lt;/a>&lt;/li>
                  &lt;li>&lt;a class="grey-text text-lighten-3" href="#!">Link 2&lt;/a>&lt;/li>
                  &lt;li>&lt;a class="grey-text text-lighten-3" href="#!">Link 3&lt;/a>&lt;/li>
                  &lt;li>&lt;a class="grey-text text-lighten-3" href="#!">Link 4&lt;/a>&lt;/li>
                &lt;/ul>
              &lt;/div>
            &lt;/div>
          &lt;/div>
          &lt;div class="footer-copyright">
            &lt;div class="container">
            © 2014 Copyright Text
            &lt;a class="grey-text text-lighten-4 right" href="#!">More Links&lt;/a>
            &lt;/div>
          &lt;/div>
        &lt;/footer>
            </code></pre>
          </div>
        </div>

      </div> <!-- End of footer section -->

      <div id="sticky-footer" class="section scrollspy">
        <h2 class="header">Sticky Footer</h2>
        <p>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.</p>
        <p>Note: This may cause issues in Internet Explorer which has weak support for flexbox.</p>
      </div>

      <pre><code class="language-css">
  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }
      </code></pre>

    </div>

    <div class="col hide-on-small-only m3 l2">
      <div class="toc-wrapper">
        <div class="buysellads hide-on-small-only">
          <!-- CarbonAds Zone Code -->
          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
        </div>
        <div style="height: 1px;">
          <ul class="section table-of-contents">
            <li><a href="#footer">Footer</a></li>
            <li><a href="#sticky-footer">Sticky Footer</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>