How To Create Responsive Footer In HTML CSS & Bootstrap 4 in Hindi

How To Create Responsive Footer In HTML CSS & Bootstrap 4 in Hindi

Source Code for free 

<!DOCTYPE html>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link href="" rel="stylesheet">
<link rel="stylesheet" href="" />
margin: 0; padding: 0; box-sizing: border-box;
font-family: 'Maven Pro', sans-serif;
header{ width: 100%; height: 300px; background: #d2dae2;}
background: #2c2c54; color: white;

text-decoration: none;
color: white;

a:hover{ text-decoration: none; color: #4bcffa; }

.d-flex div{
text-align: center;
border-right: 1px solid grey;
border-top: 1px solid grey;

.d-flex div:last-child{

@media(max-width: 768px){
list-style: none;

.d-flex span{
display: none;


<h3> Main Body</h3>

<footer class="footer_style">
<main class="container-fluid">
<div class="row p-3">
<div class="col-md-4 col-12 offset-md-1"> 
<p class="mt-5 text-justify"> ThapaTechnical youtube channel is here to help you. If you want to support just SUBSCRIBE and share with your friends. Lov you all :) 
DONATION FOR SUPPORT:    PhonePay = vinodbahadur@ybl      GooglePay: vbthapa55@oksbi
 Believe me all this money will be used to make more quality videos and to make my channel grow. So that I can always provide you awesome free videos :) </p>
<p class="text-capitalize"> &#169 2019 ThapaTechnical. All right reserved. </p>

<div class="col-md-4 col-12">
                <dd>Pune, Maharashtra </dd>
                <dd><a href="" ></a></dd>
                <dd><a href="tel:#">+91 1234567898</a> <span>or</span> <a href="tel:#">+91 9876543211</a>

<div class="col-md-2 col-12">
                <li><a href="">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contacts</a></li>
                <li><a href="#">About</a></li>

<div class="d-flex flex-row justify-content-center align-items-center flex-wrap">
<div class="p-md-5 p-2 flex-fill ">
<a href=""> <i class="fa fa-facebook-official" aria-hidden="true"></i> <span>Facebook</span> </a> </div>

<div class="p-md-5 p-2 flex-fill "><a href=""><i class="fa fa-instagram" aria-hidden="true"></i><span>Instagram</span></a></div>

<div class="p-md-5 p-2 flex-fill "><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i><span>Twitter</span></a></div>

<div class="p-md-5 p-2 flex-fill "><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i><span>Youtube</span></a></div>



  1. Bro please make video on the topic of live tv website

  2. Bhai please promote my channel Named Pragya Academy Nursery School on the Youtube. I am also trying to design a website for my schhol with the help of your videos plz bhai promote my channel plz plz plz plz plz plz plz plz plz plz plz plz plz plz............

  3. I believe other website owners should take this site as an example , very clean and wonderful user genial style . ux design agency san francisco

  4. I’ll create a hyperlink to the web page about my personal weblog. ux design agency san francisco

  5. I am glad that it turned out so well and I hope it will continue in the future because it is so worthwhile and meaningful to the community. iphone device template

  6. While at her sister’s fitting for a wedding dress, June is approached by a man known only as Agent Fitzgerald, and asked to accompany him inside his vehicle. tablet mockup