<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <footer> <div class="footer" id="footer"> <div class="container"> <div class="row"> <div class="col-md-4"> <h3> Contact </h3> <ul> <li> <a href="#"> Lorem Ipsum </a> </li> <li> <a href="#"> Lorem Ipsum </a> </li> <li> <a href="#"> Lorem Ipsum </a> </li> <li> <a href="#"> Lorem Ipsum </a> </li> </ul> </div> <div class="col-md-4"> <h3> Important Links </h3> <ul> <li> <a href="#"> Admission </a> </li> <li> <a href="#"> Academic </a> </li> <li> <a href="#"> Career </a> </li> <li> <a href="#"> Administration </a> </li> <li> <a href="#"> Notice </a> </li> <li> <a href="#"> Tender </a> </li> <li> <a href="login.php"> Teacher Login </a> </li> </ul> </div> <div class="col-md-4"> <h3> Location </h3> <ul> <li> <a href="#"> Lorem Ipsum </a> </li> <li> <a href="#"> Lorem Ipsum </a> </li> <li> <a href="#"> Lorem Ipsum </a> </li> <li> <a href="#"> Lorem Ipsum </a> </li> </ul> </div> </div> <!--/.row--> </div> <!--/.container--> </div> <!--/.footer--> <div class="footer-bottom"> <div class="container"> <p class="pull-left"> Copyright © 2017, JKKNIU. All rights reserved.</p> <div class="pull-right"> <ul class="nav nav-pills payments"> <li><i class="fa fa-cc-visa"></i></li> <li><i class="fa fa-cc-mastercard"></i></li> <li><i class="fa fa-cc-amex"></i></li> <li><i class="fa fa-cc-paypal"></i></li> </ul> </div> </div> </div> <!--/.footer-bottom--> </footer>

.footer { background: #21313F; height: auto; padding-bottom: 30px; position: relative; width: 100%; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #DDDDDD; } .footer h3 { border-bottom: 1px solid #BAC1C8; color: #fff; font-size: 18px; font-weight: 600; line-height: 27px; padding: 40px 0 10px; text-transform: uppercase; } .footer ul { font-size: 13px; list-style-type: none; margin-left: 0; padding-left: 0; margin-top: 15px; color: #F5F5F5; } .footer ul li a { padding: 0 0 5px 0; display: block; } .footer a { color: #F5F5F5 } .supportLi h4 { font-size: 20px; font-weight: lighter; line-height: normal; margin-bottom: 0 !important; padding-bottom: 0; } .bg-gray { background-image: -moz-linear-gradient(center bottom, #BBBBBB 0%, #F0F0F0 100%); box-shadow: 0 1px 0 #B4B3B3; } .footer-bottom { background: #E3E3E3; border-top: 1px solid #DDDDDD; padding-top: 10px; padding-bottom: 10px; } .footer-bottom p.pull-left { padding-top: 6px; }