"Footer"
Bootstrap 3.2.0 Snippet by kdawgwilk

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <body> <div class="wrapper"> <div class="container"> <p>Main content</p> <p>Main content</p> <p>Main content</p> <p>Main content</p> <p>Main content</p> <p>Main content</p> <p>Main content</p> <p>Main content</p> <p>Main content</p> <p>Main content</p> <p>Main content</p> <p>Main content</p> <p>Main content</p> <p>Main content</p> <p>Main content</p> <p>Main content</p> <p>Main content</p> <p>Main content</p> <p>Main content</p> <p>Main content</p> </div> </div> <footer> <p>Centred footer content</p> </footer> </body>
.wrapper { min-height: 100%; } .container { overflow: auto; padding-bottom: 100px } footer { position: relative; clear: both; height: 100 margin-top: -100px }
(function () { $(document).ready(function() { setFooterHeight(); }); $(window).resize(function() { setFooterHeight(); }); function setFooterHeight() { var container = $(".container"), footer = $("footer"), overlap = 25, footerHeight = $(window).height() - container.height(), totalHeight = footerHeight + overlap; if ( footerHeight < 0 ) { footer.css({ "margin-top" : -overlap }); } else { container.css({ "padding-bottom" : footerHeight }); footer.css({ "margin-top" : -totalHeight, "height" : totalHeight }); } } })();

Related: See More

Rotating CSS Card
Bootstrap 4 Footer Design
Footer using Bootstrap 4
Social Icon Strip Footer

Questions / Comments: