Modern Footer Design with Social Icons and Payment Options

Create a fully responsive footer using Bootstrap 5, featuring social media icons, payment method logos, a centered logo, and a sleek, modern design.

HTML

CSS

#footer_snippet_5 {
    padding-top: 100px;
    background-color: #282828;
    color: #fff;
}
#footer_snippet_5 .top_column {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 30px;
}
#footer_snippet_5 .top_column .logo img {
    width: 120px;
}
#footer_snippet_5 .top_column .logo {
    flex: 0 0 33.33%;
    text-align: center;
}
#footer_snippet_5 .social {
    flex: 0 0 33.33%;
}
#footer_snippet_5 .social .icon {
    margin: 0 10px;
    display: inline-block;
}
#footer_snippet_5 .payment-icon {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 0 0 33.33%;
    justify-content: flex-end;
}
#footer_snippet_5 .payment-icon li {
    margin-left: 20px;
}
#footer_snippet_5 .payment-icon li a {
    display: block;
}
#footer_snippet_5 .payment-icon li img {
    width: 50px;
}
#footer_snippet_5 ul.menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 30px 0;
    flex-wrap: wrap;
}
#footer_snippet_5 ul.menu li a {
    text-transform: capitalize;
    color: #fff;
    text-decoration: none;
    margin: 0 10px;
    transition: all 0.4s;
}
#footer_snippet_5 ul.menu li a:hover {
    color: #ff9801;
}
#footer_snippet_5 .copyright p {
    opacity: 0.7;
    padding-bottom: 70px;
    padding-top: 20px;
    margin: 0;
}
@media (max-width: 991px) {
    #footer_snippet_5 .payment-icon li img {
        width: 40px;
    }
}
@media (max-width: 767.9px) {
    #footer_snippet_5 .top_column {
        flex-wrap: wrap;
    }
    #footer_snippet_5 .top_column .logo {
        order: -1;
    }
    #footer_snippet_5 .payment-icon,
    #footer_snippet_5 .social {
        flex: 0 0 50%;
    }
    #footer_snippet_5 .top_column .logo {
        flex: 0 0 100%;
        margin-bottom: 30px;
    }
    #footer_snippet_5 {
        padding-top: 50px;
    }
    #footer_snippet_5 .copyright p {
        padding-bottom: 50px;
    }
}
@media (max-width: 576px) {
    #footer_snippet_5 .payment-icon,
    #footer_snippet_5 .social {
        flex: 0 0 100%;
        justify-content: center;
    }
    #footer_snippet_5 .social {
        margin-bottom: 30px;
    }
    #footer_snippet_5 .social {
        text-align: center;
    }
}

JS

Width:

Height:

Upgrade your website’s footer with this contemporary design featuring a central logo, prominent social media icons, and a selection of payment method icons. This footer layout is crafted for both aesthetics and functionality, providing users with easy access to essential links and social platforms. The design is responsive, ensuring a seamless experience across all devices. Ideal for e-commerce and business websites looking to combine form and function in their site’s footer.