→ Isaac Winslow
→ Clean Modern Footer Design with Social M...

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.

This bootstrap css example is contributed by Isaac Winslow, on 24-Nov-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Footer

Author Isaac Winslow

5.3k

v.5.3

Fork Fullscreen

<body>
    <footer class="modern-footer pt-5">
        <div class="container footer-content">
            <div class="row g-4 mb-5">
                
                <div class="col-lg-4 col-md-6">
                    <a href="#" class="footer-logo d-block mb-4">
                        YourBrand<span class="text-primary">.</span>
                    </a>
                    <p class="text-muted mb-4">Empowering businesses with innovative digital solutions. We create
                        meaningful experiences that drive success.</p>
                    <ul class="contact-info mb-4">
                        <li>
                            <i class="fas fa-map-marker-alt"></i>
                            <span>123 Business Avenue, Suite 100<br>New York, NY 10001</span>
                        </li>
                        <li>
                            <i class="fas fa-phone"></i>
                            <span>+1 (555) 123-4567</span>
                        </li>
                        <li>
                            <i class="fas fa-envelope"></i>
                            <span>contact@yourbrand.com</span>
                        </li>
                    </ul>
                </div>

<div class="col-lg-4 col-md-6">
                    <h3 class="footer-title">Quick Links</h3>
                    <ul class="quick-links">
                        <li><a href="#">Our Services</a></li>
                        <li><a href="#">About Company</a></li>
                        <li><a href="#">Latest Projects</a></li>
                        <li><a href="#">Recent News</a></li>
                        <li><a href="#">Customer Support</a></li>
                        <li><a href="#">Contact Details</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Terms of Service</a></li>
                    </ul>
                </div>

<div class="col-lg-4 col-md-12">
                    <h3 class="footer-title">Stay Connected</h3>
                    <p class="text-muted mb-4">Subscribe to our newsletter and stay updated with the latest news and
                        insights.</p>
                    <form class="mb-4">
                        <div class="mb-3">
                            <input type="email" class="form-control newsletter-input" placeholder="Your email address">
                        </div>
                        <button type="submit" class="btn btn-subscribe text-white w-100">Subscribe Now</button>
                    </form>
                    <div class="social-links">
                        <a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#" class="social-icon"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
            </div>
        </div>

<div class="footer-bottom">
            <div class="container">
                <div class="row py-4">
                    <div class="col-md-6 text-center text-md-start">
                        <p>&copy; 2024 YourBrand. All rights reserved.</p>
                    </div>
                    <div class="col-md-6 text-center text-md-end">
                        <p>Made with <i class="fas fa-heart text-danger"></i> by <a href="#">YourBrand</a></p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

More Examples

Footer
Simple footer with social icons

Author:
Prajwal Hallale

2 years ago

14.7k

v.5.3
Footer Template with NewsletterForm
Professional footer component with newsletter signup, social media integration, and responsive design built with Bootstrap 5.3.

Author:
Isaac Winslow

1 year ago

5.7k

v.5.3
Simple Footer

Author:
Anonymous

1 year ago

2.9k

v.4.6
Elegant Bootstrap Footer
with social media icons, newsletter forms, and other important links

Author:
Mateo Rojas

1 year ago

4.6k

v.5.3
Bootstrap copyright footer

Author:
Anonymous

1 year ago

4.2k

v.5.3
Basic Footer
Standard footer example with bootstrap 5

Author:
Mateo Rojas

1 year ago

10.1k

v.5.3
Footer
Simple footer with social icons

Author:
Anonymous

8 months ago

2.3k

v.5.3
Footer
Bootstrap CSS footer example

Author:
Prajwal Hallale

1 year ago

2.7k

v.5.3
3213
gg

Author:
L-1485

4 days ago

35

v.4.6
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.

Author:
Alaric Sloane

1 year ago

3.5k

v.5.3
Footer
Footer de Bootstrap con enlaces rápidos, contacto y redes sociales, usando íconos para mejor navegación. Diseño limpio y responsivo. 🚀

Author:
Anonymous

1 year ago

4.6k

v.4.6
Footer example made with Bootstrap 5.3
Dark theme

Author:
Sahadat hossine

2 months ago

567

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent