"Footer with social icons and subscibe"
Bootstrap 3.3.0 Snippet by KKell13

<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 id="footer" class="clearfix"> <div id="footer-widgets"> <div class="container"> <div id="footer-wrapper"> <div class="row"> <div class="col-sm-6 col-md-2"> <div id="meta-3" class="widget widgetFooter widget_meta"> <h4 class="widgettitle">Importent Page :</h4> <ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Home</a></li> <li><a href="privacypolicy.php"><i class="fa fa-link"></i>   Privacy Policy</a></li> <li><a href="#"><i class="fa fa-envelope fa-fw"></i> Contact Us</a></li> </ul> </div> </div> <!-- end widget1 --> <div class="col-sm-6 col-md-2"> <div id="recent-posts-3" class="widget widgetFooter widget_recent_entries"> <h4 class="widgettitle">Our social media :</h4> <ul> <li> <a href="https://www.facebook.com/mr.dauod" target="_blank"><i class="fa fa-facebook"></i> Facebook</a> </li> <li> <a href="https://www.twitter.com/ayatquranCom" target="_blank"><i class="fa fa-twitter"></i> Twitter</a> </li> <li> <a href="http://www.youtube.com/user/sonsofye" target="_blank"><i class="fa fa-youtube"></i> Youtube</a> </li> </ul> </div> </div> <!-- end widget1 --> <div class="col-sm-6 col-md-4"> <div id="meta-4" class="widget widgetFooter widget_meta"> <h4 class="widgettitle">Subscribe :</h4> <div class="form-group"> <div class="input-group"> <span class="input-group-addon">E-mail :</span> <input class="form-control" placeholder="Write your email .." type="text"> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon">Phone :</span> <input class="form-control" placeholder="+96777000000" type="text"> <span class="input-group-btn"> <button class="btn btn-primary" type="button">Subscribe !</button> </span> </div> </div> </div> </div> <!-- end widget1 --> <div class="col-sm-6 col-md-4"> <div id="search-3" class="widget widgetFooter widget_search"><h4 class="widgettitle">Search in Faploo :</h4> <div class="form-group"> <label class="control-label">Write what you want to search for it :</label> <div class="input-group"> <span class="input-group-addon">Keyword :</span> <input class="form-control" placeholder="Keyword for search ..." type="text"> <span class="input-group-btn"> <button class="btn btn-primary" type="button">Search !</button> </span> </div> </div> </div> </div> <!-- end widget1 --> </div> <!-- end .row --> </div> <!-- end #footer-wrapper --> </div> <!-- end .container --> </div> <!-- end #footer-widgets --> <div id="sub-floor"> <div class="container"> <div class="row"> <div class="col-md-4 copyright"> Copy right for Faploo © 2015 </div> <div class="col-md-4 col-md-offset-4 attribution"> Developer by <a target="_blank" href="#">Faploo team</a> . </div> </div> <!-- end .row --> </div> </div> </footer>
@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"); #footer { border-top: 5px solid #CDB380; background: #033649 none repeat scroll 0% 0%; padding-top: 30px; margin-top: 60px; clear: both; color: #AAA; display: block; } #footer .widgettitle { margin: 0px; padding: 0px 0px 15px; border-bottom: medium none; } #footer h4 { color: #FFF; } #footer ul { list-style: outside none none; } #footer li { padding: 7px 0px; border-bottom: 1px dotted rgba(255, 255, 255, 0.2); margin: 0px; } #footer li a { color: #DDD; } #sub-floor { color: #AAA; background: #031634 none repeat scroll 0% 0%; padding: 10px 0px; }

Related: See More


Questions / Comments: