DEV Community

loading...
Cover image for Responsive Footer Section Design with HTML, CSS & Bootstrap

Responsive Footer Section Design with HTML, CSS & Bootstrap

sonali_roy profile image Sonali Roy ・5 min read

In this article, I am going to show you how to create a footer design using HTML and CSS code.
In simple language, the footer is a section or full box which exists at the bottom of any type of webpages with important hyperlinks, information, and message or subscribe box. Footer is the most important section for all the websites. Footer can be depended upon the types of the webpage.

As you can see on the image which is given on the webpage. There are various important topics there like About us, Our services and subscribes, some social media icons, and a contact section for easy connection. I want to tell you that it is fully responsive. Responsive means this program is fit in all screen devices like tablet, small screen laptop, or mobile devices.

I used HTML and CSS code to design this footer design. I used bootstrap programming code to make it responsive. You can watch the live demo of this footer section.

HTML Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bootstrap Footer Template</title>
        <meta content="width=device-width, initial-scale=1.0" name="viewport">

        <!-- Libraries -->
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">

        <!-- Stylesheet -->
        <link href="css/footer-4.css" rel="stylesheet">
    </head>

    <body>
        <!-- Footer Start -->
        <div class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-lg-3">
                        <div class="footer-about">
                            <h3>About Us</h3>
                            <p>
                                Lorem ipsum dolor sit amet elit. Quisque eu lectus a leo dictum nec non quam. Tortor eu placerat rhoncus, lorem quam iaculis felis, sed lacus neque id eros
                            </p>
                            <div class="footer-social">
                                <a href=""><i class="fab fa-twitter"></i></a>
                                <a href=""><i class="fab fa-facebook-f"></i></a>
                                <a href=""><i class="fab fa-youtube"></i></a>
                                <a href=""><i class="fab fa-instagram"></i></a>
                                <a href=""><i class="fab fa-linkedin-in"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="footer-contact">
                            <h3>Get In Touch</h3>
                            <p><i class="fa fa-map-marker-alt"></i>123 Street, New York, USA</p>
                            <p><i class="fa fa-phone-alt"></i>+012 345 67890</p>
                            <p><i class="fa fa-envelope"></i>info@example.com</p>
                            <p><i class="far fa-clock"></i>Mon - Fri, 9AM - 10PM</p>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="footer-links">
                            <h3>Useful Links</h3>
                            <a href="">Lorem ipsum</a>
                            <a href="">tempus posuere </a>
                            <a href="">velit id accumsan</a>
                            <a href="">ut porttitor</a>
                            <a href="">Nam pretium</a>
                            <a href="">accumsan</a>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="footer-project">
                            <h3>Latest Projects</h3>
                            <a href=""><img src="img/img-1.jpg" alt="Image"></a>
                            <a href=""><img src="img/img-2.jpg" alt="Image"></a>
                            <a href=""><img src="img/img-3.jpg" alt="Image"></a>
                            <a href=""><img src="img/img-4.jpg" alt="Image"></a>
                            <a href=""><img src="img/img-5.jpg" alt="Image"></a>
                            <a href=""><img src="img/img-6.jpg" alt="Image"></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container footer-newsletter">
                <p>
                    Lorem ipsum dolor sit amet elit. Quisque eu lectus a leo dictum nec non quam. Tortor eu placerat rhoncus, lorem quam iaculis felis, sed lacus neque id eros 
                </p>
                <div class="row form">
                    <div class="col-sm-4">
                        <input class="form-control" placeholder="Your Name">
                    </div>
                    <div class="col-sm-4">
                        <input class="form-control" placeholder="Your Email">
                    </div>
                    <div class="col-sm-4">
                        <button class="btn">Subscribe</button>
                    </div>
                </div>
            </div>
            <div class="copyright">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <div class="copy-text">
                                <p>&copy; <a href="#">Foolish Developer</a>. All Rights Reserved</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="copy-menu">
                                <a href="">About</a>
                                <a href="">Terms</a>
                                <a href="">Privacy</a>
                                <a href="">Contact</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer End -->
    </body>
</html>

Enter fullscreen mode Exit fullscreen mode

CSS Code:


body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #ffffff;
}

a {
    transition: .3s;
}

a:hover,
a:active,
a:focus {
    outline: none;
    text-decoration: none;
}

.footer {
    position: relative;
    padding-top: 45px;
    background: #121518;
}

.footer .footer-about,
.footer .footer-contact,
.footer .footer-links,
.footer .footer-project {
    position: relative;
    margin-bottom: 45px;
    color: #999999;
}

.footer .footer-about h3,
.footer .footer-contact h3,
.footer .footer-links h3,
.footer .footer-project h3 {
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
    color: #eeeeee;
}

.footer .footer-about h3::after,
.footer .footer-contact h3::after,
.footer .footer-links h3::after,
.footer .footer-project h3::after {
    position: absolute;
    content: "";
    width: 50px;
    height: 2px;
    left: 0;
    bottom: 0;
    background: #eeeeee;
}

.footer .footer-social {
    position: relative;
    margin-top: 20px;
}

.footer .footer-social a {
    display: inline-block;
    width: 35px;
    height: 35px;
    padding: 6px 0;
    text-align: center;
    color: #999999;
    font-size: 14px;
    border: 1px solid #999999;
    border-radius: 35px;
}

.footer .footer-social a:hover {
    color: #ffffff;
    background: #0085ff;
    border-color: #0085ff;
}

.footer .footer-contact p {
    margin-bottom: 10px;
    font-size: 16px;
    color: #999999;
}

.footer .footer-contact i {
    margin-right: 10px;
    font-size: 16px;
    color: #999999;
}

.footer .footer-contact a:last-child i {
    margin: 0;
}

.footer .footer-contact a:hover i {
    color: #0085ff;
}

.footer .footer-links a {
    display: block;
    margin-bottom: 6px;
    padding-left: 15px;
    color: #999999;
}

.footer .footer-links a:last-child {
    margin: 0;
}

.footer .footer-links a:hover {
    color: #0085ff;
}

.footer .footer-links a::before {
    position: absolute;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    left: 0;
}

.footer .footer-project {
    float: left;
    font-size: 0;
}

.footer .footer-project a {
    padding: 0 8px 8px 0;
    display: block;
    width: 33.33%;
    float: left;
}

.footer .footer-project a img {
    width: 100%;
}

.footer .footer-newsletter {
    margin-bottom: 35px;
    max-width: 700px;
    text-align: center;
    color: #999999;
}

.footer .footer-newsletter input {
    height: 35px;
    border: none;
    border-radius: 5px;
    background: rgba(256, 256, 256, .15);
    margin-bottom: 15px;
}

.footer .footer-newsletter .btn {
    display: block;
    width: 100%;
    height: 35px;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    color: #ffffff;
    background: #e9414a;
    border-radius: 5px;
    border: none;
    transition: .3s;
}

.footer .footer-newsletter .btn:hover {
    color: #0085ff;
    background: #ffffff;
}

.footer .footer-newsletter .btn:focus {
    box-shadow: none;
}


.footer .copyright {
    position: relative;
    padding: 25px 0;
    background: #000000;
}

.footer .copyright .copy-text p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: #999999;
}

.footer .copyright .copy-text p a {
    color: #0085ff;
    text-decoration: none;
}

.footer .copyright .copy-text p a:hover {
    color: #ff008c;
}

.footer .copyright .copy-menu {
    position: relative;
    font-size: 0;
    text-align: right;
}

.footer .copyright .copy-menu a {
    color: #999999;
    font-size: 16px;
    font-weight: 400;
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, .3);
}

.footer .copyright .copy-menu a:hover {
    color: #0085ff;
}

.footer .copyright .copy-menu a:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}

@media (max-width: 767.98px) {
    .footer .copyright .copy-text,
    .footer .copyright .copy-menu {
        text-align: center;
    }

    .footer .copyright .copy-text p {
        margin-bottom: 5px;
    }

}

Enter fullscreen mode Exit fullscreen mode

Discussion (0)

Forem Open with the Forem app