Ad · Get a lot more sales and subscribers with an Exit-Intent popup!

How to Make Footer Stay at Bottom of Page with Bootstrap

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.

footer not staying at the bottom of the page
Footer doesn’t stay at the bottom of the page

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.

Note that I’m not referring to making the footer fixed or sticky. Those are different things.

Step 1

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.

So, the <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.

Step 2

Add the mt-auto class to the <footer> or wrapper if you use any.

<footer class="mt-auto">

mt-auto means 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!

Footer at the bottom of the page

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.

Ad · Stencil is my preferred graphic design tool for my blog. Check it out for free.

Leave a Comment