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.

Answer 1

Bootstrap 4

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

Codepen

HTML

  

    

      ...
    
  
  
  

    

      ...
    
    

      ...
    
  

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;
    }
}