Flushing footer to bottom of the page, twitter bootstrap
Found the snippets here works really well for bootstrap
Html:
<div id="wrap">
<div id="main" class="container clear-top">
<p>Your content here</p>
</div>
</div>
<footer class="footer"></footer>
CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
}
This is now included with Bootstrap 2.2.1.
Bootstrap 3.x
Use the navbar component and add .navbar-fixed-bottom
class:
<div class="navbar navbar-fixed-bottom"></div>
Bootstrap 4.x
<div class="navbar fixed-bottom"></div>
Don't forget to add body { padding-bottom: 70px; }
or otherwise the page content may be covered.
Docs: http://getbootstrap.com/components/#navbar-fixed-bottom