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?

Rice

Are you looking for a "sticky footer" like this: bootply.com/75426 ? – Cyclothymia

Yes! But when I change the color for the footer it still does not go the full width of the page. It has margins on the side. How can you change that? – Rice

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.

Kruller

This is what I want - but I don't want the navbar to be fixed on the screen, I just want it to show up when you scroll to the bottom. When you change the class to navbar-static-bottom, is then doesn't go the full width of the screen. Any idea how to change that? – Rice

Are you wrapping the footer in any other divs? AFAIK that shouldnt happen unless a div with a 'container' class is wrapping your content. – Kruller

See Nitish's answer if using bootstrap 3 and you do not want to footer to be sticky. – Ashien

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

Hillary

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>

Arundel

This isn't full width for me. Was it for anyone? – Nightgown

Answer 4

<footer>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        This is your footer!
      </div>
    </div>
  </div>
</footer>

Account