How to make footer the width of the full window in Bootstrap 3?

Question

I have been trying to get the footer on my page to go the full width of the window (like the navbar) while being static on the page, but haven't been able to figure out how to do so.

How can you do this? I've tried both:

<div class="footer">
    <p>This is a footer</p>
</div>

and

<div class="navbar navbar-static bottom">
   <p>This is a static navbar</p>
</div>

but neither of them runs the fill width of the page, rather they have margins on each side. How is it possible to change that without messing up the responsive resizing in bootstrap?

Answer 1

If you take a look at the bootstrap documentation site: http://getbootstrap.com, you can see what navbar classes they are using to achieve the effect youre describing. They have something like:

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

</div>

The navbar div itself shouldnt be wrapped in any containers to avoid adding a margin.

Answer 2

Try this :

<footer>
    <div class="footer">
       <div class="container narrow row-fluid">
          <div class="span4">
          </div>
          <div class="span3">
          </div>
          <div class="span5">
          </div>
       </div>
    </div>
</footer>

Add background-color to class .footer to see the effects

Answer 3

It is quite late to answer this question but in case you are using bootstrap 3.0 and above

<footer class="section section-primary">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                </div>
                <div class="col-sm-6">
                </div>
            </div>
        </div>
  </footer>