Flushing footer to bottom of the page, twitter bootstrap

abc.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;
} 

abc.html

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

Moving footer the the bottom of page using 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.