Make footer stick to bottom of page using Twitter Bootstrap

Question

I have some webpages that do not have much content and the footer sits in the middle of the page, but I want it to be at the bottom.

I have put all my pages in a "holder"

#holder {   min-height: 100%;   position:relative; } 

And then used the following CSS for my footer

ul.footer {   margin-top: 10px;   text-align: center; }  ul.footer li {   color: #333;   display: inline-block; }  #footer {   bottom: -50px;   height: 50px;   left: 0;   position: absolute;   right: 0; } 

The html for my footer

<div class="container">   <div class="row">     <div class="span12">       <div id="footer">         <ul class="footer">           <li>Website built by <a href="#">Fishplate</a></li>&nbsp;&nbsp;           <li>Email:[email protected]</li>         </ul>       </div>     </div>   </div> </div> 

I would like to keep the footer fluid.

Answer 1

just add the class navbar-fixed-bottom to your footer.

<div class="footer navbar-fixed-bottom"> 

Update for Bootstrap 4 -

as mentioned by Sara Tibbetts - class is fixed-bottom

<div class="footer fixed-bottom"> 

Answer 2

As discussed in the comments you have based your code on this solution: https://stackoverflow.com/a/8825714/681807

One of the key parts of this solution is to add height: 100% to html, body so the #footer element has a base height to work from - this is missing from your code:

html,body{     height: 100% } 

You will also find that you will run into problems with using bottom: -50px as this will push your content under the fold when there isn't much content. You will have to add margin-bottom: 50px to the last element before the #footer.