Calvin Cheng Calvin Cheng - 1 year ago 74
CSS Question

Flushing footer to bottom of the page, twitter bootstrap

I am generally familiar with the technique of flushing a footer using css and this following approach.

But I am having some trouble getting this approach to work for Twitter bootstrap, most likely due to the fact that Twitter bootstrap is responsive in nature. Using Twitter bootstrap I am not able to get the footer to flush to the bottom of the page using the approach described in the above blog post.

Answer Source

Found the snippets here works really well for bootstrap


<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
<footer class="footer"></footer>


html, body {
  height: 100%;

#wrap {
  min-height: 100%;

#main {
  padding-bottom:150px; /* this needs to be bigger than footer height*/

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;

Source: Demo and Tutorial

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download