In a lot of projects, I find myself Googling around to find out how to make my footer behave as I want. It turns out that what I want is this:
A sticky footer, pushed all the way to the bottom, regardless if the content or not fill the vertical space, and at last, it needs to be responsive. This means fixed height won’t do.
Here is how I do it using Bootstrap 4
html{
height:100vh;
overflow-x:hidden;
}
body{
font-size: 0.75rem;
overflow-x:hidden;
display:flex;
flex-direction:column;
min-height:100vh;
}
<html>
<body class="d-flex flex-column min-vh-100 vh-100">
<div class="wrapper d-flex flex-column" style="height:100vh;">
<div class="content">This app, will rule the world.</div>
<footer class="mt-auto">Footer goes here</footer>
</div>
</body>
</html>