Responsive Footer bootstrap 5 with no CSS | Elegant Footer with Social Media Icon

how to create a responsive and elegant footer with sleek social media icons using Bootstrap 5.

Responsive Footer bootstrap 5 with no CSS | Elegant Footer with Social Media Icon

In this step-by-step guide, you’ll learn how to create a responsive and elegant footer with sleek social media icons using Bootstrap 5. The footer is one of the most important parts of any website—it gives users quick access to important links, contact details, and social media platforms. With Bootstrap 5, you can design a footer that is not only modern and minimal but also looks professional across all devices.

We’ll walk through the process of building a clean and stylish footer layout using only Bootstrap 5, without writing any extra CSS. The footer will include:

A brand or short about section
Quick navigation links
Contact information
Social media icons (Facebook, Twitter, Instagram, LinkedIn, etc.)

By the end of this guide, you’ll have a fully responsive Bootstrap footer that adapts perfectly to mobile, tablet, and desktop screens.

Let's design a Footer using Bootstrap 5 only.

Write HTML:

                            
                                <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Elegant Responsive Footer using Bootstrap 5</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.13.1/font/bootstrap-icons.min.css" integrity="sha512-t7Few9xlddEmgd3oKZQahkNI4dS6l80+eGEzFQiqtyVYdvcSG2D3Iub77R20BdotfRPA9caaRkg1tyaJiPmO0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body class="bg-light d-flex flex-column min-vh-100">

  <main class="flex-fill"></main>

    <footer class="bg-white shadow mt-auto">
      <div class="container py-5">
          <div class="row">
            <div class="col-md-3 mb-4">
              <h6 class="fw-bold text-uppercase mb-3">About Us</h6>
              <p class="small text-muted">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi fugiat unde consectetur vero vitae hic, maxime provident minima? Perferendis, aspernatur.</p>
            </div>
            <div class="col-md-3 mb-4">
              <h6 class="fw-bold text-uppercase mb-3">Let Us Help</h6>
              <ul class="list-unstyled small">
                <li><a href="#" class="text-decoration-none text-muted d-block mb-2">Your Account</a></li>
                <li><a href="#" class="text-decoration-none text-muted d-block mb-2">Your Order</a></li>
                <li><a href="#" class="text-decoration-none text-muted d-block mb-2">Manage Your content</a></li>
                <li><a href="#" class="text-decoration-none text-muted d-block ">Help</a></li>
              </ul>
            </div>
            <div class="col-md-3 mb-4">
                <h6 class="fw-bold text-uppercase mb-3">Make Money</h6>
                <ul class="list-unstyled small">
                  <li><a href="#" class="text-decoration-none text-muted d-block mb-2">Sell On Our Website</a></li>
                  <li><a href="#" class="text-decoration-none text-muted d-block mb-2">Advertise Your Products</a></li>
                  <li><a href="#" class="text-decoration-none text-muted d-block mb-2">Become an affiliate</a></li>
                  <li><a href="#" class="text-decoration-none text-muted d-block">Self Publish</a></li>
                </ul>
            </div>
            <div class="col-md-3 mb-4">
                <h6 class="fw-bold text-uppercase mb-3">Contact</h6>
                <ul class="list-unstyled small text-muted">
                  <li class="mb-2"><i class="bi bi-house-door-fill me-2"></i>Karachi,Pakistan</li>
                  <li class="mb-2"><i class="bi bi-envelope-fill me-2"></i>theproviders98@gmail.com</li>
                  <li class="mb-2"><i class="bi bi-telephone-fill me-2"></i>+923162859445</li>
                  <li ><i class="bi bi-printer-fill me-2"></i>+923162859445</li>
                </ul>
            </div>
          </div>

          <hr class="border-secondary-subtle">

          <div class="text-center">
            <p class="small text-muted mb-1">
              Copyright &copy; 2025 All Rights Reserved by <a href="#" class="text-decoration-none text-primary">The Providers</a>
            </p>
            <div class="d-flex justify-content-center gap-3">
              <a href="#" class="text-muted"><i class="bi bi-facebook"></i></a>
              <a href="#" class="text-muted"><i class="bi bi-twitter"></i></a>
              <a href="#" class="text-muted"><i class="bi bi-github"></i></a>
              <a href="#" class="text-muted"><i class="bi bi-linkedin"></i></a>
              <a href="#" class="text-muted"><i class="bi bi-youtube"></i></a>
            </div>
          </div>

      </div>
    </footer>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

</body>
</html>

Download Code Files