html - Fixed footer in Bootstrap

Question

I'm trying out Bootstrap and I was wondering, how I can fix the footer on the bottom without having it disappear from the page if the content is scrolled?

Answer 1

To get a footer that sticks to the bottom of your viewport, give it a fixed position like this:

footer {
    position: fixed;
    height: 100px;
    bottom: 0;
    width: 100%;
}

Bootstrap includes this CSS in the Navbar > Placement section with the class fixed-bottom. Just add this class to your footer element:

<footer class="fixed-bottom">

Bootstrap docs: https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom