<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 ----------> <h1>Responsive Footer</h1> <section class="index-link"> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="link-area"> <h3>ABOUT US</h3> <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nunc est, tempus et venenatis id.</P> <li class="fa-li"><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> <li class="fa-li"><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li class="fa-li"><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li> </div> </div> <div class="col-md-3"> <div class="link-area"> <h3>PRODUCT</h3> <ul> <li><a href="#"> Services-1</a></li> <li><a href="#"> Services-1</a></li> <li><a href="#"> Services-1</a></li> <li><a href="#"> Services-1</a></li> <li><a href="#"> Services-1</a></li> </ul> </div> </div> <div class="col-md-3"> <div class="link-area"> <h3>COMPANY</h3> <ul> <li><a href="#"> Home</a></li> <li><a href="#"> Blog</a></li> <li><a href="#"> About</a></li> <li><a href="#"> contact</a></li> <li><a href="#"> Jobs</a></li> </ul> </div> </div> <div class="col-md-3"> <div class="link-area"> <h3>LEARM MORE</h3> <ul> <li><a href="#"> Menu</a></li> <li><a href="#"> Menu-1</a></li> <li><a href="#"> Menu-1</a></li> <li><a href="#"> Menu-1</a></li> <li><a href="#"> Menu-1</a></li> </ul> </div> </div> </div> </div> </section> <section class="index-social"> <div class="container"> <div class="row index-social-link text-center"> <p class="copy-c">Copyright @2017</p> </div> </div> </section>

body { padding-top:10em; } .index-social{ background-color:#2c2c2c; color:#fff; } .link-area .fa-li{ width:40px; height:40px; border-radius:50%; border:solid 1px #fff; list-style-type:none; margin:5px; display:inline-block; } .index-social a{ color:#fff; font-size:25px; display:block; float:left; padding:10px; } .index-link h3{ color:#f1f1f1; text-align:left; } .index-link{ background-color:#000; } .index-link ul{ padding:0px; } .index-link ul li{ list-style-type:none; } .index-link ul li a{ text-decoration:none; font-size:16px; color:#fff; display:block; padding:5px 0; text-align:left; } .index-link ul li a:hover{ text-decoration:underline; } .copy-c{ padding-top:15px; }