Responsive Footer in Bootstrap 4 with No CSS | Nike Responsive Footer

In this Bootstrap tutorial, We Create a Nike Responsive Footer Using HTML , and Bootstrap 4.

Responsive Footer in Bootstrap 4 with No CSS | How to Create Responsive Footer in Html and Bootstrap

In this Bootstrap tutorial, We Create a Responsive Footer Using HTML , and Bootstrap 4. In this video, I will guide your How to create a Responsive footer only using bootstrap 4 NO CSS. How to Design Responsive Footer with Bootstrap. How to Design Responsive Footer with html and Bootstrap | Footer Design html and Bootstrap. This video shows you how you can create a Responsive footer section using only Html and Bootstrap 4. We have provided Source File.

How to Design Nike Responsive Footer with html and Bootstrap | Footer Design html and Bootstrap.

HTML

                            
                                <!doctype html>
<html lang="en">
  <head>
    <title>Responsive Footer</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

</head>
<body>

    <footer class="text-white">
        <div class="container-fluid pt-5 pb-5">
            <div class="row">
                <div class="col-md-2">
                    <h1 class="font-weight-bold mt-5 pt-2">NIKE</h1>

                </div>

                <div class="col-md-3">
                    <h4 class="font-weight-bold mb-3">GIFT CARDS</h4><hr/>
                    <p>PRODUCTIONS</p>
                    <p>FIND & STORE</p>
                    <p>SIGN UP MAIL</p>
                    <p>BOOK A MEMBER</p>
                    <p>NIKE SHOP</p>
                    <p>SEND US FEEDBACK</p>
                </div>

                <div class="col-md-3">
                    <h4 class="font-weight-bold mb-3">GET HELP</h4><hr/>
                    <p>RETURNS</p>
                    <p>SHIPPING & DELIVERY</p>
                    <p>CONTACT US</p>
                    <p>BOOK A MEMBER</p>
                    <p>NIKE SHOP</p>
                    <p>SEND US FEEDBACK</p>
                </div>

                <div class="col-md-3">
                    <h4 class="font-weight-bold mb-3">ABOUT NIKE</h4><hr/>
                    <p>NEWS</p>
                    <p>CAREERS</p>
                    <p>SIGN UP FOR MAIL</p>
                    <p>BOOK A MEMBER</p>
                    <p>NIKE SHOP</p>
                    <p>SEND US FEEDBACK</p>
                </div>

                <div class="col-md-1">
                    <img src="https://c.static-nike.com/a/images/w_1920,c_limit/mdbgldn6yg1gg88jomci/image.jpg" width="80px"/>
                    <h4 class="font-weight-bold" style="margin-top: 200px;">NIKE</h4>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>

Some CSS

                            
                                body{
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
    .container-fluid{
        width: 90%;
    }
    footer{
        background-color: black;
    }
    h1{
        writing-mode: vertical-rl;
        font-size: 70px;
        transform: rotate(180deg);
    }
    hr{
        background-color: white;
        height: 2px;
        width: 50%;
        margin-left: 0;
    }

Download Code Files