Responsive Footer Design using HTML, CSS & Bootstrap

Responsive Footer Design using HTML, CSS & Bootstrap


In this article, I am going to show you how to create a footer design using HTML and CSS code. In the meantime, I have designed and shown many more types of footer sections. Hope you like this design too. 

It is a complete professional footer design with all kinds of information neatly arranged. Footer credits have been added below. First of all, there is the option of About us where you can give some information about your service or yourself. Below that, I have used icons and links from five social media platforms. Next to it, contact information has been added.

 Where address, email ID, and mobile number are given. Next to that are some links known as footer menus. There are pictures of some projects next to it. Here I have used six pictures. Below is a subscribe form to subscribe to. Where you can subscribe by adding a user name and email id.

 I have used footer credits below all. Where you can use your own copyright. Next to it, I have used important links such as About Us, Contact Us, Privacy Policy, etc. It is a fully responsive design that can be used on any website. I used HTML and CSS code to design this footer design. I used bootstrap programming code to make it responsive.

Footer Design Using HTML, CSS, and Bootstrap

Below I show you the complete step-by-step how I made the design of this footer section. You can use the demo button below the article to watch the live demo. You can also download the source code using the download button. 

If you want to see the complete process of making it step by step, follow the tutorial below. In this tutorial, I have described step by step the programming code that I used to create an element. This tutorial will show you exactly how to design a footer section.

Step 1: Basic structure for footer designs



<!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">
                   
                    <!--Footer About-->

                     <!--Contact Us-->

                        <!--Footer Link-->
                        
                    <!--project Image-->

                </div>
            </div>
            
           <!-- Newswletter -->

            <div class="copyright">
                <div class="container">
                    <div class="row align-items-center">
                        
                      <!--Copy Right-->

                        <!--Footer Menu-->

                    </div>
                </div>
            </div>
        </div>
        <!-- Footer End -->
    </body>
</html>




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;
}


Result:

Step 2: Add about section



<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>




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

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


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


Result:

Step 3: Add contact information

  
<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>




.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;
}


Result:

Step 4: Add important links to the footer section



<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>




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

.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;
}


Result:

Step 5: Add important projects and images



<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>




.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%;
}


Result Code:

Step 6: Add newsletter or subscribe option



<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>




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

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

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

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

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


Result:

Step 7: Add footer link (copyright)


<div class="col-md-6">
                            <div class="copy-text">
                                <p>&copy; <a href="#">Foolish Developer</a>. All Rights Reserved</p>
                            </div>
                        </div>




.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;
}


Result Code:

Step 8: Add footer menu to footer design



<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>




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

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

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

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


Result Code:

Step 9: Make this design responsive



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


I hope you have learned how to make footer designs from this article. I have designed many types of footer sections before. You can see them if you want. I hope you have learned how to make it from this article.







Tags
Foolish Developer

Foolish Developer

Hello, I am shantanu jana a web developer. In this blog, I share tutorials related to web design and development. Here you will find complete step-by-step tutorials and source code. facebook twitter youtube instagram external-link

You may like these posts

Show more