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