I was tweaking my WordPress site icon generator, which is designed with Bootstrap, and one thing that I wanted to fix is the footer that wasn’t staying at the bottom of the pages that have little content.
It looks ugly and unprofessional.
And yes, I kept it like that in production. And yes, I’m ashamed of myself.
Anyway, the good news is that the fix is simple.
Make the Footer Stay at the Bottom of the Page with Bootstrap
Here’s what you need to do to make the footer stay at the bottom of the page when there’s not enough content to push it down.
Add the following Bootstrap classes in the
<body> tag or a wrapper.
d-flex flex-column min-vh-100
I’m using Bootstrap 5-beta2, but I think they’re available since Bootstrap added
flexbox in version… 4+? Something like that.
<body> tag should look like this.
<body class="d-flex flex-column min-vh-100>
We’re making it flex, with the content in columns, from top to bottom, and with a minimum height of 100vh, which means that the element will be equal to 100% of the viewport’s height.
I hope that I explained it correctly. 🙂 If not, let me know in the comments.
mt-auto class to the
<footer> or wrapper if you use any.
margin-top: auto, and this is what eventually pushes the footer to the bottom of the page.
That’s it! Now the pesky footer knows its place!
I haven’t noticed anything wrong after this. If you find some downsides, let me know in the comments.
That’s a Wrap
I hope that this tutorial helped you out, and you managed to make the footer stay at the bottom of your page.
If you have questions or thoughts, feel free to leave a comment below.