→ Mateo Rojas
→ Elegant Bootstrap Footer

Elegant Bootstrap Footer

with social media icons, newsletter forms, and other important links

This bootstrap css example is contributed by Mateo Rojas, on 21-Dec-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Footer

Author Mateo Rojas

5.3k

v.5.3

Fork Fullscreen

<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 footer-section">
                <div class="footer-logo">CompanyName</div>
                <p class="footer-about">We are dedicated to providing the best service to our customers. Our mission
                    is to create innovative solutions that make a difference in people's lives.</p>
                <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>
                </div>
            </div>

<div class="col-lg-2 col-md-6 footer-section">
                <h5>Quick Links</h5>
                <ul class="footer-links">
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Careers</a></li>
                </ul>
            </div>

<div class="col-lg-2 col-md-6 footer-section">
                <h5>Support</h5>
                <ul class="footer-links">
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#">Help Center</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Terms of Service</a></li>
                    <li><a href="#">Contact Support</a></li>
                </ul>
            </div>

<div class="col-lg-4 footer-section">
                <h5>Newsletter</h5>
                <p class="footer-about">Subscribe to our newsletter for updates, news, and exclusive offers.</p>
                <div class="footer-newsletter">
                    <input type="email" placeholder="Enter your email">
                    <button class="newsletter-btn">
              <i class="fas fa-paper-plane"></i>
            </button>
                </div>
            </div>
        </div>

<div class="footer-bottom">
            <ul class="footer-bottom-links">
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Terms of Service</a></li>
                <li><a href="#">Cookie Policy</a></li>
            </ul>
            <p>© 2024 CompanyName. All rights reserved.</p>
        </div>
    </div>
</footer>

More Examples

E-Commerce Checkout Section

Author:
Creative Araf

3 weeks ago

110

v.5.3
Restaurant Reservation section

Author:
Creative Araf

6 days ago

36

v.5.3
home page

Author:
lamiajahan

1 day ago

40

v.4.6
E-Commerce index

Author:
Creative Araf

3 weeks ago

115

v.5.3
E-Commerce Product Detail Page

Author:
Creative Araf

3 weeks ago

116

v.5.3
fitar footer
do not copy

Author:
Fitar Ahmed

2 months ago

758

v.4.6
Footer

Author:
DOLA AKTER

2 months ago

245

v.4.6
about page

Author:
lamiajahan

1 day ago

17

v.4.6
E-Commerce Cart Section

Author:
Creative Araf

3 weeks ago

123

v.5.3
Plant

Author:
Code Bro io

3 days ago

16

v.5.3
footer(date-time)
footer(date-time)

Author:
Mustaq hussin

19 hours ago

32

v.4.6
Form validation by donald trump
form validation

Author:
Faysal

1 day ago

33

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent