Irshu Irshu - 5 months ago 44
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">

Now how do i make the
stretch to the full width of the screen? Because now its limited inside the container.

Can someone help me?


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.