Footer in Bootstrap, that extends with content or sticks to the bottom

Question

I have been looking for a way to add a footer to a Twitter Bootstrap 3 project I am working on.

What I want is for the footer to stick to the bottom of the page when

Answer 1

These days almost all browsers support viewport units. So used it to have sticky footer. It worked for me.

You can check viewport support here.

Adjust min-height for desired footer position when there is no content.

#main {
   min-height: 70vh;
}

Header: Sticky footer example

   
     
  

    

      Less content
    
    

      No content
    
    

      More content
    
  

  
  

    

      
Content 1: Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
    
    

    
    

      
Content 0
      
Content 1
      
Content 2
      
Content 3
      
Content 4
      
Content 5
      
Content 6
    
  
   




   Footer