Boostrap fluid-container nesting issue - twitter-bootstrap-3

Question

I have a a section that needs to be full width. Ok, fluid-container. Now, within that, i need two colummns, -8 and -4, each with a different background colour. Ok, no problems.
Now the design calls for the content in these columns (.left and .right) to have copy as if it was in a .container
Here's my html snipper
<div class="container-fluid homeBannerCTAs">
<div class="row">
<div class="col-sm-12 col-md-8 left">
<div class="">
<h2>Left CTA</h2>
</div>
</div>
<div class="col-sm-12 col-md-4 right">
<div class="">
<h2>right CTA</h2>
</div>
</div>
</div>
</div>
and my sass snippet which is giving a height and setting the bg colours.
.homeBannerCTAs {
#include breakpoint(lg) {
height : 234px;
}
.left {
height : inherit;
background : #004557;
}
.right {
height : inherit;
background : #dfc986;
}
}
And the design portion.
Here's my full prototype
http://boilerplate.fls-interactive.com/kffTemplate.php
I don't have the mobile design yet (yeah, i know), but i'm assuming these will stack.
I'm kinda banging my head here on this.
Cheers.

Answer 1

Do you have to use Bootstrap, or could you use Flexbox here? Something like this could be pretty easily achieved with Flexbox. If you can use Flexbox, let me know and I'll post a Codepen.
OK, something like
.container {
display:flex;
}
.left-col {
flex: 2 0 auto;
padding:20px;
background:#CCC;
}
.right-col {
flex:1 1 auto;
padding:20px;
background:#999;
}
Here's a very basic CodePen:
http://codepen.io/toddsdarling/pen/akgqJy"
You can adjust the flex of each container to take up more or less room, and also set the height (and max-height as well).
I do this sometimes with columns that I don't want to shrink past a certain width. You can do something like "flex:0 400px", for example.