Fixed footer in Bootstrap
HtmlCssTwitter BootstrapFooterHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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
Solution 2 - Html
Add this:
<div class="footer navbar-fixed-bottom">
https://stackoverflow.com/a/21604189
EDIT: class navbar-fixed-bottom
has been changed to fixed-bottom
as of Bootstrap v4-alpha.6.
http://v4-alpha.getbootstrap.com/components/navbar/#placement
Solution 3 - Html
Add fixed-bottom:
<div class="footer fixed-bottom">
Solution 4 - Html
Add z-index:-9999;
to this method, or it will cover your top bar if you have 1
.
Solution 5 - Html
Another solution :
You can use "min-height: 80vh;".
This allows you to set the minimum height, using the viewport height.
Example with bootstrap :
<style>
main {
min-height: 80vh;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
</style>
<main class="container">
<!-- Your page content here... -->
</main>
<footer class="footer navbar-fixed-bottom">
<!-- Your page footer here... -->
</footer>
|Compatibility : | | -------- | -------------- | -------------- | -------------- | -------------- | |Chrome 31+ / FireFox 31+ / Safari 7+ / Internet Expl. 9+ / Opera 29+ |
More information : https://developer.mozilla.org/fr/docs/Web/CSS/length
Solution 6 - Html
You can do this by wrapping the page contents in a div with the following id styling applied:
<style>
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
</style>
<div id="wrap">
<!-- Your page content here... -->
</div>
Worked for me.
Solution 7 - Html
You might want to check that example: http://getbootstrap.com/2.3.2/examples/sticky-footer.html