Footer

These components are the bottom sections of websites or applications that provide users with helpful links, legal information, contact details, and other important resources.

Overview

"Footer" components are the bottom sections of websites or applications that provide users with helpful links, legal information, contact details, and other important resources. Often consistent across pages, footers help with navigation, reinforce branding, and include elements like social media icons, newsletter signups, or copyright notices to enhance user experience and accessibility.

Examples

Below are a few examples of “Footer” sections.

Example 1

<footer class="py-5">
  <div class="container">
      <ul class="nav justify-content-center border-bottom pb-3 mb-3">
          <li class="nav-item"><a href="#" class="nav-link text-body-secondary px-2">Home</a></li>
          <li class="nav-item"><a href="#" class="nav-link text-body-secondary px-2">About</a></li>
          <li class="nav-item"><a href="#" class="nav-link text-body-secondary px-2">Pricing</a></li>
          <li class="nav-item"><a href="#" class="nav-link text-body-secondary px-2">FAQs</a></li>
          <li class="nav-item"><a href="#" class="nav-link text-body-secondary px-2">Contact</a></li>
      </ul>
      <p class="text-center text-body-secondary">© 2025 Your Company, Inc</p>
  </div>
</footer>

Example 2

<footer class="border-top py-5">
  <div class="container">
      <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-5">
          <div class="col mb-3">
              <a href="/" class="d-inline-flex align-items-center text-decoration-none mb-2" aria-label="Your Company Logo">
                  <img src="/assets/images/logo.svg" alt="Your Company Logo" style="width: 32px; height: 32px;" class="me-2">
                  <span class="fs-5 fw-medium text-body">Your Company</span>
              </a>
              <span class="text-muted d-block">© 2025 Your Company. All rights reserved.</span>
          </div>

          <div class="col mb-3">
          </div>

          <div class="col mb-3">
              <h5 class="mb-3">Quick Links</h5>
              <ul class="nav flex-column">
                  <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">Home</a></li>
                  <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">About</a></li>
                  <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">Pricing</a></li>
                  <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">FAQs</a></li>
              </ul>
          </div>

          <div class="col mb-3">
              <h5 class="mb-3">Legal</h5>
              <ul class="nav flex-column">
                  <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">Terms of Use</a></li>
                  <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">Privacy Policy</a></li>
                  <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">Cookies Policy</a></li>
                  <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">EULA</a></li>
              </ul>
          </div>

          <div class="col mb-3">
              <h5 class="mb-3">Contact</h5>
              <ul class="nav flex-column">
                  <li class="nav-item text-body-secondary mb-2">
                      <i class="ri-phone-fill text-primary me-2"></i>
                      <a href="tel:+12345678901" class="text-body-secondary text-decoration-none text-break">+1 (234) 567-8901</a>
                  </li>
                  <li class="nav-item text-body-secondary mb-2">
                      <i class="ri-mail-fill text-primary me-2"></i>
                      <a href="mailto:hello@email.com" class="text-body-secondary text-decoration-none text-break">hello@email.com</a>
                  </li>
                  <li class="nav-item text-body-secondary mb-2">
                      <i class="ri-map-pin-fill text-primary me-2"></i>123 Main Street, London, UK
                  </li>
              </ul>
          </div>
      </div>
  </div>

</footer>

Example 3

<footer class="py-5">
<div class="container">
  <div class="row">
      <div class="col-sm-6 col-lg-2 mb-3">
      <h5 class="mb-3">Quick Links</h5>
      <ul class="nav flex-column">
          <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">Home</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">About</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">Pricing</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">FAQs</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">Contact</a></li>
      </ul>
      </div>

      <div class="col-sm-6 col-lg-2 mb-3">
      <h5 class="mb-3">Support</h5>
      <ul class="nav flex-column">
          <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">Documentation</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">Report a Bug</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">Help Center</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">Contact Us</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">Community</a></li>
      </ul>
      </div>

      <div class="col-sm-6 col-lg-2 mb-3">
      <h5 class="mb-3">Legal</h5>
      <ul class="nav flex-column">
          <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">Terms of Use</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">Privacy Policy</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">Cookies Policy</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link text-body-secondary p-0">EULA</a></li>
      </ul>
      </div>

      <div class="col-lg-5 offset-lg-1 mb-3">
      <form>
          <h5 class="mb-3">Newsletter</h5>
          <p class="text-body-secondary mb-3">Subscribe to our newsletter for the latest updates.</p>
          <div class="d-flex flex-column flex-sm-row w-100 gap-2">
              <input type="email" class="form-control" placeholder="Email address">
              <button class="btn btn-primary" type="button">Subscribe</button>
          </div>
      </form>
      </div>
  </div>

  <div class="text-center border-top pt-4 mt-4">
      <p class="text-body-secondary mb-0">© 2025 Your Company, Inc. All rights reserved.</p>
  </div>

</div>
</footer>

Example 4

Your Company Logo Your Company

We're trusted by over 200 clients — partner with us and see the difference.

Phone

+1 (234) 567-8901

Email

hello@email.com

Address

123 Main Street,
London, UK

© 2025 Your Company, Inc. All rights reserved.

<footer class="py-5">
<div class="container">
  <div class="row">
      <div class="col-lg-5 mb-3">
          <a href="/" class="d-inline-flex align-items-center text-decoration-none mb-2" aria-label="Your Company Logo">
              <img src="/assets/images/logo.svg" alt="Your Company Logo" style="width: 32px; height: 32px;" class="me-2">
              <span class="fs-5 fw-medium text-body">Your Company</span>
          </a>
          <p class="text-body-secondary mb-3">We're trusted by over 200 clients — partner with us and see the difference.</p>
          <button class="btn btn-primary">Join Us<i class="ri-arrow-right-line ms-2"></i></button>
      </div>

      <div class="col-6 col-lg-2 offset-lg-1 mb-3">
          <i class="ri-phone-fill text-primary fs-2 mb-2"></i>
          <h6 class="mb-2">Phone</h6>
          <p class="text-muted mb-0"><a href="tel:+12345678901" class="text-muted text-decoration-none">+1 (234) 567-8901</a></p>
      </div>

      <div class="col-6 col-lg-2 mb-3">
          <i class="ri-mail-fill text-primary fs-2 mb-2"></i>
          <h6 class="mb-2">Email</h6>
          <p class="text-muted mb-0"><a href="mailto:hello@email.com" class="text-muted text-decoration-none text-break">hello@email.com</a></p>
      </div>

      <div class="col-6 col-lg-2 mb-3">
          <i class="ri-map-pin-fill text-primary fs-2 mb-2"></i>
          <h6 class="mb-2">Address</h6>
          <p class="text-muted mb-0">123 Main Street, <br />London, UK</p>
      </div>

  </div>

  <div class="text-center border-top pt-4 mt-4">
      <p class="text-body-secondary mb-0">© 2025 Your Company, Inc. All rights reserved.</p>
  </div>

</div>
</footer>
Quick Links
Home Docs
Admin
Admin Dashboard Example
Themes
Website Example (Classic)
Website Example (Modern)
Dog Breeder 1 (Beagle)
Dog Breeder 2 (Golden Retriever)
Dog Breeder 3 (French Bulldog)
Dog Breeder 4 (Poodle)
Dog Breeder 5 (German Shepherd)
Dog Breeder 6 (Yorkshire Terrier)
Cat Breeder 1 (Persian)
Cat Breeder 2 (Siamese)
Cat Breeder 3 (Bengal)
Cat Breeder 4 (Abyssinian)
Cat Breeder 5 (Himalayan)
HOA 1
HOA 2
HOA 3
Real Estate 1
Real Estate 2
Other
AsteroBuilder
AsteroDigital
Paanstation