Footer Design using HTML and CSS

Open In Editor Publish Your Code

<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3">
            <h6 class="text-uppercase mb-4 font-weight-bold">Services</h6>
            <p><a href="#" class="text-white">Web Development</a></p>
            <p><a href="#" class="text-white">App Development</a></p>
            <p><a href="#" class="text-white">Digital Marketing</a></p>
            <p><a href="#" class="text-white">Brand Strategy</a></p>
          </div>

<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">
            <h6 class="text-uppercase mb-4 font-weight-bold">Quick Links</h6>
            <p><a href="#" class="text-white">Contact Us</a></p>
            <p><a href="#" class="text-white">FAQs</a></p>
            <p><a href="#" class="text-white">Privacy Policy</a></p>
            <p><a href="#" class="text-white">Terms of Service</a></p>
          </div>

<div class="col-md-4 col-lg-4 col-xl-3 mx-auto mt-3">
            <h6 class="text-uppercase mb-4 font-weight-bold">Get in Touch</h6>
            <p><i class="fas fa-map-marker-alt"></i> Los Angeles, CA, USA</p>
            <p><i class="fas fa-envelope"></i> support@yourdomain.com</p>
            <p><i class="fas fa-phone"></i> +1 800 123 4567</p>
            <p><i class="fas fa-fax"></i> +1 800 987 6543</p>
          </div>
        </div>
      </section>

<section class="p-3 pt-0">
        <div class="row d-flex align-items-center">
          
          <div class="col-md-6 col-lg-8 text-center text-md-start">
            <h6>Follow Us</h6>
            <a href="#" class="btn btn-outline-light btn-floating m-1"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="btn btn-outline-light btn-floating m-1"><i class="fab fa-twitter"></i></a>
            <a href="#" class="btn btn-outline-light btn-floating m-1"><i class="fab fa-linkedin-in"></i></a>
            <a href="#" class="btn btn-outline-light btn-floating m-1"><i class="fab fa-instagram"></i></a>
          </div>

<div class="col-md-6 col-lg-4 text-center text-md-end">
            <p class="m-0">© 2025 YourCompany. All rights reserved.</p>
          </div>
        </div>
      </section>
    </div>
    
  </footer>
</div>

Footer Design using HTML and CSS

Recommended

CSS Glowing Buttons

Gradient Login Form HTML CSS

How to Create a Grid Sidebar in CSS

HTML

CSS

JS

Recommended

CSS Glowing Buttons

Gradient Login Form HTML CSS

How to Create a Grid Sidebar in CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS