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> [email protected]
              </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;
}

One Reply to “Bootstrap Responsive Footer Free Download

Comments are closed.