I have always struggled with keeping that pesky footer at the bottom of the page. I always forgot how to keep it where it belongs, after searching around the web looking through many pure HTML and CSS work arounds.
I found flexbox! Now it’s super easy!!
Content can change. Things are flexible. Fixed heights are usually red flag territory. Using flexbox for a sticky footer not only doesn’t require any extra elements, but allows for a variable height footer.
<html lang="en" class="h-100"> <head> <!-- ... --> </head> <body class="h-100 d-flex flex-column"> <div class="wrapper flex-grow-1 flex-shrink-0"> content </div> <footer class="footer flex-shrink-0"> <!-- footer here --> </footer> </body> </html>
And there you have it, you will have a sticky footer! Without even writing a single line of CSS all thanks too Bootstrap 4.
For this to work just make sure you have added the Bootstrap 4 CSS to your site. Which you can get here