Getting a footer to stick to the bottom with bootstrap 3

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?

Are you sure that you see in the documentation - http://getbootstrap.com/examples/sticky-footer/ — Luís P. A., Jan 14 '15 at 16:36
I have come across this. If I remember correctly it was for one of the earlier versions of bootstrap? 2.something? I also tried that and had no success. — scapegoat17, Jan 14 '15 at 16:39
possible duplicate of [Twitter Bootstrap 3 Sticky Footer](http://stackoverflow.com/questions/17966140/twitter-bootstrap-3-sticky-footer) — Sleek Geek, Jan 14 '15 at 16:44

Luís P. A. · Answer 1 · 2015-01-14T16:45:43.043

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 <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> 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

Hugo Yates · Accepted Answer · 2015-01-14T16:57:38.233

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;
}

edited Jan 14 '15 at 16:57

answered Jan 14 '15 at 16:43

Hugo Yates

2,081
2
26
24

How would I go about making the footer the inverse color. To my knowledge this just puts the footer at the bottom and no background color at all – scapegoat17 Jan 14 '15 at 16:52
Yes and doing this pushes the footer to the top under 980px – scapegoat17 Jan 14 '15 at 16:59
To the top of the screen? – Hugo Yates Jan 14 '15 at 17:02
Yes well as high as it can go before something on top of it pushes it down. – scapegoat17 Jan 14 '15 at 17:07
Sounds like you have it placed inside another container, can you amend your question with your html? – Hugo Yates Jan 14 '15 at 17:18

Getting a footer to stick to the bottom with bootstrap 3

2 Answers2