Professional footer design | Custom footer code for websites

Craft a stylish and functional footer using Bootstrap 5, complete with quick links, contact details, and social media icons for seamless navigation.

HTML

<footer id="footer_snippet_1">
        <div class="container">
            <div class="row">
                <div class="col-lg-5">
                    <div class="first_column">
                        <h4>About Us</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi quo dolores blanditiis quibusdam ea velit praesentium alias iusto vel voluptas.</p>
                        <p class="mb-0">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente ipsa pariatur eos esse molestiae earum!</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-5 col-sm-5">
                    <div class="sec_column">
                        <h4>Quick Links</h4>
                        <ul>
                            <li><a href="#0"><i class="bi bi-arrow-right"></i> Home</a></li>
                            <li><a href="#0"><i class="bi bi-arrow-right"></i> About</a></li>
                            <li><a href="#0"><i class="bi bi-arrow-right"></i> Shop</a></li>
                            <li><a href="#0"><i class="bi bi-arrow-right"></i> Services</a></li>
                            <li><a href="#0"><i class="bi bi-arrow-right"></i> Portfolio</a></li>
                            <li><a href="#0"><i class="bi bi-arrow-right"></i> Contact Us</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-4 col-md-7 col-sm-7">
                    <div class="thrd_column">
                        <h4>Contact With Us</h4>
                        <ul class="contact_info">
                            <li><i class="bi bi-geo-alt"></i> <span>Suite 392 5491 Lennie Drive, Monaberg, MA 99225</span></li>
                            <li><i class="bi bi-envelope"></i> <a href="#0" class="">info@yourcompany.com</a></li>
                            <li><i class="bi bi-telephone"></i> <a href="#0" class="">info@yourcompany.com</a></li>
                        </ul>
                        <ul class="social">
                            <li><a href="#0"><i class="bi bi-whatsapp"></i></a></li>
                            <li><a href="#0"><i class="bi bi-facebook"></i></a></li>
                            <li><a href="#0"><i class="bi bi-twitter"></i></a></li>
                            <li><a href="#0"><i class="bi bi-linkedin"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="copyright">
            <div class="container">
                <p class="text-center">Copyright © 2024 Company name. All rights reserved.</p>
            </div>
        </div>
    </footer>

CSS

#footer_snippet_1 {
    background: #1f2528;
    color: #fff;
    padding-top: 100px;
}
#footer_snippet_1 h4 {
    font-size: 24px;
    display: inline-block;
    position: relative;
    font-weight: bold;
    text-transform: capitalize;
    margin-bottom: 30px;
}
#footer_snippet_1 ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#footer_snippet_1 ul li {
    margin-bottom: 10px;
}
#footer_snippet_1 ul li a {
    text-decoration: none;
    color: #fff;
    transition: all 0.4s;
}
#footer_snippet_1 ul li a:hover {
    color: #8d4f26;
}
#footer_snippet_1 ul li a i {
    padding-right: 10px;
}
#footer_snippet_1 .contact_info li {
    display: flex;
    align-items: center;
}
#footer_snippet_1 .contact_info li i {
    flex: 0 0 30px;
    font-size: 20px;
    margin-right: 10px;
}
#footer_snippet_1 .social {
    display: flex;
    margin-top: 30px;
}
#footer_snippet_1 .social li {
    margin-bottom: 0;
    margin-right: 10px;
}
#footer_snippet_1 .social li a {
    width: 35px;
    height: 35px;
    background-color: #fff;
    border-radius: 50%;
    color: #000;
    line-height: 35px;
    display: block;
    text-align: center;
}
#footer_snippet_1 .social li a i {
    padding: 0;
    color: #8d4f26;
    height: 100%;
    display: list-item;
}
#footer_snippet_1 .copyright {
    background: rgba(0, 0, 0, 0.3);
    padding: 30px 0;
    margin-top: 70px;
}
#footer_snippet_1 .copyright p {
    margin-bottom: 0;
}
@media (max-width: 991px) {
    #footer_snippet_1 .first_column {
        margin-bottom: 30px;
    }
    #footer_snippet_1 {
        padding-top: 50px;
    }
}
@media (max-width: 575.9px) {
    #footer_snippet_1 .sec_column {
        margin-bottom: 30px;
    }
}

JS

Width:

Height:

Discover the ideal footer design for your website with our expertly crafted footer snippet. This customizable footer includes a stylish layout with sections for 'About Us,' 'Quick Links,' and 'Contact Us,' ensuring seamless navigation and accessibility. With built-in social media icons, your visitors can easily connect with you across various platforms. The footer’s modern design, combined with responsive styling for different devices, enhances user experience and improves site functionality. Perfect for businesses, e-commerce sites, and portfolios, this footer solution integrates effortlessly with Bootstrap for a professional finish. Feel free to tailor this to better suit your needs or highlight additional features!