Reputation: 5622
Here is what I am trying to achieve using Bootstrap:-
The red lines show the where container div is.
The thing I am having an issue with is the background colours. So for example if I did something as follows:-
<div class="container-fluid">
<div style="background: #888;" class="col-md-8">
left content
</div>
<div style="background: #999;" class="col-md-4">
right content
</div>
</div>
The backgrounds are how I want them to be but the 'left content' and 'right content' would then not be inside the 'container' like the rest of the sites content as shown below:-
How could I achieve this?
I'll explain further if this is not clear enough, thanks.
Upvotes: 1
Views: 1265
Reputation: 4901
One solution is to warp the container and add a gradient background to it. That background should only be visible when the two columns are next to each other.
CSS
@media (min-width: 992px ) {
.wrap { background: linear-gradient(to right, #888 0%, #888 50%, #999 50%, #999 100%); }
}
HTML
<div class="wrap">
<div class="container">
<div class="row">
<div class="col-md-8" style="background: #888;">
Left content
</div>
<div class="col-md-4" style="background: #999;">
Right content
</div>
</div>
</div>
</div>
Upvotes: 1
Reputation: 107
try this
<div class="container-fluid">
<div class="row">
<div style="background: #888;" class="col-md-8">
left content
</div>
<div style="background: #999;" class="col-md-4">
right content
</div>
</div>
</div>
Upvotes: 0