Web Development

How to Make Footer Stay at Bottom of Page with Bootstrap

Radu

@RaduWP

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.

About Radu

I've been working online, from home, for over 8 years. I've learned a lot of stuff, such as SEO, web development, and so on, but my main expertise is WordPress.

4 Comments

  1. Hi, I’m trying to follow your guide here:
    https://car-listing-project-staging.herokuapp.com/user/login

    However, it doesn’t seem to be working. What am I missing?

    1. Hmmm… are you using PurgeCSS and added those classes after the purge, so they’re not found in the final Bootstrap CSS files? I used to do that mistake sometimes.

Leave a Reply to Radu Cancel reply

Your email address will not be published. Required fields are marked *