→ Arturo
→ Footer example made with Bootstrap 5.3

Footer example made with Bootstrap 5.3

Dark theme

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

Tags: Footer

Author Arturo

10.1k

v.5.3

Fork Fullscreen

<footer class="bg-dark text-light py-5">
    <div class="container">
        <div class="row g-4">
            
            <div class="col-lg-4 col-md-6">
                <h5 class="mb-4">About Us</h5>
                <p class="mb-4">We are dedicated to providing innovative solutions that help businesses grow and succeed
                    in the digital age.</p>
                <div class="social-links">
                    <a href="#" class="social-icon bg-primary"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social-icon bg-info"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="social-icon bg-danger"><i class="fab fa-instagram"></i></a>
                    <a href="#" class="social-icon bg-primary"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>

<div class="col-lg-2 col-md-6">
                <h5 class="mb-4">Quick Links</h5>
                <ul class="list-unstyled">
                    <li class="mb-2"><a href="#" class="footer-link">Home</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">About</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Services</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Portfolio</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Contact</a></li>
                </ul>
            </div>

<div class="col-lg-2 col-md-6">
                <h5 class="mb-4">Services</h5>
                <ul class="list-unstyled">
                    <li class="mb-2"><a href="#" class="footer-link">Web Design</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Development</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Marketing</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Consulting</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Analytics</a></li>
                </ul>
            </div>

<div class="col-lg-4 col-md-6">
                <h5 class="mb-4">Contact Info</h5>
                <ul class="list-unstyled">
                    <li class="mb-3">
                        <i class="fas fa-map-marker-alt me-2"></i>
                        123 Business Street, New York, NY 10001
                    </li>
                    <li class="mb-3">
                        <i class="fas fa-phone me-2"></i>
                        <a href="tel:+1234567890" class="footer-link">+1 (234) 567-890</a>
                    </li>
                    <li class="mb-3">
                        <i class="fas fa-envelope me-2"></i>
                        <a href="mailto:contact@example.com" class="footer-link">contact@example.com</a>
                    </li>
                </ul>
            </div>
        </div>

<div class="row mt-5">
            <div class="col-12">
                <hr class="mb-4">
                <div class="text-center">
                    <p class="mb-0">&copy; 2024 Your Company. All rights reserved.</p>
                </div>
            </div>
        </div>
    </div>
</footer>
=

More Examples

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

6.7k

v.4.6
E-com Product Detail Page

Author:
Creative Araf

1 month ago

90

v.5.3
from validation
do not copy

Author:
Fitar Ahmed

3 months ago

829

v.4.6
Portfolio Full Website

Author:
Zahid Hasan Riyad

3 weeks ago

182

v.5.3
Parsonal PortFolio Full WebSite

Author:
Zahid Hasan Riyad

3 weeks ago

168

v.5.3
E-Commerce Contact Section

Author:
Creative Araf

1 month ago

184

v.5.3
Restaurant Home Page

Author:
Creative Araf

1 month ago

105

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

1 year ago

10.4k

v.4.6
E-com Product Page

Author:
Creative Araf

1 month ago

67

v.5.3
Footer

Author:
DOLA AKTER

3 months ago

306

v.4.6
Footer

Author:
istiakahmedchowdhury10

1 month ago

164

v.4.6
Coffee website
coffee website

Author:
Faysal

1 month ago

124

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent