Bootstrap design container-fluid with differens color - html

Question

I would like to achieve the following:
Have a fluid container with one background color on each side - but the separator should be two cols in the inside container.
I tried to describe it in this picture. Is this even possible?

Answer 1

use css positions and after/before see the link below:
Codepen
.container {
background: #ddd;
height: 250px;
}
.extra1 {
height: 250px;
background: #fff;
position: relative;
z-index: 999;
}
.extra2 {
height: 250px;
background: #000;
}
.extra1:before {
content: '';
background: yellow;
position: absolute;
width: 300%;
top: 0px;
height: 100%;
left: -200%;
}
.extra2:before {
content: '';
background: green;
position: absolute;
width: 300%;
top: 0px;
height: 100%;
right: -200%;
}
.your-things {
position: absolute;
left: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4 extra1">
<div class="your-things">
<p>.col-md-4</p>
</div>
</div>
<div class="col-md-8 extra2">
<div class="your-things">
<p>.col-md-8</p>
</div>
</div>
</div>
</div>

Answer 2

This can be done using psuedo element before and after on .container-fluid class or give any other class name.
Here is a code pen demo:
`http://codepen.io/duptitung/pen/adNOpV`

Answer 3

ya, you can give background image of the specific color and place it on that specific region
css
.container-fluid{
background:url( //image link// );
background-position: // arrange image // ;
background-size: auto 100%;
}