Bootstrap Footer, Full Width Of Page

Question

i\'m designing a website with joomla and using the bootstrap framework. Now i have a problem by my footer. Basically i use a simple grid layout and i want the content part o

Answer 1

I do this and it is right:

@media(max-width:500px){

    .footer{
        float:left;
        width:109%;
        margin-left:-5%;
    }

}

Answer 2

I had the same problem and couldn't get my footer to span the entire width of the page. I used Chrome Dev Tools to see what was blocking the footer from expanding. I found that the problem was where I used the "Container" class. It adds padding each time and for some reason the footer would not be able to span past that padding on the page, even though it was in a separate div. I changed the container divs to have the "container-fluid" class and removed the padding for the "container-fluid" class in my CSS. The footer works now and the containers are still responsive. I had to manually adjust some of the elements which needed extra padding for my styling. Not sure if this is the proper solution but it worked for what I needed.

Answer 3

You can put your footer to separate <div class="container"> after the main content container. Then you can assign a container class which does not limit the width of the footer, like happens with main content. E.g.::

<div class="container">
      ...
</div>
<div id="footer" class="container-fluid">
    <div class="row">....</div>
</div>

Answer 4

for my needs, now i fixed it like you can see here: jsfiddle-example

.footer
{
    height: 50px;
    background-color: black;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
}

I have added "width: 100%", "position: absolute", "left: 0" and "right:0" to the css-class ".footer". I think decisive was the "position: absolute". Then i have to add the "left: 0" because the left side doesnt take the fullsize. after adding this it does. The "right: 0" i added, because of completeness. Doesnt know if it is needed in any other browser. Here it works also without it.