→ 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

129

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

8 months ago

407

v.5.3
Bootstrap copyright footer

Author:
Anonymous

4 months ago

276

v.5.3
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 month ago

82

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

216

v.4.6
Simple Footer

Author:
Anonymous

8 months ago

284

v.4.6
Footer with social media icons

Author:
Omar Khaled

3 months ago

256

v.5.3
Bootstrap Footer example
dark footer

Author:
Anonymous

7 months ago

363

v.3.4
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 week ago

134

v.5.3
Footer
Bootstrap CSS footer example

Author:
Prajwal Hallale

8 months ago

253

v.5.3
Bootstrap 5 Image Gallery

Author:
Anonymous

4 months ago

398

v.5.3
HTML and CSS for Hero Section
Explanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image

Author:
zobaidul kaziex

2 months ago

182

v.4.6
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

1 week ago

59

v.5.3

Didn't find component you were looking for?

Search from 210+ componenent