HomeHTML & CSSResponsive Bootstrap Footer using HTML and CSS

Responsive Bootstrap Footer using HTML and CSS

Bootstrap FooterResponsive Bootstrap Footer using HTML & CSS

Stylish and Fully Responsive Bootstrap Footer using HTML & CSS with hover effects. The Footer menu is a very important part of any website. It contains important pages like about, contact, terms and policy of that website. It is the section that is located at the bottom of every webpage and it has mostly used links. The main function of the bootstrap footer is to make user’s work easier, simple and convenient for a fast movement from one site page to another site page. We just need a footer to make our web page complete and to make users can work fast. 

As you can see in the top bootstrap footer image, there are some sections of the footer with a newsletter subscribe form, short about description, useful links, copyrights part, and some social media sharing icons like Facebook, Youtube, Twitter, Pinterest, and Instagram. This footer is fully user-friendly and responsive for all devices including iPhones, tabs, and mobile phones. On the pc, these footer sections are aligned in horizontal form but when you open it on small devices like iPhones small mobile phones, each section of the footer is aligned in vertical form and it shall automatically adjust its total width and height according to the device width and height.

Responsive Bootstrap Footer (Source Code)

 First of all, you need to create two files for the program (Responsive Bootstrap Footer). After creating these files just paste the following below shared codes in your these created files. To create the project, add two links and two script files in the head section of HTML code. then,

First, create an HTML file with the name of index.html and paste the given codes into your HTML file. must Remember, you have to create a file name with an extension .html. It’s a very important point that you need to know.

Second, create a CSS file with the file name style.css and move the all given CSS code in your CSS file. Remember, you have to create a file with .css extensions.

HTML:

      <!-- Add two link and two script files in head section of html code. -->
      <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <h1>Responsive Bootstrap Footer Menu using HTML & CSS</h1>
      <footer>
            <div class="footer-top-part">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-sm-6">
                            <div class="address">
                                <h3>CompanyLOGO</h3>
                                <p class="mb-4 mt-4">Stylish and Fully Responsive Bootstrap Footer using HTML & CSS with hover effects. The Footer menu is a very important part of any website. It contains important pages like about, contact, terms and policy of that website.</p>
                            </div>
                        </div>
                            <div class="col-lg-2 col-sm-6 footer-menus">
                            <h4>Useful Links</h4>
                            <ul>
                                <li><i class="fa fa-angle-right"></i> <a href="#">Home</a></li>
                                <li><i class="fa fa-angle-right"></i> <a href="#">About</a></li>
                                <li><i class="fa fa-angle-right"></i> <a href="#">Services</a></li>
                                <li><i class="fa fa-angle-right"></i> <a href="#">Terms and Conditions</a></li>
                                <li><i class="fa fa-angle-right"></i> <a href="#">Privacy Policy</a></li>
                            </ul>
                        </div>
                           <div class="col-lg-3 col-sm-6 footer-menus">
                            <h4>Services</h4>
                            <ul>
                                <li><i class="fa fa-angle-right"></i> <a href="#">Web Services</a></li>
                                <li><i class="fa fa-angle-right"></i> <a href="#">Web Development</a></li>
                                <li><i class="fa fa-angle-right"></i> <a href="#">Product</a></li>
                                <li><i class="fa fa-angle-right"></i> <a href="#">Marketing</a></li>
                                <li><i class="fa fa-angle-right"></i> <a href="#">Affiliate Marketing</a></li>
                            </ul>
                        </div>

                        <div class="col-lg-4 col-sm-6 newsletter">
                            <h4>Our Newsletter</h4>
                            <p>Please Subscribe us for get Latest Updates and News.</p>
                            <form action="" method="post"><input type="email" name="email" /><input type="submit" value="Subscribe" /></form>

                            <div class="footer-social-links mt-3">
                                <a href="#"><i class="fa fa-facebook-f"></i></a>
                                <a href="#"><i class="fa fa-twitter"></i></a>
                                <a href="#"><i class="fa fa-youtube"></i></a>
                                <a href="#"><i class="fa fa-instagram"></i></a>
                                <a href="#"><i class="fa fa-pinterest-p"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom-part">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <p class="text-left mb-2">© Copyright <strong>2021</strong>. All Rights Reserved</p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    

CSS:

      footer {
    background: #3605fa;
    color: #fff;
    font-size: 14px;
}
footer .footer-top-part {
    background: #000;
    padding: 50px 0px 20px;
}
footer .address p {
    font-size: 16px;
    color: #ddd;
    font-style: italic;
}
footer .footer-social-links a {
    font-size: 17px;
    display: inline-block;
    background: #28251f;
    color: #fff;
    line-height: 1;
    padding: 9px 0;
    margin-right: 5px;
    border-radius: 100%;
    text-align: center;
    width: 36px;
    height: 36px;
    transition: 0.4s;
}
footer .footer-social-links a:hover {
    background: #3605fa;
    color:#000;
}
footer h3{
    font-size: 32px;
}
footer h4 {
    font-size: 18px;
    color: #3605fa;
    padding-bottom: 12px;
}
footer .footer-menus {
    margin-bottom: 30px;
}
footer .footer-menus ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
footer .footer-menus ul li {
    margin-bottom: 10px;
}
footer .footer-menus ul i {
    color: #ffffff;
    font-size: 12px;
    margin-right: 3px;
}
footer .footer-menus ul a {
    color: #fff;
    text-decoration: none;
}
footer .footer-menus ul a:hover {
    color: #3605fa;
}
footer .newsletter form {
    margin-top: 30px;
    background: #3a7ae8;
    padding: 6px 10px;
    position: relative;
    border-radius: 50px;
    border: 1px solid #3a7ae8;
}
footer .newsletter form input[type="email"] {
    border: 0;
    padding: 5px;
    background: #3a7ae8;
    color: #fff;
}
footer .newsletter form input[type="email"]:focus {
    outline: none;
}
footer .newsletter form input[type="submit"] {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    border: 0;
    font-size: 16px;
    background: #3605fa;
    color: #fff;
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
}
.footer-bottom-part {
    padding: 20px 0px;
}
footer .footer-bottom-part a {
    color: #fa0515;
    text-decoration: none;
}
h1{
    margin-top:50px;
    margin-bottom:50px;
    text-align:center;
    font-size:50px;
}
    

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

All Categories

Most Popular