→ Fitar Ahmed
→ fitar footer

fitar footer

do not copy

This bootstrap css example is contributed by Fitar Ahmed, on 15-May-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Footer

Author Fitar Ahmed

803

v.4.6

Fork Fullscreen

<footer class="py-4">
      <div class="container">
        
        <div class="row pt-4 mb-4 text-center text-lg-start">
          <div class="col-12">
            <h5 class="text-muted mb-1" id="date">Loading date...</h5>
            <h2 class="fw-bold text-dark" id="clock">Loading time...</h2>
            <hr class="mt-3">
          </div>
        </div>

<div class="row pt-2 mb-4 mb-lg-5">
          <div class="col-12 col-lg-4 mb-4 mb-lg-0">
            <img alt="Free Frontend Logo" class="img-fluid mb-3" height="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Unsplash_wordmark_logo.svg/960px-Unsplash_wordmark_logo.svg.png?utm_source=commons.wikimedia.org&utm_campaign=index&utm_content=thumbnail&_=20180714164115" width="300">
            <p class="mb-1">Mountain View</p>
            <p class="mb-1">California, United States</p>
            <p class="mb-1">Tel: +1 123-456-7890</p>
            <p class="mb-0"><a class="text-dark text-decoration-none" href="">hello@yourdomain.com</a></p>
            <div class="border-top mt-3 d-lg-none"></div>
          </div>
          <div class="col-6 col-lg-2">
            <h4>Quick Links</h4>
            <ul class="list-unstyled">
              <li class="mb-1"><a class="text-dark text-decoration-none" href="">Home</a></li>
              <li class="mb-1"><a class="text-dark text-decoration-none" href="">About</a></li>
              <li class="mb-1"><a class="text-dark text-decoration-none" href="">Shop</a></li>
              <li class="mb-1"><a class="text-dark text-decoration-none" href="">Contact</a></li>
            </ul>
          </div>
          <div class="col-6 col-lg-2">
            <h4>Useful Info</h4>
            <ul class="list-unstyled">
              <li class="mb-1"><a class="text-dark text-decoration-none" href="">How it Works</a></li>
              <li class="mb-1"><a class="text-dark text-decoration-none" href="">FAQ</a></li>
              <li class="mb-0"><a class="text-dark text-decoration-none" href="">Contacts</a></li>
            </ul>
          </div>
          <div class="col-6 col-lg-2">
            <h4>My Account</h4>
            <ul class="list-unstyled">
              <li class="mb-1"><a class="text-dark text-decoration-none" href="">Get Help</a></li>
              <li class="mb-1"><a class="text-dark text-decoration-none" href="">My Orders</a></li>
              <li class="mb-1"><a class="text-dark text-decoration-none" href="">Track Order</a></li>
            </ul>
          </div>
          <div class="col-6 col-lg-2">
            <h4>Socials</h4>
            <ul class="list-unstyled">
              <li class="mb-1">
                <a class="text-dark text-decoration-none" href=""><svg class="bi bi-pinterest text-primary me-2" fill="currentColor" height="18" viewbox="0 0 16 16" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 0 0-2.915 15.452c-.07-.633-.134-1.606.027-2.297.146-.625.938-3.977.938-3.977s-.239-.479-.239-1.187c0-1.113.645-1.943 1.448-1.943.682 0 1.012.512 1.012 1.127 0 .686-.437 1.712-.663 2.663-.188.796.4 1.446 1.185 1.446 1.422 0 2.515-1.5 2.515-3.664 0-1.915-1.377-3.254-3.342-3.254-2.276 0-3.612 1.707-3.612 3.471 0 .688.265 1.425.595 1.826a.24.24 0 0 1 .056.23c-.061.252-.196.796-.222.907-.035.146-.116.177-.268.107-1-.465-1.624-1.926-1.624-3.1 0-2.523 1.834-4.84 5.286-4.84 2.775 0 4.932 1.977 4.932 4.62 0 2.757-1.739 4.976-4.151 4.976-.811 0-1.573-.421-1.834-.919l-.498 1.902c-.181.695-.669 1.566-.995 2.097A8 8 0 1 0 8 0z"></path></svg> Pinterest</a>
              </li>
              <li class="mb-1">
                <a class="text-dark text-decoration-none" href=""><svg class="bi bi-twitter text-primary me-2" fill="currentColor" height="18" viewbox="0 0 16 16" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path></svg> Twitter</a>
              </li>
              <li class="mb-0">
                <a class="text-dark text-decoration-none" href=""><svg class="bi bi-facebook text-primary me-2" fill="currentColor" height="18" viewbox="0 0 16 16" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"></path></svg> Facebook</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="border-top d-lg-none"></div>
        <div class="d-block d-lg-flex justify-content-between py-3 py-lg-2">
          <div class="small mb-2 mb-lg-0 text-muted">
            © 2023 FreeFrontend.dev. All rights reserved.
          </div>
          <div class="small">
            <a class="d-block d-lg-inline text-muted ms-lg-2 mb-2 mb-lg-0" href="">Privacy Policy</a> <a class="d-block d-lg-inline text-muted ms-lg-2" href="">Terms of Service</a>
          </div>
        </div>
      </div>
    </footer>

More Examples

PlantStore full website

Author:
Zahid Hasan Riyad

1 month ago

237

v.5.3
Clean Modern Footer Design with Social Media
Elegant light-themed footer with interactive elements, newsletter signup, and social media integration built with Bootstrap 5.3.

Author:
Isaac Winslow

1 year ago

6.6k

v.5.3
Footer

Author:
Tanvir fahad

3 months ago

464

v.4.6
about page

Author:
lamiajahan

1 month ago

122

v.4.6
E-Commerce Contact Section

Author:
Creative Araf

2 months ago

199

v.5.3
footer with js

Author:
Huryra

1 month ago

132

v.4.6
footer(date-time)
footer(date-time)

Author:
Mustaq hussin

1 month ago

191

v.4.6
Footer

Author:
DOLA AKTER

3 months ago

321

v.4.6
My site Exm code

Author:
Zahid Hasan Riyad

1 month ago

159

v.5.3
Parsonal PortFolio Full WebSite

Author:
Zahid Hasan Riyad

1 month ago

211

v.5.3
Footer example made with Bootstrap 5.3
Dark theme

Author:
Arturo

1 year ago

10.2k

v.5.3
contact

Author:
lamiajahan

1 month ago

99

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent