→ 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

6.5k

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

E-Commerce Cart Section

Author:
Creative Araf

1 month ago

190

v.5.3
Restaurant Signup Page

Author:
Creative Araf

1 month ago

47

v.5.3
Footer example made with Bootstrap 5.3
Dark theme

Author:
Arturo

1 year ago

10.1k

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

7.1k

v.5.3
Footer

Author:
DOLA AKTER

3 months ago

299

v.4.6
fitar footer
do not copy

Author:
Fitar Ahmed

3 months ago

795

v.4.6
about page

Author:
lamiajahan

3 weeks ago

96

v.4.6
Personal Portfolio Service Section

Author:
Creative Araf

1 month ago

236

v.5.3
My site Exm code

Author:
Zahid Hasan Riyad

3 weeks ago

117

v.5.3
Contact_All_Contanet

Author:
Sahin Miah

3 months ago

350

v.4.6
Personal Portfolio --Portfolio Section

Author:
Creative Araf

1 month ago

231

v.5.3
Restaurant Home Page

Author:
Creative Araf

1 month ago

102

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent