Bootstrap, break a column out the container
<p>I want two <code>col-*-6</code> in one <code>.row</code>. The left <code>col</code> has a <code>background-color</code> which has to go all the way to the left border of the screen. Also there is text in the first <code>col</code>, which has to be aligned with the normal <code>.container</code> with. The right <code>col</code> has a <code>background-image</code> which has to go all the way to the right border of the screen. </p>

<p><a href="http://i.stack.imgur.com/9KrUW.png" rel="nofollow">here is a image example of I want to achieve.</a>
This is the current code that I have, without all the unnecessary elements:</p>

<pre><code>&lt;div class="container-fluid"&gt;
  &lt;div class="row no-gutter"&gt;
    &lt;div class="col-md-6 text"&gt;
      &lt;h2&gt;Lorem ipsum dolor sit amet, consectetur elit, sed do lorem ipsum.&lt;/h2&gt;
    &lt;/div&gt; &lt;!-- close col-md-6 text --&gt;
    &lt;div class="col-md-6 image" id="slided01"&gt;
    &lt;/div&gt; &lt;!-- close col-md-6 image --&gt;
  &lt;/div&gt; &lt;!-- close row --&gt;
&lt;/div&gt;&lt;!-- close container-fluid --&gt;
</code></pre>

<p>The problem with the above code is that the text is aligned to the left side of the screen, because of the <code>.container-fluid</code>. And I want the text to be aligned with the normal <code>.container</code> width.</p>

<p>Here is the <a href="https://jsfiddle.net/y7xcfq6e/4/" rel="nofollow">JsFiddle</a>. The first row is how I want the background to be, the second row is how I want the text to be. </p>