Bootstrap 5 Footer | Build a Professional Responsive Footer with Social media Icon

In this Tutorial Using HTML , CSS and Bootstrap 5. We Create a Modern and Professional Responsive Footer.

Bootstrap 5 Footer | Amazing Responsive Footer with Social media Icon

In this Tutorial We Create a Responsive Footer Using HTML , CSS and Bootstrap5.We Create a Creative Responsive Footers.

You’ve probably seen footers on almost every website you’ve visited. The footer is a crucial section of a website that appears at the bottom of every page. It usually contains links to important pages and copyright information.

In this blog post, I’ll show you how to make a responsive footer using HTML , CSS and BOOTSTRAP. It is simple however it's an excellent project for beginners and also for developers, helping you understand how to set up a footer layout with HTML and give it a stylish, responsive design with CSS and BOOTSTRAP.

To Build an Amazing footer, we will commonly used HTML elements like footer , h4, ul, li, a, and button, along with some basic CSS properties to style and make the footer responsive. So, let's not waste any time — follow along and understand the code step by step

Steps to Create Responsive Footer in HTML, CSS and BOOTSTRAP

To create a responsive footer using HTML, CSS and BOOTSTRAP, follow these simple steps:

First, create a folder with any name you like. Then, make the necessary files inside it.
Create a file called footerbootstrap5.html to serve as the main file.

To start, add the following HTML, CSS and BOOTSTRAP codes to your footerbootstrap5.html file: This code includes essential HTML, CSS and BOOTSTRAP semantic tags like footer, h4, form, input, p, li, and buttons, color, fonts, background and also bootstrap which are used to create our footer layout.

                            
                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Responsive Footer</title>    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" integrity="sha512-DxV+EoADOkOygM4IR9yXP8Sb2qwgidEmeqAEmDKIOfPRQZOWbXCzLC6vjbZyy0vPisbH2SyW27+ddLVCN+OMzQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<style>
    .footer{
        background-color: #0c457e;
        color: #ecf0f1;
        padding: 40px 0 0;
    }
    .footer a{
        color: #bdc3c7;
        text-decoration: none;
        transition: color 0.3s;
    }
    footer a:hover{
        color: #ffffff;
    }
    .footer-heading{
        color: #ffffff;
        margin-bottom: 20px;
        font-weight: 600;
        position: relative;
        padding-bottom: 10px;
    }
    .footer-heading:after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 50px;
        height: 2px;
        background: #3e83c4;
    }
    .footer-links li{
        margin-bottom: 10px;
        list-style: none;
    }
    .social-icons a{
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: #0d1216;
        color: #ffffff;
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
        margin-right: 10px;
        transition: all 0.3s;
    }
    .social-icons a:hover{
        background-color: #3e83c4;
        transform: translateY(-3px);
    }
    .footer-bottom{
        background-color: #0d1216;
        padding: 20px 0;
        margin-top: 40px;
    }
</style>
<body>

        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
                        <h5 class="footer-heading">About Company</h5>
                        <p>Passionate about web design, development, databases, and tech? "The Providers" is your YouTube hub! Explore tutorials spanning front-end, back-end, & Full Stack.</p>
                        <div class="social-icons mt-4">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-youtube"></i></a>
                        </div>
                    </div>

                    <div class="col-lg-2 col-md-6 mb-4 mb-lg-0">
                        <h5 class="footer-heading">Quick Links</h5>
                        <ul class="footer-links ps-0">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">Services</a></li>
                            <li><a href="#">Portfolio</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>

                    <div class="col-lg-2 col-md-6 mb-4 mb-lg-0">
                        <h5 class="footer-heading">Services</h5>
                        <ul class="footer-links ps-0">
                            <li><a href="#">Web Design</a></li>
                            <li><a href="#">Web Development</a></li>
                            <li><a href="#">Graphic Design</a></li>
                            <li><a href="#">Digital Marketing</a></li>
                            <li><a href="#">SEO Services</a></li>

                        </ul>
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <h5 class="footer-heading">Contact Info</h5>
                        <div class="mt-4">
                            <p><i class="fas fa-map-marker-alt me-2"></i>Karachi, Pakistan</p>
                            <p><i class="fas fa-phone me-2"></i>+923162859445</p>
                            <p><i class="fas fa-envelope me-2"></i>theproviders98@gmail.com</p>
                        </div>
                    </div>
                    

                </div>
            </div>

            <div class="footer-bottom">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 text-center text-md-start">
                            <p class="mb-0">&copy; 2025 The Providers. All righst reserved</p>
                        </div>
                        <div class="col-md-6 text-center text-md-end">
                            <ul class="list-inline mb-0">
                                <li class="list-inline-item"><a href="#">Privacy Policy</a></li>
                                <li class="list-inline-item"><a href="#">Terms Of Use</a></li>
                                <li class="list-inline-item"><a href="#">Sitemap</a></li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </footer>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script>

</body>
</html>

Download Code Files