→ Alaric Sloane
→ Gradient Footer Component

Gradient Footer Component

A modern, responsive footer component with a smooth gradient background, social icons, quick links, and newsletter subscription - perfect for contemporary web applications.

This bootstrap css example is contributed by Alaric Sloane, on 02-Nov-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Footer

Author Alaric Sloane

v.5.3

Fork Fullscreen

<footer class="gradient-footer text-white py-5">
  <div class="container">
    <div class="row g-4">
      
      <div class="col-lg-4">
        <h5 class="fw-bold mb-3">FlowSpace</h5>
        <p class="opacity-75">Creating beautiful digital experiences with modern design solutions for forward-thinking
          companies.</p>
        <div class="d-flex gap-2 mt-4">
          <a href="#" class="social-icon">
            <svg width="18" height="18" fill="white" viewBox="0 0 24 24">
              <path
                d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
            </svg>
          </a>
          <a href="#" class="social-icon">
            <svg width="18" height="18" fill="white" viewBox="0 0 24 24">
              <path
                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
            </svg>
          </a>
          <a href="#" class="social-icon">
            <svg width="18" height="18" fill="white" viewBox="0 0 24 24">
              <path
                d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
            </svg>
          </a>
        </div>
      </div>

<div class="col-lg-2 col-md-4">
        <h6 class="fw-bold mb-3">Quick Links</h6>
        <ul class="list-unstyled">
          <li class="mb-2"><a href="#" class="footer-link">About Us</a></li>
          <li class="mb-2"><a href="#" class="footer-link">Services</a></li>
          <li class="mb-2"><a href="#" class="footer-link">Portfolio</a></li>
          <li class="mb-2"><a href="#" class="footer-link">Contact</a></li>
        </ul>
      </div>

<div class="col-lg-2 col-md-4">
        <h6 class="fw-bold mb-3">Resources</h6>
        <ul class="list-unstyled">
          <li class="mb-2"><a href="#" class="footer-link">Blog</a></li>
          <li class="mb-2"><a href="#" class="footer-link">Documentation</a></li>
          <li class="mb-2"><a href="#" class="footer-link">Support</a></li>
          <li class="mb-2"><a href="#" class="footer-link">Privacy Policy</a></li>
        </ul>
      </div>

<div class="col-lg-4">
        <h6 class="fw-bold mb-3">Newsletter</h6>
        <p class="opacity-75">Stay updated with our latest news and updates.</p>
        <div class="input-group mt-3">
          <input type="email" class="form-control newsletter-input" placeholder="Enter your email">
          <button class="btn btn-light px-4" type="button">Subscribe</button>
        </div>
      </div>
    </div>

<div class="row align-items-center">
      <div class="col-md-6 text-center text-md-start">
        <small class="opacity-75">© 2024 FlowSpace. All rights reserved.</small>
      </div>
      <div class="col-md-6 text-center text-md-end mt-3 mt-md-0">
        <a href="#" class="footer-link me-3"><small>Terms</small></a>
        <a href="#" class="footer-link me-3"><small>Privacy</small></a>
        <a href="#" class="footer-link"><small>Cookies</small></a>
      </div>
    </div>
  </div>
</footer>

More Examples

Footer
Bootstrap CSS footer example

Author:
Prajwal Hallale

7 months ago

215

v.5.3
Footer
Simple footer with social icons

Author:
Prajwal Hallale

7 months ago

361

v.5.3
Footer with social media icons

Author:
Omar Khaled

2 months ago

205

v.5.3
Responsive footer using HTML and Bootstrap:
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects. How to Use: Create an error.html file and paste the above code into it. Place the error.html file in your web server’s error pages directory or configure your server to serve this file on error.

Author:
zobaidul kaziex

2 months ago

168

v.4.6
Simple Footer

Author:
Anonymous

7 months ago

251

v.4.6
Bootstrap Footer example
dark footer

Author:
Anonymous

7 months ago

323

v.3.4
Bootstrap copyright footer

Author:
Anonymous

3 months ago

248

v.5.3
About us section
about us section with image

Author:
Kemaya m

7 months ago

227

v.4.6
Testimonial carousel

Author:
Sofia Petrova

3 months ago

283

v.5.3
Bootstrap homepage with background color, hover effects, animations, and shadows added to enhance the design
Features Added: Background Gradient: A smooth gradient background using linear-gradient. Card Shadow and Hover Effect: The card now lifts up with a shadow (box-shadow) and smooth transition (transform) on hover. Button Customization: A custom round button with hover color change. Animation: The card content animates with a "fade-in-up" effect using keyframe animation.

Author:
zobaidul kaziex

2 months ago

854

v.4.6
CTA block
Beautiful CTA section with a form

Author:
Ross Wille

3 months ago

215

v.4.6
Interactive Team Member Card with Flip Effect

Author:
Reza Farhadi

2 months ago

193

v.5.3

Didn't find component you were looking for?

Search from 200+ componenent