CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
scapegoat17
scapegoat17

Reputation: 5841

Getting a footer to stick to the bottom with bootstrap 3

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?

Upvotes: 2

Views: 4469

Answers (2)

Hugo Yates
Hugo Yates

Reputation: 2111

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

Upvotes: 2

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

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

Upvotes: 3

Related Questions