→ 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.4k

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

Simple Footer

Author:
Anonymous

2 years ago

4.2k

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

10.5k

v.4.6
PlantStore full website

Author:
Zahid Hasan Riyad

1 month ago

240

v.5.3
contact

Author:
lamiajahan

1 month ago

100

v.4.6
Footer example made with Bootstrap 5.3
Dark theme

Author:
Arturo

1 year ago

10.2k

v.5.3
Footer

Author:
istiakahmedchowdhury10

1 month ago

174

v.4.6
Footer
footer

Author:
Faysal

1 month ago

204

v.4.6
Liberation war Archive WDD

Author:
Anonymous

2 months ago

607

v.4.6
E-com Cart Page

Author:
Creative Araf

1 month ago

79

v.5.3
Personal Portfolio Index

Author:
Creative Araf

2 months ago

214

v.5.3
fitar footer
do not copy

Author:
Fitar Ahmed

3 months ago

805

v.4.6
Elon Musk
nav and footer

Author:
RAHAT RAHMAN OFICIAL

3 months ago

364

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent