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

Update 2019

There is difference between the "fixed" footer and "sticky" footer... you want the sticky footer.

Bootstrap 3

Use the standard "Sticky Footer" example. This method wraps the entire page content and pushes the footer down.

Here is a working demo: http://bootply.com/93620

  
  

   ...
  
  
    
    
  


  Footer


/* Sticky footer styles
-------------------------------------------------- */

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

---

Bootstrap 4

Because flexbox is default in Bootstrap 4, the "sticky" footer is easier.

    

    
    

    
    

    


body, wrapper {
   min-height:100vh;
}

main {
    flex:1;
}

Demo: Bootstrap 4 Sticky Footer

The other scenario is a bottom footer that is always at the bottom and the content doesn't push it below the viewport. Instead the content area scrolls as needed instead of the body. This is the full-height "app" layout..

Demo: Bootstrap 4 Bottom Footer