Getting a footer to stick to the bottom with bootstrap 3 - css

Question

Am I missing something on this? I feel like I have looked through their site documentation a handful of times and have not found anything on footers.
I am just looking to have a regular inverse color footer that will stick to the very bottom of the screen even if there is nothing to keep it there. When there is content that is longer than the screen's height it will push it down to the bottom still.
Right now I have this:
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<span>testing</span>
</div>
</div>
</div>
but every time the screen resolution goes under 980px the footer jumps to the very top of the screen. I haven't worked with bootstrap very much and this seems like something that they should have accounted for and that I am probably missing something critical here. Would anyone be able to explain the reasoning for this?

Answer 1

You can achieve the sticky footer in Bootstrap 3 with this:
CSS
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;
}
HTML
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use the sticky footer with a fixed navbar if need be, too.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
DEMO HERE

Answer 2

This works for me in Bootstrap 3.3.1
<div class="container">
[...]
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">my footer</p>
</div>
</footer>
make sure the footer tag is outside the container div
you need the sticky-footer.css too which is here
Edit:
To do what you're asking in the comments, have you tried this?:
<footer class="footer">
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<span>testing</span>
</div>
</div>
</div>
</footer>
Also you need to tweak the css class for .footer:
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* height: 60px; */
background-color: #f5f5f5;
}