Footer

Best Practices

• Use the Basic Footer if the product only needs a few links.
• Use the Utility Footer is the product needs more advanced features.

Usage

Basic Footer

<footer class="footer footer-basic" id="FooterNavigation">
  <div class="container-fluid">
    <nav class="links-wrapper" aria-label="Footer Links">
      <a class="btn btn-link" href="#">Home</a>
      <a class="btn btn-link" href="#">More Info</a>
      <a class="btn btn-link" href="#">Privacy</a>
    </nav>
  </div>
</footer>

Utility Footer

<footer class="footer footer-utility ">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <a class="brand-link" href="#">
          <div class="brand-logo"><img src="/img/ots-logo.png" class="img-fluid" alt="Office of Technology Services Logo">
</div>
        </a>
      </div>
    </div>
    <hr class="major">
    <div class="row align-items-center">
      <div class="col-12 col-md-6 text-center text-md-left text-md-start">
          <a href="#" class="btn btn-accent">
            <span class="icon fas fa-envelope me-1" aria-hidden="true"></span>Email Us
          </a>
          <a href="#" class="btn btn-accent">
            <span class="icon fas fa-phone me-1" aria-hidden="true"></span>Call Us
          </a>
      </div>
      <div class="col-12 col-md-6 text-center text-md-right text-md-end">
        <p class="lead mb-0">
          <a href="#" class="btn btn-link">
            <span class="icon fab fa-facebook-square fa-2x" aria-hidden="true"></span>
            <span class="visually-hidden">Find us on Facebook</span>
          </a>
          <a href="#" class="btn btn-link">
            <span class="icon fab fa-twitter-square fa-2x" aria-hidden="true"></span>
            <span class="visually-hidden">Find us on Twitter</span>
          </a>
          <a href="#" class="btn btn-link">
            <span class="icon fab fa-linkedin fa-2x" aria-hidden="true"></span>
            <span class="visually-hidden">find us on LinkedIn</span>
          </a>
        </p>
      </div>
    </div>
    <hr class="major">
    <div class="row">
      <div class="col-12">
        <a href="https://github.com/la-ots/pelican" class="btn btn-link">Pelican</a>
        <a href="https://www.doa.la.gov/Pages/ots/Index.aspx" class="btn btn-link">Office of Technology Services</a>
        <a href="https://gov.louisiana.gov" class="btn btn-link">Louisiana.gov</a>
      </div>
    </div>
    <hr class="major">
  </div>
</footer>