Bootstrap Responsive Footer with Social Media icons

Hey, developer today I am going to share a Bootstrap Responsive Footer with Social Media icons. To implement this you have to first create a index.html file then you have to copy the HTML code given below.

After open the index.html file in your browser and see the output.

Preview

Bootstrap Responsive Footer with Social Media icons

HTML Code

index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Responsive Footer </title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

    <!-- Adding Font Awesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
        integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>

    <!-- Bootstrap Footer -->
    <div class="w-100 h-50 bg-dark py-5 px-5">
        <!-- Footer Social -->
        <div class="container border-bottom">
            <ul class="d-flex w-100 justify-content-center flex-wrap flex-sm-row">
                <li class="pe-auto list-group-item my-2 px-4"><a href=""><i class="fs-5 text-white fa-brands fa-instagram"></i></a></li>
                <li class="pe-auto list-group-item my-2 px-4"><a href=""><i class="fs-5 text-white fa-brands fa-facebook"></i></a></li>
                <li class="pe-auto list-group-item my-2 px-4"><a href=""><i class="fs-5 text-white fa-brands fa-linkedin"></i></a></li>
                <li class="pe-auto list-group-item my-2 px-4"><a href=""><i class="fs-5 text-white fa-brands fa-github"></i></a></li>
                <li class="pe-auto list-group-item my-2 px-4"><a href=""><i class="fs-5 text-white fa-brands fa-twitter"></i></a></li>
            </ul>
        </div>

        <!-- Footer Company Name  -->
        <h4 class="text-center my-4 text-white">
            Geeks Help
        </h4>

        <!-- Footer Flex Container -->
        <div class="w-100 d-flex flex-wrap justify-content-between">

            <!-- Footer Flex Item -->
            <div class="m-2 flex-item" style="width: 20rem;">
                <h4 class="heading" style="color: #e65b00;">Geeks Help</h4>
                <div class="content">
                    <ul class="px-0">
                        <li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">Geeks Help is an independent website, especially for Web Developers, Programming Beginners, BCA and Computer Science Students. We provide programming, web development content with free pdf and web development projects.</a></li>
                    </ul>
                </div>
            </div>

            <!-- Footer Flex Item -->
            <div class="m-2 flex-item">
                <h4 class="heading" style="color: #e65b00;">Products</h4>
                <div class="content">
                    <ul class="px-0">
                        <li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">HTML</a></li>
                        <li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">CSS</a></li>
                        <li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">JavaScript</a></li>
                        <li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">Bootstrap</a></li>
                        <li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">ReactJS</a></li>
                    </ul>
                </div>
            </div>

            <!-- Footer Flex Item -->
            <div class="m-2 flex-item">
                <h4 class="heading" style="color: #e65b00;">Useful Links</h4>
                <div class="content">
                    <ul class="px-0">
                        <li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">Help</a></li>
                        <li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">Pricing</a></li>
                        <li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">Settings</a></li>
                        <li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">Order Details</a></li>
                    </ul>
                </div>
            </div>

            <!-- Footer Flex Item -->
            <div class="m-2 flex-item">
                <h4 class="heading" style="color: #e65b00;">Contact Us</h4>
                <div class="content">
                    <ul class="px-0">
                        <li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">XYZ, ABC, India</a></li>
                        <li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">contact@geekshelp@gmail.com</a></li>
                        <li class="my-2 list-group-item"><a class="text-white text-decoration-none my-2" href="">+91 1234567890</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>



    <!-- Adding Scripts to Our HTML code -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

    <!-- Bootstrap Responsive Footer with Social Media icons created by raju_webdev -->
</body>
</html>

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad