"Corporate Footer"
Bootstrap 3.0.0 Snippet by NaszvadiG

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 lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> </head> <body> <footer> <section class="nb-footer"> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="footer-single"> <!-- <img src="images/logo.png" class="img-responsive" alt="Logo"> --> <!-- This is only for better view of theme if you want your image logo remove div dummy-logo bellow and replace your logo in logo.png and uncomment logo tag above--> <div class="dummy-logo"> <div class="icon pull-left brand"> <i class="fa fa-copy"></i> </div> <h2>Lorem Ipsum</h2> <p>Another responsive footer</p> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus felis diam, vulputate in risus eu, porttitor condimentum purus. Phasellus ullamcorper, odio id feugiat bibendum.</p> <a href="" class="btn btn-footer">Read More</a> </div> </div> <div class="col-md-3 col-sm-6"> <div class="footer-single useful-links"> <div class="footer-title"><h2>Navigation</h2></div> <ul class="list-unstyled"> <li><a href="index.html">Home <i class="fa fa-angle-right pull-right"></i></a></li> <li><a href="about1.html">About Us <i class="fa fa-angle-right pull-right"></i></a></li> <li><a href="service1.html">Services <i class="fa fa-angle-right pull-right"></i></a></li> <li><a href="portfolio1.html">Portfolio <i class="fa fa-angle-right pull-right"></i></a></li> <li><a href="pricing.html">Pricing <i class="fa fa-angle-right pull-right"></i></a></li> <li><a href="contact1.html">Contact Us <i class="fa fa-angle-right pull-right"></i></a></li> </div> </div> <div class="clearfix visible-sm"></div> <div class="col-md-3 col-sm-6"> <div class="col-sm-12 left-clear right-clear footer-single footer-project"> <div class="footer-title"><h2>Latest Projects</h2></div> <div class="col-xs-4"> <img src="http://lorempixel.com/200/200/" class="img-responsive center-block"> </div> <div class="col-xs-4"> <img src="http://lorempixel.com/200/200/" class="img-responsive center-block"> </div> <div class="col-xs-4"> <img src="http://lorempixel.com/200/200/" class="img-responsive center-block"> </div> <div class="clearfix"></div> <div class="col-xs-4"> <img src="http://lorempixel.com/200/200/" class="img-responsive center-block"> </div> <div class="col-xs-4"> <img src="http://lorempixel.com/200/200/" class="img-responsive center-block"> </div> <div class="col-xs-4"> <img src="http://lorempixel.com/200/200/" class="img-responsive center-block"> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="footer-single"> <div class="footer-title"><h2>Contact Information</h2></div> <address> 999, Holly Eiusmod Tempor, City<br> Your State, Country <br> <i class="fa fa-phone"></i> 987 654 3210 <br> <i class="fa fa-fax"></i> 012 123 2345<br> <i class="fa fa-envelope"></i> info@example.com<br> </address> </div> </div> </div> </div> </section> <section class="nb-copyright"> <div class="container"> <div class="row"> <div class="col-sm-6 copyrt xs-center"> 2015 © All Rights Reserved. <a href="">Terms & Conditions</a> | <a href="">Privacy Policy</a> </div> <div class="col-sm-6 text-right xs-center"> <ul class="list-inline footer-social"> <li><a href=""><i class="fa fa-facebook"></i></a></li> <li><a href=""><i class="fa fa-twitter"></i></a></li> <li><a href=""><i class="fa fa-youtube-play"></i></a></li> <li><a href=""><i class="fa fa-google-plus"></i></a></li> <li><a href=""><i class="fa fa-skype"></i></a></li> </ul> </div> </div> </div> </section> </footer> </body> </html>
.nb-footer{ background: #272727; margin-top: 60px; padding-bottom: 30px; } .nb-footer .footer-single{ margin-top: 30px; } .nb-footer .footer-title{ display: block; margin: 10px 0 25px 0; border-bottom: 1px dotted #e4e9f0; } .nb-footer .footer-single a{ text-decoration: none; } .nb-footer .footer-single h2{ color: #eee; font-size: 18px; font-weight: 200; display: inline-block; border-bottom: 2px solid #7BFF00; padding-bottom: 5px; margin-bottom: -2px; } .nb-footer .footer-single li{ border-top: solid 1px #353535; } .nb-footer .footer-single li:first-child{ border-top: none; } .nb-footer .footer-single li a{ color: #979797; font-size: 12px; padding: 6px 0px; display: block; transition:all 0.4s ease-in-out; } .nb-footer .footer-single li a:hover{ color: #7BFF00; } .nb-footer .footer-single li a:hover i{ color: #7BFF00; } .nb-footer .dummy-logo { margin-top: 11px; padding-bottom: 9px; } .nb-footer .dummy-logo .icon { margin-right: 10px; border-radius: 20px; margin-top: 24px; } .nb-footer .brand { background: #7BFF00; } .nb-footer .dummy-logo i { font-size: 50px; color: #fff; padding: 5px; } .nb-footer .dummy-logo p { color: #999; font-size: 12px; } .nb-footer .dummy-logo h2 { font-size: 24px !important; border-bottom: none; color: #696969; padding: 5px 0; } .nb-footer .btn-footer{ border: 1px solid #7BFF00; margin-top: 10px; color: #999; } .nb-footer .btn-footer:hover{ background: #7BFF00; color: #fff; transition:all 0.4s ease-in-out; } .nb-footer .useful-links li a{ text-transform: uppercase; } .nb-footer .footer-project a{ font-size: 13px; } .nb-footer .footer-project img{ margin-bottom: 20px; border: 1px solid #666; border-radius: 6px; padding: 1px; opacity: 0.7; transition:all 0.4s ease-in-out; } .nb-footer .footer-project img:hover{ opacity: 1.0; cursor: pointer; } .nb-footer .footer-project .footer-title{ margin-top: 0; } .nb-footer .footer-single p, .footer-single address{ color: #979797; font-size: 14px; margin-top: 5px; line-height: 22px; } .nb-copyright{ background: #171717; padding-bottom: 10px; } .nb-copyright .copyrt{ margin-top: 22px; font-size: 14px; } .nb-copyright .copyrt a{ color: #7BFF00; } .nb-copyright .footer-social{ margin-top: 10px; } .nb-copyright .footer-social i{ padding: 5px 10px; color: #999; border: 1px solid #333; margin-top: 10px; font-size: 20px; border-radius: 5px; transition:all 0.4s ease-in-out; } .nb-copyright .footer-social i:hover{ background: #7BFF00; color: #fff; } .nb-copyright .footer-social .fa-facebook{ padding: 5px 14px; } @media(max-width: 767px){ .xs-center{ text-align: center; } .left-clear{ padding-left: 0; } .right-clear{ padding-right: 0; } }

Related: See More

Material Kit PRO React
Bootstrap 4 Footer Design
Footer using Bootstrap 4
Social Icon Strip Footer

Questions / Comments: