Bootstrap 4 – Sticky footer – Dynamic footer height

by

Now that Bootstrap 4 is flexbox, a sticky footer can be done using…

<wrapper class="d-flex flex-column">
    <nav>
    </nav>
    <main class="flex-fill">
    </main>
    <footer>
    </footer>
</wrapper>

body, wrapper {
   min-height:100vh;
}

.flex-fill {
   flex:1 1 auto;
}

Demo: Bootstrap 4.0 Sticky Footer

Note: The flex-fill utility class is included in the Bootstrap 4.1 and later release. So after that release the extra CSS for flex-fill won’t be needed.

As of Bootstrap 4.1, there is a min-vh-100 utility class which means you don’t need the extra CSS.

Demo: Bootstrap 4.1+ Sticky Footer

Leave a Comment

tech