Bootstrap full width sections with graphical backgrounds
<p>I am trying to implement a design from my graphic designer, which whilst looks cool is giving me some headaches as i don't know how to implement in bootstrap.</p>

<p>We have a call to action section, which aligns with the 12 column grid system on its left and right extremes.</p>

<p>It also stretches to the view-port edges:</p>

<ol>
<li>On the left we have red background stretching all the way to the view-port edge.</li>
<li>On the right we have a grey background image stretching all the way to the view-port edge.</li>
</ol>

<p>I haven't been able to find a search term for what I am looking to achieve let alone where to start (other than have the cta use the background for the entire width, then overlay a left element over the top).</p>

<p><strong>Any idea on how to code the below graphical layout in bootstrap please</strong>?</p>

<pre><code>&lt;section class="cta" style="background: grey; position: relative"&gt;
    &lt;div class="red" style="position: absolute; left: 0; width: 10%; background: red"&gt;&lt;/div&gt;
    &lt;div class="text-outer"&gt;
        &lt;div class="container"&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-xs-6"&gt;left&lt;/div&gt;
                &lt;div class="col-xs-6"&gt;right&lt;/div&gt;               
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;      
&lt;/section&gt;
</code></pre>

<p><a href="https://i.stack.imgur.com/Dzwww.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Dzwww.png" alt="cta"></a></p>