html - Enable bootstrap column backgrounds to bleed to edge of viewport

Question

I'm trying to work out how to achieve the following in Bootstrap 3:

1. I have a HTML page which is primarily based around bootstrap's fixed container grid.
2. Half way down the page I want a row with columns of different sizes.
3. I want the content (text / images) inside these columns to line up with the content inside the columns in the fixed container grid.
4. I want the background colours of the left and right furthest columns to bleed right to the edge of the page.

It may help if I illustrate what I'm trying to achieve:

Any help would be greatly appreciated!

Update: as requested here's some code examples of what I currently have: http://www.bootply.com/ZzOefJGRRq As you can see the text and columns in the fluid container are not lining up correctly.

Answer 1

Bootstrap 4

Use position absolute before or after elements with width: 50vw

Codepen

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      ...
    </div>
  </div>  
  <div class="row">
    <div class="col-lg-6 c-col-bg--red">
      ...
    </div>
    <div class="col-lg-6 c-col-bg--blue">
      ...
    </div>
  </div>
</div>

CSS

.container-fluid {
    max-width: 1000px;
}

@media (min-width: 992px) {
    div[class*="c-col-bg"] {
        position: relative;
    }

    div[class*="c-col-bg"]:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: -1;
        width: 50vw;
    }

    .c-col-bg--red:after {
        right: 0;
        background: red;
    }

    .c-col-bg--blue:after {
        left: 0;
        background: blue;
    }
}