"Mega 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 class="nb-footer"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="about"> <img src="images/logo.png" class="img-responsive center-block" alt=""> <p>Bootstrap Footer example snippets with CSS, Javascript and HTML. Code example of bootstrap-3 footer using HTML, Javascript, jQuery, and CSS. 5 Beautiful and Responsive Footer Templates. Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> <div class="social-media"> <ul class="list-inline"> <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-facebook"></i></a></li> <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-twitter"></i></a></li> <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-google-plus"></i></a></li> <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-linkedin"></i></a></li> </ul> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="footer-info-single"> <h2 class="title">Help Center</h2> <ul class="list-unstyled"> <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> How to Pay</a></li> <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> FAQ's</a></li> <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Sitemap</a></li> <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Delivery Info</a></li> </ul> </div> </div> <div class="col-md-3 col-sm-6"> <div class="footer-info-single"> <h2 class="title">Customer information</h2> <ul class="list-unstyled"> <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> About Us</a></li> <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> FAQ's</a></li> <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Sell Your Items</a></li> <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Contact Us</a></li> <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> RSS</a></li> </ul> </div> </div> <div class="col-md-3 col-sm-6"> <div class="footer-info-single"> <h2 class="title">Security & privacy</h2> <ul class="list-unstyled"> <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Terms Of Use</a></li> <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Privacy Policy</a></li> <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Return / Refund Policy</a></li> <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Store Locations</a></li> </ul> </div> </div> <div class="col-md-3 col-sm-6"> <div class="footer-info-single"> <h2 class="title">Payment</h2> <p>Sample HTML page with Twitter's Bootstrap. Code example of Easy Sticky Footer using HTML, Javascript, jQuery, and CSS. This bootstrap tutorial covers all the major elements of responsive</p> </div> </div> </div> </div> <section class="copyright"> <div class="container"> <div class="row"> <div class="col-sm-6"> <p>Copyright © 2017. Your Company.</p> </div> <div class="col-sm-6"></div> </div> </div> </section> </footer> </body> </html>
footer.nb-footer { background: #222; border-top: 4px solid #b78c33; } footer.nb-footer .about { margin: 0 auto; margin-top: 40px; max-width: 1170px; text-align: center; } footer.nb-footer .about p { font-size: 13px; color: #999; margin-top: 30px; } footer.nb-footer .about .social-media { margin-top: 15px; } footer.nb-footer .about .social-media ul li a { display: inline-block; width: 45px; height: 45px; line-height: 45px; border-radius: 50%; font-size: 16px; color: #b78c33; border: 1px solid rgba(255, 255, 255, 0.3); } footer.nb-footer .about .social-media ul li a:hover { background: #b78c33; color: #fff; border-color: #b78c33; } footer.nb-footer .footer-info-single { margin-top: 30px; } footer.nb-footer .footer-info-single .title { color: #aaa; text-transform: uppercase; font-size: 16px; border-left: 4px solid #b78c33; padding-left: 5px; } footer.nb-footer .footer-info-single ul li a { display: block; color: #aaa; padding: 2px 0; } footer.nb-footer .footer-info-single ul li a:hover { color: #b78c33; } footer.nb-footer .footer-info-single p { font-size: 13px; line-height: 20px; color: #aaa; } footer.nb-footer .copyright { margin-top: 15px; background: #111; padding: 7px 0; color: #999; } footer.nb-footer .copyright p { margin: 0; padding: 0; }

Related: See More

Paper Kit 2
Bootstrap 4 Footer Design
Footer using Bootstrap 4
Social Icon Strip Footer

Questions / Comments: