Boostrap .container with full width background, split down the middle?

Question

Is there any way to use a .container and then inside have a split 2 column layout where the columns have different background colors and reach all the way to the left and right of the page?

The following correctly centers and splits into two columns, but the backgrounds of each are also cropped to the width of the container.

<div class="container">
  <div class="col-sm-6">
    <p>Left content goes here.</p>
  </div>
  <div class="col-sm-6">
    <p>Right content goes here.</p>
  </div>
</div>

Images work better than words:

Answer 1

In a recently project I figured out how to do that without so much code. Similar with Niket Thapa answer, but dealing more with structure. Mantaining responsivity and using bootstrap classes without negative margins and paddings:

HTML

<div class="position-relative">
  <div class="container-fluid background-holder">
    <div class="row h-100">
      <div class="col-md-6 bg-primary">
        <p class="text-left">left split</p>
      </div>
      <div class="col-md-6 bg-warning">
        <p class="text-right">right split</p>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row text-center">
      <section class="col-md-6">
        <h1>left content</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget mauris ut enim scelerisque sollicitudin in nec nisl. Quisque arcu arcu, bibendum id nunc sit amet, auctor bibendum tellus. Sed non scelerisque nulla. Sed pharetra lacus sapien, et condimentum
        ante condimentum non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce magna lorem, lacinia congue varius blandit, facilisis quis nulla. Maecenas eu finibus tortor, sed volutpat justo. Fusce pulvinar
      </section>
      <section class="col-md-6">
        <h1>right content</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget mauris ut enim scelerisque sollicitudin in nec nisl. Quisque arcu arcu, bibendum id nunc sit amet, auctor bibendum tellus. diam at placerat consectetur. Aliquam nec nisl luctus, imperdiet
        dolor non, feugiat ligula.
      </section>
    </div>
  </div>
</div>

CSS

.background-holder {
  overflow: hidden;
  margin: 0 auto;
  position: absolute;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.container {
  border-left: 2px solid red;
  border-right: 2px solid red;
}

jsfiddle DEMO

Answer 2

HTML

<div class="container-holder">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="gray-box">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae quod quaerat nostrum ullam animi ea repellendus incidunt quia explicabo consequuntur pariatur obcaecati aliquid magnam laudantium ratione dicta eius id?
                    </p>
                </div>
            </div>
            <div class="col-md-6">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae quod quaerat nostrum ullam animi ea repellendus incidunt quia explicabo consequuntur pariatur obcaecati aliquid magnam laudantium ratione dicta eius id?
                </p>
                 <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae quod quaerat nostrum ullam animi ea repellendus incidunt quia explicabo consequuntur pariatur obcaecati aliquid magnam laudantium ratione dicta eius id?
                </p>
            </div>
        </div>
    </div>
</div>

CSS

.container-holder{
    overflow: hidden;
    background: white;
}
.gray-box{
    background: gray;
    padding: 0 15px 9999px 9999px;
    margin: 0 -15px -9999px -9999px;
}

jsfiddle DEMO

Answer 3

You can probably do something like this to get you on the right track...

HTML

<div class="container">
  <div class="col-sm-6 grey">
    <p>Left content goes here.</p>
  </div>
  <div class="col-sm-6 white">
    <p>Right content goes here.</p>
  </div>
</div>

CSS

body {
    background: #808080; /* Old browsers */
    background: -moz-linear-gradient(left,  #808080 0%, #808080 50%, #ffffff 50%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#808080), color-stop(50%,#808080), color-stop(50%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #808080 0%,#808080 50%,#ffffff 50%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #808080 0%,#808080 50%,#ffffff 50%,#ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #808080 0%,#808080 50%,#ffffff 50%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(to right,  #808080 0%,#808080 50%,#ffffff 50%,#ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#808080', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */

    }
    .container {
      width:1024px;
    }
    .grey {
      background-color:grey;
    }
    .white {
      background-color:white;
    }

You'll have to use media queries to control the body background when it get's down to the col-xs-12 breakpoint.