Bootstrap 4 - Sticky footer - Dynamic footer height

Question

I need to put a sticky footer on my pages , however i don\'t have a definite height set for my footer . On smaller screens - the rows resize and footer becomes longer .

Answer 1

Now that Bootstrap 4 is flexbox, a sticky footer can be done using...

    

    
    

    
    

    


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

.flex-fill {
   flex:1 1 auto;
}

Demo: Bootstrap 4.0 Sticky Footer

Note: The flex-fill utility class is included in the Bootstrap 4.1 and later release. So after that release the extra CSS for flex-fill won't be needed.

As of Bootstrap 4.1, there is a min-vh-100 utility class which means you don't need the extra CSS.

Demo: Bootstrap 4.1+ Sticky Footer