title: How to create a sticky footer that plays well with Bootstrap 3
body: <p>With or without a top nav, it is very common for sites to have a sticky footer.  Bootstrap has a facility to easily create <strong>fixed</strong> footers, but <em>no such facility</em> for creating <strong>sticky</strong> footers - there is a big difference.</p>
  
  <p>Googling this question will reveal that hundreds if not thousands of developers have the same question but with no good answer.</p>
  
  <p>Ironically, the <a href="http://getbootstrap.com/components/">Bootstrap documentation</a> page itself has a sticky footer alongside bootstrap styling and a fixed top navbar.  It's all custom css though, and not part of the framework.  So an obvious route is to take and refactor their custom styling, since it obviously plays well within the Bootstrap framework, but that seems more painful than it ought to be.</p>
  
  <p>See <a href="http://plnkr.co/edit/H6HcBC?p=preview">this plunkr</a> for an example page with a Bootstrap top navbar, and an undesirable, non-sticky footer.</p>
  
  <p>Problem:</p>
  
  <p><em>(Thanks Softlayer - for the <a href="http://blog.softlayer.com/2012/tips-and-tricks-pure-css-sticky-footers/">graphics</a>)</em></p>
  
  <p><img src="https://i.stack.imgur.com/ZQJL4.jpg" alt="A non-sticky footer is pretty ugly"></p>
  
  <p>Desired Solution:</p>
  
  <p><img src="https://i.stack.imgur.com/YvCtc.jpg" alt="A sticky footer is always at the bottom"></p>
  
  <p>Of course the footer should be responsive and cross-browser friendly as well...</p>