Bootstrap Sticky Footer

Question

Whats the best way to get the footer im trying to make always stick to the bottom of the page no matter how much or how little text it on the page. I have tried several different ideas but with the new bootstrap it doesn't want to cooperate. I have tried fixed and it is not what I'm wanting.

Im wanting the bottom black footer bar to always align to the bottom of the page.

My CSS:

/* Chrome Frame Prompt
-------------------------------------------------- */
.chromeframe{ margin: .2em 0; background: #ECCC5B; color: #000000; margin-top: -55px; margin-bottom: 55px; padding: .2em 0; z-index: -100 ; text-align :center; }

/* Bootstrap Styles
-------------------------------------------------- */
.navbar-inverse { background-color: #3A3A3A; border-color: #3A3A3A; }
.navbar-inverse .navbar-brand { color: #BE1E2D; font-weight: bold; margin-top: 12px; padding-left: 40px; }
.navbar-inverse .navbar-toggle { margin-top: 20px; }
.navbar-inverse .navbar-nav>li>a { color: #FFFFFF; height: 75px; padding-top: 28px; }
.navbar-inverse .navbar-nav>li>a:hover { color: #BE1E2D; }
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #BE1E2D; }
.dropdown-menu { background-color: #080808; border: none; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; }
.dropdown-menu>li>a { line-height: 1.6; color: #FFFFFF; }
.dropdown-menu>li>a:hover { line-height: 1.6; color: #BE1E2D; }

/* Main Styles
-------------------------------------------------- */
html, body { position: relative; min-height: 100%; }
body { -webkit-font-smoothing: antialiased; font: normal 16px/1.5; color: #232525; padding-top: 50px; padding-bottom: 20px; }

.logo { float: left; }
.logo:hover { }

.main-container { padding-bottom: 100px; }
.main-row { padding-top: 15px; }

.footer { position: absolute; color: #999999; background-color: #000000; bottom: 0; width: 100%; height: 100px;  }
.logo-footer { float: left; margin-top: 13px; }
.footer-nav { color: #999999; display: block; float: left; margin: 40px 0 0 15px; }
.footer-copy { float: right; margin: 40px 0 0 0; text-align: left; }

/* RESPONSIVE CSS
--------------------------------------------------*/
@media (max-width:1150px) { 

}
@media (max-width:900px) { 

}
@media (max-width:767px) { 
    .navbar-inverse .navbar-nav>li>a { height: 40px; padding-top: 11px; }
    .footer-copy { float: none; text-align: center; }
}
@media (max-width:340px) { 

}

please clarify your question , as it is not really clear , describe what you want to do exactly. — ProllyGeek, Jul 18 '14 at 15:33
http://stackoverflow.com/questions/17966140/twitter-bootstrap-3-sticky-footer?rq=1 — ness-EE, Jul 18 '14 at 16:12

Simon · Accepted Answer · 2014-07-18T15:55:57.200

A solution is to ensure your content is always at least the height of the screen, this will cause the footer to be pushed to the bottom of the screen if the window is large enough.

Wrap your page content (excluding footer) in another <div> and in its style, set min-height to 100%

The downside of this is that the footer now hangs off the window constantly, to fix that, allow the footer to "sink" back up into the content by setting margin-bottom to negative the size of the footer (i.e if your footer is 50px, margin-bottom: -50px).

Another quirk you'll find after that is the footer may overlap the page content, to fix that, insert an element into the wrapper div from earlier and make its height that of the footer.

For example:

body, html {
    height: 100%;
    margin: 0;
}

.wrapper {
    min-height: 100%;
    margin-bottom: -50px;
}

.push {
    height: 50px;
}

.footer-pad {
    height: 50px;
}

<div class="wrapper">
    <div class="container>
        Some content
    </div>
    <div class="footer-pad"></div>
</div>
<div class="footer">Footer</div>

A couple of important things to note are the html, body must be set to 100% height, and the body must have no margin or you'll get a constant scrollbar

http://jsfiddle.net/XJDLk/

This did not fix the problem. While it appears it fixes the problem, if there is more content that should cause scrolling it stay stationary. — John Ayers, Jul 18 '14 at 18:21
I've only ever used this with a ` width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no` viewport. Having a look at your css, you need to set body, html to height 100%, not min-height — Simon, Jul 18 '14 at 18:23

score 0 · Answer 2 · edited Aug 05 '14 at 13:08

I used this in my recent boostrap site. Hope it helps.

HTML

<div class="footer_wrapper">
    <div class="container">
        <div class="col-md-3 col-sm-3">
            content
        </div>
        <div class="col-md-3 col-sm-3">
            content
        </div>
        <div class="col-md-3 col-sm-3">
            content
        </div>
        <div class="col-md-3 col-sm-3">
            content
        </div>
    </div>
</div>

css

.footer_wrapper {
  min-height: 270px;
  background-color: #232323;
  color: #8f8f8f;
  bottom: 0;
  padding-top: 0px;
  width: 100%;
}

Bootstrap Sticky Footer

2 Answers2