How to Create a 100% Screen Width Div Inside a Container in Bootstrap

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

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.

Bootstrap: Div with 100% width inside container

CSS has a unit vw, which stands for viewport width. 1vw represents 1% of the screen width.

Therefore, you can set width: 100vw to take up 100% of the screen width.

Update

For current markup you can set position: fixed, but you'll have to set correct top value manually. Unfortunately if your page is more than screen height your menu will keep the same position. Demo:

body {  margin: 0;}
.dropdown-menu {  position: fixed !important;  top: 56px;  right: 0;  left: 0;}
@media (max-width: 991px) {  .navbar-toggleable-md .navbar-nav .dropdown-menu {    top: 215px;  }}

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /><div class="container">  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">    <span class="navbar-toggler-icon"></span>  </button>    <a class="navbar-brand" href="#">Navbar</a>    <div class="collapse navbar-collapse" id="navbarNavDropdown">      <ul class="navbar-nav">        <li class="nav-item active">          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>        </li>        <li class="nav-item">          <a class="nav-link" href="#">Features</a>        </li>        <li class="nav-item">          <a class="nav-link" href="#">Pricing</a>        </li>        <li class="nav-item dropdown">          <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">          Dropdown link        </a>          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">            <a class="dropdown-item" href="#">Action</a>            <a class="dropdown-item" href="#">Another action</a>            <a class="dropdown-item" href="#">Something else here</a>          </div>        </li>      </ul>    </div>  </nav></div>

bootstrap css, how to make full width div inside container

I would do three different containers, each one holds header, full width and site content accordingly

<div class="container"></div> <!-- header here -->
<div></div> <!-- full width here -->
<div class="container"></div> <!-- site content here -->

How can I expand a child div to 100% screen width if the container div is smaller?

You can set the width based on the vw (viewport width). You can use that value too using the calc function, to calculate a left-margin for the div. This way you can position it inside the flow, but still sticking out on the left and right side of the centered fixed-width div.

Support is pretty good. vw is supported by all major browsers, including IE9+. The same goes for calc(). If you need to support IE8 or Opera Mini, you're out of luck with this method.

-edit-

As mentioned in the comments, when the content of the page is higher than the screen, this will result in a horizontal scrollbar. You can suppress that scrollbar using body {overflow-x: hidden;}. It would be nice though to solve it in a different way, but a solution using left and rightlike presented in Width:100% without scrollbars doesn't work in this situation.

-edit 2021-

Another work-around for the scrollbars, which may be acceptable or not depending on your situation:

By making the green div a little bit smaller, say 20px, you can keep a bit of space for the scrollbar. Half that reserved width can be added to the margin, to keep the wide div centered:

#wide-div {
  width: calc(100vw - 20px);
  margin-left: calc(-50vw + 50% + 10px);

div {
  min-height: 40px;
  box-sizing: border-box;
}
#container {
  position: relative;
}
#parent {
  width: 400px;
  border: 1px solid black;
  margin: 0 auto;
}

#something {
  border: 2px solid red;
}

#wide-div {
  width: calc(100vw - 20px);
  margin-left: calc(-50vw + 50% + 10px);
  border: 2px solid green;
}

<div id="container">
<div id="parent">
  <div id="something">Red</div>
  <div id="wide-div">Green

<br>Green
<br>Green
<br>Green
<br>Green
<br>Green
<br>Green
<br>Green
</div>
  <div id="something-else">Other content, which is not behind Green as you can see.</div>
</div>
</div>

Putting 100% width div inside page content's container in WordPress

I ended up just closing the divs before the full width section, and then opening them again afterwards. I'm actually using a shortcode for the section so I just added the HTML to close and then re-open the tags to the shortcode's output.

It certainly doesn't seem like best practice, but between that or a complicated jQuery alternative it was the easier way to go.

---

Related Topics