Irshu Irshu - 6 months ago 64
HTML Question

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

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 do i make the
.full-width-div
stretch to the full width of the screen? Because now its limited inside the container.

Can someone help me?

Answer

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.

Comments