Make footer stick to bottom of page using Twitter Bootstrap
CssTwitter BootstrapCss Problem Overview
I have some webpages that do not have much content and the footer sits in the middle of the page, but I want it to be at the bottom.
I have put all my pages in a "holder"
#holder {
min-height: 100%;
position:relative;
}
And then used the following CSS for my footer
ul.footer {
margin-top: 10px;
text-align: center;
}
ul.footer li {
color: #333;
display: inline-block;
}
#footer {
bottom: -50px;
height: 50px;
left: 0;
position: absolute;
right: 0;
}
The html for my footer
<div class="container">
<div class="row">
<div class="span12">
<div id="footer">
<ul class="footer">
<li>Website built by <a href="#">Fishplate</a></li>
<li>Email:[email protected]</li>
</ul>
</div>
</div>
</div>
</div>
I would like to keep the footer fluid.
Css Solutions
Solution 1 - Css
just add the class navbar-fixed-bottom to your footer.
<div class="footer navbar-fixed-bottom">
Update for Bootstrap 4 -
as mentioned by Sara Tibbetts - class is fixed-bottom
<div class="footer fixed-bottom">
Solution 2 - Css
As discussed in the comments you have based your code on this solution: https://stackoverflow.com/a/8825714/681807
One of the key parts of this solution is to add height: 100% to html, body so the #footer element has a base height to work from - this is missing from your code:
html,body{
height: 100%
}
You will also find that you will run into problems with using bottom: -50px as this will push your content under the fold when there isn't much content. You will have to add margin-bottom: 50px to the last element before the #footer.
Solution 3 - Css
Most of the above mentioned solution didn't worked for me. However, below given solution works just fine:
<div class="fixed-bottom">...</div>
Solution 4 - Css
http://bootstrapfooter.codeplex.com/
This should solve your problem.
<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
Your content here.
</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
</footer>
CSS:
html,body
{
height:100%;
}
#wrap
{
min-height: 100%;
}
#main
{
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer
{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
color:#fff;
}
Solution 5 - Css
Here is an example using css3:
CSS:
html, body {
height: 100%;
margin: 0;
}
#wrap {
padding: 10px;
min-height: -webkit-calc(100% - 100px); /* Chrome */
min-height: -moz-calc(100% - 100px); /* Firefox */
min-height: calc(100% - 100px); /* native */
}
.footer {
position: relative;
clear:both;
}
HTML:
<div id="wrap">
<div class="container clear-top">
body content....
</div>
</div>
<footer class="footer">
footer content....
</footer>
Solution 6 - Css
Use the bootstrap classes to your advantage. navbar-static-bottom leaves it at the bottom.
<div class="navbar-static-bottom" id="footer"></div>
Solution 7 - Css
It could be easily achieved with CSS flex. Having HTML markup as follows:
<html>
<body>
<div class="container"></div>
<div class="footer"></div>
</body>
</html>
Following CSS should be used:
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
body > .container {
flex-grow: 1;
}
Here's CodePen to play with: https://codepen.io/webdevchars/pen/GPBqWZ
Solution 8 - Css
I have found a simple solution for this.
For body tag add
<body class="d-flex flex-column min-vh-100">.
On footer tag add class
> mt-auto
The entire code looks as follows
<html>
<head> </head>
<body class="d-flex flex-column min-vh-100">
<div class="container-fluid"></div>
<footer class="mt-auto"></footer>
</html>
This is working for bootstrap 4+ and tested till 5 beta 1