Sticky Footer not sticky to bottom of screen on larger devices - Bootstrap

Question

I am trying to create a sticky footer that sticks to the bottom of the screen (not fixed), and moves down according to the amount of content added.

On larger screens the footer doesnt stick.

View Here: http://www.bootply.com/VxVeDahZzG

Answer 1

I think you need to change the size of your body to 100%. Here is a nice site that helped me figure it out. http://ryanfait.com/sticky-footer/

Here is how he does it:

* {
margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important; 
    height: 100%;
    margin: 0 auto -155px; 
 }
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

You also need to take your footer outside of your body for this to work.