Bootstrap 5 Footer Using HTML5 CSS3 (Bootstrap Footer Code)

Footer, its necessary for the all the beginners in the field of web development & Front End Developer to know about each and every section of website. Footer is one those section which stores the copyrights, social media facilities, address, contact number & Enquiry Form etc.

Nowadays all the developers are focusing more on headers & footers so that it increases the client surf time.

So in todays project we’ll try to program the footer. So hey guys Welcome to Codewithrandom with a new blog today we’ll see how to make a footer using the Bootstrap version 5

HTML Code for Footer

<section class="footer">
    <!-- Footer -->
    <footer class="mt-auto bg-primary text-white">
        <!-- Grid container -->
        <div class="container-lg p-4">
            <!--Grid row-->
            <div class="row">
                <!--Grid column-->
                <div class="col-lg-6 col-md-12 mb-4 mb-md-0">
                    <h5 class="text-uppercase">About Title</h5>

                    <p>
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
                        molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae
                        aliquam voluptatem veniam, est atque cumque eum delectus sint!
                    </p>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                    <h5 class="text-uppercase">Links</h5>

                    <ul class="list-unstyled mb-0">
                        <li>
                            <a href="#!" class="text-white">Line 1</a>
                        </li>
                        <li>
                            <a href="#!" class="text-white">Link 2</a>
                        </li>
                        <li>
                            <a href="#!" class="text-white">Link 3</a>
                        </li>
                        <li>
                            <a href="#!" class="text-white">Link 4</a>
                        </li>
                    </ul>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                    <h5 class="text-uppercase">Contact Us</h5>
                    <p><i class="fa fa-envelope-o mr-3"></i> [email protected]</p>
                </div>
                <!--Grid column-->
            </div>
            <!--Grid row-->
        </div>
        <!-- Grid container -->

        <!-- Copyright -->
        <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
            © 2021 Copyright:
            <a class="text-white" href="https://mdbootstrap.com/">Project.com</a>
        </div>
        <!-- Copyright -->
    </footer>
    <!-- Footer -->
</section>

In this code we have defined the structure of footer in which we have entered some quotes with the smallest header h6 after that we added the link which basically helps you the redirect the social media account and lastly we have stated the copyrights that whom to it belongs.

100+ Front-end Projects for Web developers (Source Code)

While creating this we have divided them in to row and container so that all elements are perfectly aligned.

CSS Code for Footer

html {
  height: 100%; 
}

body {
  min-height: 100%;
}

.footer {
     position: absolute;
    bottom: 0;
    width: 100%;
}

a {
  text-decoration:none;
}

a:hover {
  font-weight:bold;
}

Since we have done the most part in the structure script i.e., HTML we have not styled much things in the CSS code we have just set the font-weight which are there in the HTML COde and appropriate padding & position for the footer. That’s it lets see the final output.

Final Output for Bootstrap 5 Footer

We have Successfully created our Bootstrap 5 Footer using HTML5 & CSS3 | Bootstrap 5 footer You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned below.

100+ Front-end Projects for Web developers (Source Code)

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By – Harsh Sawant

Code By – zkh224