Footer#

• Spectre.css
• Layout
• Footer

Footer is a document page footer that includes a flexbox-based responsive grid system with 12 columns.

Add the .footer class to a container div or footer, add the element inside with the .columns class. And add any element you want with the column class inside the container. These columns will take up the space equally. You can specify the width of each column by adding class col-<1-12>.

<footer class="footer footer-lg">
  <div class="columns">
    <div class="column col-3 text-center">
      <a href="" target="_blank">Portfolio</a>
    </div>
    <div class="column col-3 text-center">
      <a href="" target="_blank">About</a>
    </div>
    <div class="column col-3 text-center">
      <a href="" target="_blank">Pricing</a>
    </div>
    <div class="column col-3 text-center">
      <a href="" target="_blank">Contact</a>
    </div>
  </div>
  <div class="divider divider-no-border divider-xs"></div>
  <div class="columns">
    <div class="column col-12 text-center">
      Be sure to take a look at our 
      <a href="">Terms</a> of Use and <a href="">Privacy Policy</a>
    </div>
  </div>
</footer>

Footer - columns#

Add the list to each element with the column class to have footer.

<footer class="footer footer-lg">
  <div class="columns">
    <div class="column col-3 col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-4">
      <h5 class="text-gray-dark">Documentation</h5>
      <ul>
        <li><a href="" target="_blank">Getting started</a></li>
        <li><a href="" target="_blank">Elements</a></li>
        <li><a href="" target="_blank">Layout</a></li>
        <li><a href="" target="_blank">Components</a></li>
        <li><a href="" target="_blank">Utilities</a></li>
        <li><a href="" target="_blank">Experimentals</a></li>
      </ul>
    </div>
    <div class="column col-3 col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-4">
      <h5 class="text-gray-dark">Project</h5>
      <ul>
        <li>
          <a href="https://angular-package.dev/ui-kit/dashboard" target="_blank">
            <i class="mr-1 fa-solid fa-fw fa-shield"></i> Demonstration</a>
          </li>
        <li>
          <a href="https://www.npmjs.com/package/@angular-package/spectre.css" target="_blank">
            <i class="mr-1 fa-brands fa-fw fa-npm"></i> npm</a>
          </li>
        <li>
          <a href="https://github.com/angular-package/spectre.css" target="_blank">
            <i class="mr-1 fa-brands fa-fw fa-github"></i> GitHub</a>
          </li>
      </ul>
    </div>
    <div class="column col-3 col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-4">
      <h5 class="text-gray-dark">Community</h5>
      <ul>
        <li>
          <a href="https://gettr.com/user/angularpackage" target="_blank">
            <i class="mr-1 fa-solid fa-fw fa-broom"></i> Gettr
          </a>
        </li>
        <li>
          <a href="https://twitter.com/angularpackage" target="_blank">
            <i class="mr-1 fa-brands fa-fw fa-twitter"></i> Twitter</a>
          </li>
        <li>
          <a href="https://twitter.com/angularpackage" target="_blank">
            <i class="mr-1 fa-brands fa-fw fa-youtube"></i> YouTube</a>
          </li>
        <li>
          <a href="https://discord.com/channels/925168966098386944/998970323607228436" target="_blank">
            <i class="mr-1 fa-brands fa-fw fa-discord"></i> Discord</a>
          </li>
        <li>
          <a href="https://gitter.im/angularpackage/Lobby" target="_blank">
            <i class="mr-1 fa-brands fa-fw fa-gitter"></i> Gitter</a>
          </li>
      </ul>
    </div>
    <div class="column col-3 col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-4">
      <h5 class="text-gray-dark">Donate</h5>
      <ul>
        <li><a href="https://www.paypal.me/picturepan2" target="_blank">
          <i class="mr-1 fa-brands fa-fw fa-paypal"></i> PayPal Yan Zhu</a>
        </li>
        <li>
          <a href="https://www.patreon.com/spectrecss" target="_blank">
            <i class="mr-1 fa-brands fa-fw fa-patreon"></i> Patreon Yan Zhu</a>
          </li>
        <li>
          <a href="https://spectrecss.angular-package.dev/donate/usd-fiat" target="_blank">
            <i class="mr-1 fa-solid fa-fw fa-dollar-sign"></i> angular package
          </a>
        </li>
      </ul>
    </div>
  </div>
</footer>

• layout - Previous
  Flexbox grid
• Next - layout
  Hero