Stylish and Functional Footer Design for Modern Websites

Design a clean, centered footer using Bootstrap 5. This snippet features a logo, navigation menu, and social media icons with smooth hover effects.

HTML

<footer id="footer_snippet_3">
        <div class="container">
            <div class="content">
                <div class="logo">
                    <img src="https://freewebsnippets.com/public/frontend/img/logo.svg" alt="">
                </div>
                <ul class="menu">
                    <li><a href="#0" class="active">Home</a></li>
                    <li><a href="#0" class="">About</a></li>
                    <li><a href="#0" class="">Services</a></li>
                    <li><a href="#0" class="">Portfolio</a></li>
                    <li><a href="#0" class="">Contact</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-x"></i></a></li>
                    <li><a href="#0"><i class="bi bi-linkedin"></i></a></li>
                </ul>
                <div class="copyright">
                    <p class="text-center">Copyright © 2024 Company name. All rights reserved.</p>
                </div>
            </div>
        </div>
    </footer>

CSS

#footer_snippet_3 {
    text-align: center;
    padding: 70px 0;
    background: #f5f5f5;
}
#footer_snippet_3 .logo img {
    max-width: 120px;
    filter: invert(1);
}
#footer_snippet_3 .menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}
#footer_snippet_3 .menu li a {
    color: #000;
    text-transform: capitalize;
    margin: 0 10px;
    text-decoration: none;
    transition: all 0.4s;
}
#footer_snippet_3 ul.menu li a.active {
    color: #ff2a00;
}
#footer_snippet_3 .menu li a:hover {
    color: #ff2a00;
}
#footer_snippet_3 ul.social {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
#footer_snippet_3 ul.social li a {
    width: 40px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.18);
    color: #000;
    display: list-item;
    margin-right: 10px;
    transition: all 0.4s;
    border-radius: 5px;
}
#footer_snippet_3 ul.social li:last-child a {
    margin-right: 0;
}
#footer_snippet_3 ul.social li a:hover {
    background-color: #ff2a00;
    color: #fff;
}
#footer_snippet_3 .copyright p {
    margin-bottom: 0;
    margin-top: 30px;
}

JS

Width:

Height:

Upgrade your website with our stylish and functional footer design. Featuring a centrally aligned logo, interactive navigation menu, and vibrant social media icons, this footer offers both visual appeal and practicality. The flexible menu allows for easy access to key sections such as Home, About, Services, and Contact, while the social media links facilitate connection with your audience. Designed with a modern aesthetic and responsive layout, this footer ensures a seamless user experience across all devices. Ideal for businesses and personal sites looking for a professional touch with interactive elements.