THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

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>
<html>
<head>
<title></title>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Maven+Pro&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
*{
margin: 0; padding: 0; box-sizing: border-box;
font-family: 'Maven Pro', sans-serif;
}
header{ width: 100%; height: 300px; background: #d2dae2;}
.footer_style{
background: #2c2c54; color: white;
}

a{
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{
border-right:none;
}

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

.d-flex span{
display: none;
}
}

</style>
</head>
<body>

<header>
<h3> Main Body</h3>
</header>

<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>

<div class="col-md-4 col-12">
<h4>Contacts</h4>
              <dl>
                <dt>Address:</dt>
                <dd>Pune, Maharashtra </dd>
              </dl>
              <dl>
                <dt>email:</dt>
                <dd><a href="mailto:thapa@thapa.com" >thapa@thapa.com</a></dd>
              </dl>
              <dl>
                <dt>phones:</dt>
                <dd><a href="tel:#">+91 1234567898</a> <span>or</span> <a href="tel:#">+91 9876543211</a>
                </dd>
              </dl>
</div>

<div class="col-md-2 col-12">
<h4>Links</h4>
              <ul>
                <li><a href="https://www.thapatechnical.com/">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>
              </ul>
</div>
</div>

<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="https://www.facebook.com/vinodthapa55"> <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="https://www.instagram.com/vinodthapa55/"><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>
</div>
</main>
</footer>

</body>
</html>