Bootstrap Responsive Footer Free Download

Bootstrap Responsive Footer Templates Free Download with Source Code

Hello Friends today in this article we will learn How to Create Bootstrap Responsive Footer. Here You Can see code and create footer manually and you can download source code also.

Step-1 Add CSS Files

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

Step-2 HTML CODE

<footer>


      <div class="container">
        <div class="row">


          <div class="col-md-3">
            <div class="widget">
              <h5 class="widgetheading">Quick Links</h5>
              <ul class="link-list">
                <li><a href="#."><i class="fa fa-chevron-right icred"></i> About us</a></li>
                <li><a href="#."><i class="fa fa-chevron-right icred"></i> Privacy</a></li>
                <li><a href="#."><i class="fa fa-chevron-right icred"></i> Term And Condition</a></li>
                <li><a href="#."><i class="fa fa-chevron-right icred"></i> Career</a></li>
                <li><a href="#."><i class="fa fa-chevron-right icred"></i> Faq</a></li>
              </ul>
            </div>
          </div>

          <div class="col-md-2">
            <div class="widget">
              <h5 class="widgetheading">Our Cources</h5>
              <ul class="link-list">
               <li><a href="#"><i class="fa fa-chevron-right icred"></i> Contact Us</a></li>
               <li><a href="#"><i class="fa fa-chevron-right icred"></i> Site Map</a></li>
               <li><a href="#"><i class="fa fa-chevron-right icred"></i> My Acount</a></li>
               <li><a href="#"><i class="fa fa-chevron-right icred"></i> Our Blog</a></li>
               <li><a href="#"><i class="fa fa-chevron-right icred"></i> Listing</a></li>

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

           <div class="col-md-2">
            <div class="widget">
              <h5 class="widgetheading">Other Services</h5>
              <ul class="link-list">
               <li><a href="#"><i class="fa fa-chevron-right icred"></i> Contact Us</a></li>
               <li><a href="#"><i class="fa fa-chevron-right icred"></i> Site Map</a></li>
               <li><a href="#"><i class="fa fa-chevron-right icred"></i> My Acount</a></li>
               <li><a href="#"><i class="fa fa-chevron-right icred"></i> Our Blog</a></li>
               <li><a href="#"><i class="fa fa-chevron-right icred"></i> Listing</a></li>

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

          <div class="col-md-2">
            <div class="widget">
              <h5 class="widgetheading">Social</h5>
                <ul class="link-list">
                 <li><a href="#"><i class="fa fa-chevron-right icred"></i> Facebook</a></li>
			     <li><a href="#"><i class="fa fa-chevron-right icred"></i> Twitter</a></li>
			     <li><a href="#"><i class="fa fa-chevron-right icred"></i> Google Plus</a></li>
			     <li><a href="#"><i class="fa fa-chevron-right icred"></i> Linkedin</a></li>
                 <li><a href="#"><i class="fa fa-chevron-right icred"></i> Youtube</a></li>
             </ul>
              <div class="clear">
              </div>
            </div>
          </div>

          <div class="col-md-3">
            <div class="widget">
              <h5 class="widgetheading">Get in touch with us</h5>
                <p>
				   Dhanapur Road Near Ubi Bank Chahaniya Chandauli
                
              
                <i class="icon-phone"></i> +91-9519908823,+91-8127132057,+91-9795983132 <br>
                <i class="icon-envelope-alt"></i> info@vccedu.in
              </p>
            </div>
          </div>
        </div>
      </div>



      <div id="sub-footer">
        <div class="container">
          <div class="row">
            <div class="col-md-9">
              <div class="copyright">
                <p>
                  <span>© 2020 SCHAUHAN.IN - All right reserved.</span>
                </p>
                
              </div>
            </div>
            <div class="col-md-3">
               <div class="credits">
                  Designed by <a href="http://www.schauhan.in.com">SCHAUHAN.IN</a>
                </div>
            </div>
          </div>
        </div>
      </div>
    </footer>

Step-3 Add CSS

body
{
	margin:0px;
	padding:0px;
}

footer {
  background: #0e0e0e;
  padding: 50px 0 0 0;
  color: #bbb;
}

footer a {
  color: #eee;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
  color: #eee;
}

footer address {
  line-height: 1.6em;
}

footer h5 a:hover, footer a:hover {
  text-decoration: none;
}

ul.social-network {
  list-style: none;
  margin: 0;
}

ul.social-network li {
  display: inline;
}

#sub-footer {
  background: #000;
  text-shadow: none;
  color: #5d5d5d;
  padding: 0;
  height:50px;
  line-height:50px;
  margin: 20px 0 0 0;
}

#sub-footer p {
  margin: 0;
  padding: 0;
}

#sub-footer span {
  color: #c7c7c7;
}

.copyright {
  text-align: left;
  font-size: 12px;
  color: #ddd;font-family: 'PT Sans', sans-serif;
}

.credits
{
  font-family: 'PT Sans', sans-serif;
    margin-left:20px;
}

#sub-footer ul.social-network {
  float: right;
}


/* --- list style --- */

ul.general {
  list-style: none;
  margin-left: 0;
}

ul.link-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.link-list li {
  margin: 0;
  font-size:14px;
  padding: 2px 0 2px 0;
  list-style: none;
}

footer ul.link-list li a {
  color: #666;
  font-family: 'PT Sans', sans-serif;
}

/* --- Heading style --- */

h4.heading {
  font-weight: 300; font-family: 'PT Sans', sans-serif;
}

h4.heading strong {
  font-weight: 700; font-family: 'PT Sans', sans-serif;
}

.heading {
  margin-bottom: 30px;
}

.heading {
  position: relative;
}

.widgetheading {
  width: 100%;
  padding: 0;
  font-size:18px;
  color:#f2f2f2;
}

#bottom .widgetheading {
  position: relative;
  border-bottom: #e6e6e6 1px solid;
  padding-bottom: 9px;
}

aside .widgetheading {
  position: relative;
  border-bottom: #e9e9e9 1px solid;
  padding-bottom: 9px;
}

footer .widgetheading {
  position: relative;font-family: 'PT Sans', sans-serif;
}

footer .widget .social-network {
  position: relative;
}

#bottom .widget .widgetheading span, aside .widget .widgetheading span, footer .widget .widgetheading span {
  position: absolute;
  width: 60px;
  height: 1px;
  bottom: -1px;
  right: 0;
}

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
trackback

[…] Bootstrap Footer Templates Free Download […]