How to make footer using bootstrap for website

Introduction

In this article we will make beautiful footer for website. we are using bootstrap, CSS, HTML for making footer. Bootstrap is use for designing. First of all we enter library link.

Procedure

  1. Add library link for bootstrap languge. This link is very import so don’t miss this link.
  2. Use CSS Language for modify the html code. its also used for designing.

Code

Bootstrap Link

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >

CSS Code

     footer 
         {
         margin-top: 40px;

         }
      
     .recent ul li
      {
          list-style: none;
          margin-top: 16px;
     }
       .recent ul li a
      {
          list-style: none;
         color: white;
    


     }

.recent ul li a:hover
      {
          list-style: none;
         color: white;
         background-color: #808000;


     }
  .line
  {
  	border-bottom: 3px solid #228B22;
  }

 #background
  {
  	background-color: black;
  	color: white;
  }

Html Code

<!DOCTYPE html>
<html>
<head>


bootstrap link heree



	<title>BsProgram.com</title>


	<style type="text/css"> 
         
      CSS CODE PASTE HERE  

	</style>

	
	
	</head>

<body>

</body>

<footer>

<div class="container"> 
<div class="row" id="background"> 
<div class="col-3"> 

<a  class="line"> Recently Post</a>
<div class="recent">  


<ul> 

    <li><a href="#"> Post 1 </a> </li>
    <li><a href="#"> Post 2</a> </li>
    <li><a href="#"> Post 3</a> </li>
    <li><a href="#"> Post 4</a> </li>
    <li><a href="#"> Post 5</a> </li>


</ul>


</div>

</div>
<div class="col-3"> 
<div class="recent">
<a class="line" > SamProgz</a>

<ul>

<li><a href="#"> Home </a></li>
<li><a href="#"> Contact </a></li>
<li><a href="#"> Privacy </a></li>
<li><a href="#"> Terms & Conditions </a></li>
<li><a href="#"> Disclaimer </a></li>

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

<div class="col-3"> 
<div class="recent">
<a class="line" > Mission</a>
<p> Hey Guys Every This is footer. My Mission is to provide easy code. so if you like my code please daily visit my website </p>
</div>
</div>



<div class="col-3"> 
<div class="recent">
<a class="line" > Vision</a>
<p> Hey Guys Every This is footer. My Mission is to provide easy code. so if you like my code please daily visit my website </p>
</div>
</div>
</div>


</div>
<p align="center" style="background-color: #808000;color: white;margin-right: 113px;margin-left: 113px;"> &copy Copyrights All Right & Reserved </p>



</footer>
</html>

This is the code of footer. Please Visit my website for more code.

Leave a Reply

Your email address will not be published. Required fields are marked *