title: Bootstrap container fill sides with colors
body: <p>I have the following template using bootstrap :</p>
  
  <p><a href="https://i.stack.imgur.com/RtvpR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RtvpR.png" alt="![1600px](http://imgur.com/a/PjIH6)"></a></p>
  
  <p>I'm using a 1200px container for the blue/gray container and the image is 1600px.</p>
  
  <p>I would like to fill the left side of the blue container (400px) with blue and the right side of the gray container (800px) with gray, but the fillers can't go over 1600px. Basically it has to match with the picture above the 2 containers.</p>
  
  <p>Here is what I would like to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/2oJeh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2oJeh.png" alt="enter image description here"></a></p>
  
  <p>the content has to stay within 1200px, but the background colors must be filled to 1600px.</p>
  
  <p>If I resize the template to 1200ish pixels, it should look like the following picture.</p>
  
  <p><a href="https://i.stack.imgur.com/nXOpC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nXOpC.png" alt="enter image description here"></a>
  Do you guys have an idea how I could achieve that? Every solution I tried resolve around ditching the bootstrap container and the content get out of line when i resize, which is something I would like to avoid.</p>
  
  <p>Thank you!</p>
  
  <p>EDIT: Here is a bootply example if needed: <a href="http://www.bootply.com/APwOkhCfQD" rel="nofollow noreferrer">http://www.bootply.com/APwOkhCfQD</a></p>