@mrpbennett

Sticky footer with flexbox and Bootstrap 4

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