Extending div element's width past Bootstrap's container class

css, html, twitter-bootstrap

Solution

Change your design a little

    <!-- .footer's old home -->
    </container>
    <footer>
        <container>Your previous footer kids</container>
    </footer>
</body>

`.container` is a class, so it can have multiple occurrences.

Actually, I would bet that's why Bootstrap made .container a class, and NOT an id in the first place.

A fiddle: http://jsfiddle.net/V7Yyf/

BTW - `.container` has a width of 'auto' at certain viewport sizes (see: line #825 of bootstrap-responsive.css)

Problem

Bootstrap's container class has a width of 1170px which is great for display information, but I want my footer background to extend to the edges of the page, no matter what the screen size is. I've seen solutions suggesting I set a width of 2000px, but I would prefer a cleaner solution in case somebody is using a monitor with a large screen width. I also don't want to override Bootstrap's container class' width because that would mess up positioning of my elements. Is there a way in CSS to tell a background to spill out past it's containing div? Here is a JSFiddle Here is my current `.footer` class which is being bound by Bootstrap's `.container` class: ``` .footer { float: left; background: #000; margin-top:40px; width: 100% !important; height: 500px; position: absolute; } ```

Original source