Flushing footer to bottom of the page, twitter boo

Question

I am generally familiar with the technique of flushing a footer using css and this following approach.

But I am having some trouble getting this approach to work for Twitter bootstrap, most likely due to the fact that Twitter bootstrap is responsive in nature. Using Twitter bootstrap I am not able to get the footer to flush to the bottom of the page using the approach described in the above blog post.

Answer 1

#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

The footer height matches the size of the bottom indent of the wrap element.

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}

Answer 2

In the latest version of bootstrap 4-alpha, I was able to do it using .fixed-bottom class.

<div class="fixed-bottom"></div>

Here's how I use it with the footer:

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

You can find more information in the placement documentation here.

Answer 3

another possible solution, just using media queries

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}

Answer 4

A working example for Twitter bootstrap NOT STICKY FOOTER

<script>
$(document).ready(function() {

    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;

    if (footerTop < docHeight)
        $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>

You need at least an element with a #footer

When not want the scrollbar if content would fit to screen just change the value of 10 to 0
The scrollbar will show up if content not fits to screen.

Answer 5

You need to wrap your .container-fluid div in order for your sticky footer to work, you're also missing some properties on your .wrapper class. Try this:

Remove the padding-top:70px from your body tag and include it in your .container-fluid instead, like so:

.wrapper > .container-fluid {
    padding-top: 70px;
}

We have to do this because pushing the body down to accommodate the navbar ends up pushing the footer a bit further (70px further) past the viewport so we get a scrollbar. We get better results pushing the .container-fluid div instead.

Next we have to remove the .wrapper class outside your .container-fluid div and wrap your #main div with it, like so:

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>  

Your footer of course has to be out of the .wrapper div so remove it from the `.wrapper div and place it outside, like so:

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

After thats all done, properly push your footer closer to your .wrapper class by using a negative margin, like so:

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

And that should work, though you're probably going to have to modify a few other things to make it work when the screen is resized, like resetting the height on the .wrapper class, like so:

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}

Answer 6

Use the navbar component and add .navbar-fixed-bottom class:

<div class="navbar navbar-fixed-bottom"></div>

add body

  { padding-bottom: 70px; }