Bootstrap 3 Flush footer to bottom. not fixed

by

There is a simplified solution from bootstrap here (where you don’t need to create a new class): http://getbootstrap.com/examples/sticky-footer-navbar/

When you open that page, right click on a browser and “View Source” and open the sticky-footer-navbar.css file (http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css)

you can see that you only need this CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

for this HTML

<html>
    ...
    <body>
        <!-- Begin page content -->
        <div class="container">
        </div>
        ...

        <footer class="footer">
        </footer>
    </body>
</html>

More Related Contents:

  1. Fixed footer in Bootstrap
  2. How To Create This Type of Structure in html css and bootstrap?
  3. vertical-align with Bootstrap 3
  4. Bootstrap row with columns of different height
  5. How can I override Bootstrap CSS styles?
  6. Bootstrap full-width with 2 different backgrounds (and 2 columns)
  7. Fix footer to bottom of page
  8. Bootstrap 4: Multilevel Dropdown Inside Navigation
  9. Twitter Bootstrap 3 Sticky Footer
  10. Extend bootstrap row outside the container
  11. How to center nav-items in Bootstrap? [duplicate]
  12. Create a responsive navbar sidebar “drawer” in Bootstrap?
  13. How to make Bootstrap 4 cards the same height in card-columns?
  14. Bootstrap – align button to the bottom of card
  15. Bootstrap: add margin/padding space between columns
  16. How to remove focus around buttons on click
  17. Bootstrap – 5 column layout
  18. Is there a way to get a web page header/footer printed on every page?
  19. Bootstrap 4 – Sticky footer – Dynamic footer height
  20. Bootstrap 4 – Responsive cards in card-columns
  21. How to center content in a Bootstrap column?
  22. How to implement curve background in CSS? [duplicate]
  23. How do I add a margin between bootstrap columns without wrapping [duplicate]
  24. Inline Form nested within Horizontal Form in Bootstrap 3
  25. Why does `transform` break `position: fixed`?
  26. Bootstrap navbar: nothing is displayed on smaller devices
  27. Text-align class for inside a table
  28. How to move placeholder to top on focus AND while typing?
  29. Maintain image aspect ratio in carousel
  30. Can a div have multiple classes (Twitter Bootstrap) [duplicate]

Leave a Comment