Bootstrap 4 Sticky Footer Not Sticking

Question

Not really sure why the sticky footer isn't working in Bootstrap 4. I have a TYPO3 website which I am a beginner at.

The sticky footer is not sticking at the bottom of the page.

Here is a copy of the page source as it has been rendered.

I basically copied the html file from bootstraps docs folder and then modified it and copied it into my TYPO3 template.

If I fill the page with content, the footer does not stick - I have to scroll the page down to see it.

Answer 1

Update 2020 - Bootstrap 4.5+

Now that Bootstrap 4 is flexbox, it's easier to use flexbox for the sticky footer.

<div class="d-flex flex-column min-vh-100">
    <nav>
    </nav>
    <main class="flex-fill">
    </main>
    <footer>
    </footer>
</div>

Bootstrap 4.0 Sticky Footer (4.0.0)
Simple Footer at Bottom Example (4.5.0)

Note: The flex-fill utility was included in Bootstrap 4.1 at later release. So after that release the extra CSS for flex-fill won't be needed. Additionally min-vh-100 is included in newer Bootstrap 4 releases.

Also see: Bootstrap 4 - Sticky footer - Dynamic footer height