How to create a 100% screen width div inside a container in bootstrap?
css, html, twitter-bootstrap, twitter-bootstrap-3
Solution
2019's answer as this is still actively seen today
You should likely change the .container to .container-fluid, which will cause your container to stretch the entire screen. This will allow any div's inside of it to naturally stretch as wide as they need.
original hack from 2015 that still works in some situations
You should pull that div outside of the container. You're asking a div to stretch wider than its parent, which is generally not recommended practice.
If you cannot pull it out of the div for some reason, you should change the position style with this css:
.full-width-div {
position: absolute;
width: 100%;
left: 0;
}
Instead of absolute, you could also use fixed, but then it will not move as you scroll.
Problem
Let's say i have the following markup: ``` <div class="container"> <div class="row"> <div class="col-md-12"> ... <div class="full-width-div"> </div> </div> </div> </div> ``` Now how to make `.full-width-div` stretch to the full width of the screen? Because currently it's limited inside the container.