"footer strip"
Bootstrap 3.0.0 Snippet by adrnzhrf

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!DOCTYPE html> <html> <head> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <title></title> </head> <body> <div class="footer-bottom"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="copyright"> FOLLOW US </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="container"> <div class="row"> <div class="social"> <ul> <li><a href="#"><i class="fa fa-lg fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-google-plus"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-github"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-pinterest"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-linkedin"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-flickr"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-instagram"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-vimeo-square"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-stack-overflow"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-dropbox"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-tumblr"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-dribbble"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-skype"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-stack-exchange"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-youtube"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-xing"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-rss"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-foursquare"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-youtube-play"></i></a></li> </ul> </div> </div> </div> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="copyright"> Question? +603-5033 0333 </div> </div> </div> </div> </div> </div> </body> </html>
/************************************************************ *************************Footer****************************** *************************************************************/ @import url(http://fonts.googleapis.com/css?family=Fjalla+One); @import url(http://fonts.googleapis.com/css?family=Gudea); .footer1 { background: #fff url("../images/footer/footer-bg.png") repeat scroll left top; padding-top: 40px; padding-right: 0; padding-bottom: 20px; padding-left: 0;/* border-top-width: 4px; border-top-style: solid; border-top-color: #003;*/ } .title-widget { color: #898989; font-size: 20px; font-weight: 300; line-height: 1; position: relative; text-transform: uppercase; font-family: 'Fjalla One', sans-serif; margin-top: 0; margin-right: 0; margin-bottom: 25px; margin-left: 0; padding-left: 28px; } .title-widget::before { background-color: #ea5644; content: ""; height: 22px; left: 0px; position: absolute; top: -2px; width: 5px; } .widget_nav_menu ul { list-style: outside none none; padding-left: 0; } .widget_archive ul li { background-color: rgba(0, 0, 0, 0.3); content: ""; height: 3px; left: 0; position: absolute; top: 7px; width: 3px; } .widget_nav_menu ul li { font-size: 13px; font-weight: 700; line-height: 20px; position: relative; text-transform: uppercase; border-bottom: 1px solid rgba(0, 0, 0, 0.05); margin-bottom: 7px; padding-bottom: 7px; width:95%; } .title-median { color: #636363; font-size: 20px; line-height: 20px; margin: 0 0 15px; text-transform: uppercase; font-family: 'Fjalla One', sans-serif; } .footerp p {font-family: 'Gudea', sans-serif; } #social:hover { -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); } #social { -webkit-transform:scale(0.8); /* Browser Variations: */ -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; } /* Only Needed in Multi-Coloured Variation */ .social-fb:hover { color: #3B5998; } .social-tw:hover { color: #4099FF; } .social-gp:hover { color: #d34836; } .social-em:hover { color: #f39c12; } .nomargin { margin:0px; padding:0px;} .footer-bottom { background-color: #15224f; min-height: 30px; width: 100%; } .copyright { color: #fff; line-height: 30px; min-height: 30px; padding: 7px 0; } .design { color: #fff; line-height: 30px; min-height: 30px; padding: 7px 0; text-align: right; } .design a { color: #fff; } @import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"; .social { margin: 0; padding: 0; } .social ul { margin: 0; padding: 5px; } .social ul li { margin: 5px; list-style: none outside none; display: inline-block; } .social i { width: 40px; height: 40px; color: #FFF; background-color: #909AA0; font-size: 22px; text-align:center; padding-top: 12px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; transition: all ease 0.3s; -moz-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; -ms-transition: all ease 0.3s; } .social i:hover { color: #FFF; text-decoration: none; transition: all ease 0.3s; -moz-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; -ms-transition: all ease 0.3s; } .social .fa-facebook:hover { background: #4060A5; } .social .fa-twitter:hover { background: #00ABE3; } .social .fa-google-plus:hover { background: #e64522; } .social .fa-github:hover { background: #343434; } .social .fa-pinterest:hover { background: #cb2027; } .social .fa-linkedin:hover { background: #0094BC; } .social .fa-flickr:hover { background: #FF57AE; } .social .fa-instagram:hover { background: #375989; } .social .fa-vimeo-square:hover { background: #83DAEB; } .social .fa-stack-overflow:hover { background: #FEA501; } .social .fa-dropbox:hover { background: #017FE5; } .social .fa-tumblr:hover { background: #3a5876; } .social .fa-dribbble:hover { background: #F46899; } .social .fa-skype:hover { background: #00C6FF; } .social .fa-stack-exchange:hover { background: #4D86C9; } .social .fa-youtube:hover { background: #FF1F25; } .social .fa-xing:hover { background: #005C5E; } .social .fa-rss:hover { background: #e88845; } .social .fa-foursquare:hover { background: #09B9E0; } .social .fa-youtube-play:hover { background: #DF192A; }

Related: See More

BLK• Design System
Bootstrap 4 Footer Design
Footer using Bootstrap 4
Social Icon Strip Footer

Questions / Comments: