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

user2512696 picture user2512696 · Oct 29, 2013 · Viewed 21.2k times · Source

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

Alex picture Alex · Oct 29, 2013

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.