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