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

More Related Contents:

  1. Bootstrap row with columns of different height
  2. Bootstrap 4: Multilevel Dropdown Inside Navigation
  3. Animate/Shrink NavBar on scroll using Bootstrap
  4. One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
  5. How to center nav-items in Bootstrap? [duplicate]
  6. Create a responsive navbar sidebar “drawer” in Bootstrap?
  7. Bootstrap 4 Cards of same height in columns
  8. How to make Bootstrap 4 cards the same height in card-columns?
  9. Bootstrap – align button to the bottom of card
  10. Bootstrap 4 – Responsive cards in card-columns
  11. Align the form to the center in Bootstrap 4 [duplicate]
  12. Bootstrap navbar link color won’t change
  13. Empty vertical space between columns in Bootstrap 4
  14. Bootstrap navbar: nothing is displayed on smaller devices
  15. Why aren’t my bootstrap 4 columns the same height?
  16. CSS float-right not working in Bootstrap 4 Navbar [duplicate]
  17. How to make Bootstrap cards the same height in card-columns?
  18. How To Create This Type of Structure in html css and bootstrap?
  19. How can I override Bootstrap CSS styles?
  20. Bootstrap full-width with 2 different backgrounds (and 2 columns)
  21. Twitter Bootstrap 3 Sticky Footer
  22. Bootstrap – 5 column layout
  23. My Footer Floats
  24. How do I add a margin between bootstrap columns without wrapping [duplicate]
  25. How to center cards in bootstrap 4?
  26. Bootstrap 3 Glyphicons CDN
  27. Text-align class for inside a table
  28. What is the purpose of .row in Bootstrap? [duplicate]
  29. How to center buttons in Twitter Bootstrap 3?
  30. Bootstrap – Fill fluid container between header and footer

Leave a Comment