How to create a 100% screen width div inside a container in bootstrap? [duplicate]

Question

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.

Answer 1

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.

Answer 2

You should use container-fluid, not container. See example: http://www.bootply.com/onAFpJcslS