Get Two Columns With Different Background Colours That Extend to Screen Edge

Get Two Columns with different background colours that extend to screen edge

Bootstrap 5 beta

The concept is still the same in Bootstrap 5. Use a absolute position pseudo element on the column(s) to create the appearance of a container inside a container-fluid...

Bootstrap 5 example

Or, use container-fluid and nest smaller grid columns inside the outer columns with background color...

<div class="container-fluid">
    <div class="row">
        <div class="col-6 bg-info">
            <div class="row justify-content-end">
                <div class="col-9"> ... </div>
            </div>
        </div>
        <div class="col-6 bg-danger">
            <div class="row justify-content-start">
                <div class="col-9"> ... </div>
            </div>
        </div>
    </div>
</div>

Bootstrap 5 nesting example

Bootstrap 4

The concept is still the same in Bootstrap 4, but the -xs- infix no longer exists.

Bootstrap 4 example

Bootstrap 3 (original answer)

Use another wrapper DIV around a 2nd container...

<div class="container" style="background: bisque;">
    <div class="row">
        <div class="col-xs-12">
            <h1>Normal Boxed Width</h1>
        </div>
    </div>
</div>
<div style="background-color: aquamarine; padding: 0">
    <div class="container">
        <div class="row">
            <div>
                <div class="col-sm-9">
                    <h1>Left Panel</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
                </div>
                <div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff">
                    <h1>Right Panel</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
                </div>
            </div>
        </div>
        <!--  .row -->
    </div>
    <!--  .container-fluid -->
</div>

EDIT

Use a psuedo element such as..

.right:before {
    right: -999em;
    background: rebeccapurple;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

Bootstrap 3 example

Similar question: Bootstrap container fill sides with colors

Bootstrap - Full width layout two columns with different colors

You can try like this-

.blue-background {    background-color: blue;}.blue-background:after{  content:'';  display:block;  clear:both;}
.gray-background {    background-color: #eaeaea;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/><div class="container-fluid">    <div class="row">      <div class="blue-background">        <div class="col-lg-6 col-xs-12 col-lg-offset-1">              <h1>Text here</h1>          </div>          <div class="col-lg-5 col-xs-12 gray-background">              <h2>Another text here</h2>          </div>      </div>    </div><!--  .row --></div><!--  .container-fluid -->

Bootstrap full-width with 2 different backgrounds (and 2 columns)

Yes, using the techniques outlined in this question but extending it to the columns.

The Codepen Demo (below) shows the result better than the Stack Snippet which is included for reference.

* {  margin: 0;  padding: 0;  box-sizing: border-box;}body {  overflow: hidden;  /* prevent scrollbar */}.container {  width:50%;  margin:auto;  margin-top: 1em;    position: relative;  overflow: visible;}.extra:before {  content: '';  display: block;  /* override bootstrap */  position: absolute;  top: 0;  left: 50%;  width: 100vw;  height: 100%;  transform: translate(-50%, 0);}[class*="col"] {  border: 2px solid grey;  min-height: 120px;  position: relative;}.left:before {  content: '';  position: absolute;  height: 100%;  width: 100vw;  top: 0;  right: 0;  background: rgba(255, 0, 0, 0.5)}.right:before {  content: '';  position: absolute;  height: 100%;  width: 100vw;  top: 0;  left: 0;  background: rgba(0, 0, 255, 0.25);}

<div class="container extra">  <div class="row">    <div class="col-sm-4 left"></div>    <div class="col-sm-8 right"></div>  </div></div>

Bootstrap: Set 2 columns to be full width but the text inside them to be aligned with document container

I answered similar questions here:

Get Two Columns with different background colours that extend to screen edge

Bootstrap container fill sides with colors

I think the best way is using a full width "wrapper" and pseudo elements to extend the left/right to the sides, while keeping content in the container.

.left:before {
    left: -999em;
    background: lightgreen;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

.right:before {
    right: -999em;
    background: rebeccapurple;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

http://www.codeply.com/go/tZsOBff9WH

Separate background color of full width DIV containing two columns

Add display:table; to your container like this:

.container {
    max-width: 360px;   /* If I remove this, then it works, but then my content is not centered */
    margin:0 auto;
    display:table;
}

JS Fiddle
http://jsfiddle.net/grrenier/3TE4X/1/

Try this other JS Fiddle:

http://jsfiddle.net/grrenier/3TE4X/2/

Extend column background into grid gutters

You could also generate the background using a pseudoelement.

The left value is large enough to keep the background extending out of the screen. It may be problematic if you need precise position of a background image.

Also, you could consider grid-gap instead of adding padding-left to the grid items.

body {  margin: 0;}
main {  min-width: 800px;}
section {  border-bottom: 1px solid #dfdfdf;}
.container {  width: 500px;  margin: 0 auto;  display: grid;  grid-template-columns: 1fr 1fr 1fr;}
section>* {  min-height: 200px;}
.container>div {  background-color: #fff;  padding-left: 30px;}
header {  position: relative;}
header:before {  content: '';  background: lightgrey;  display: block;  position: absolute;  left: -50vw;  right: 0;  bottom: 0;  height: 100%;  z-index: -1;}

<main>  <section>    <div class="container">      <header>        <h1>Hey There!</h1>      </header>      <div>        <h2>Column 2</h2>      </div>      <div>        <h2>Column 3</h2>      </div>    </div>  </section></main>

Two different colors split within container, stretching to edges of screen?

There may be a better way to do this but, see if this works for you.
jsfiddle

    html, body {        height: 100%;        margin: 0;        text-align: center;    }    .backgroundLeft, .container, .sidebar {        border: 1px solid black;     }
    .backgroundLeft {        float: left;        width: 50%;        height: 100%;        background-color: gray;    }    .container {        position: absolute;        left: 0;        right: 0;        margin: 0 auto;        width: 970px;        height: 100%;        background-color: white;    }    .sidebar {        width: 220px;        height: 100%;        float: left;        background-color: gray;    }

<html><body>    <div class="container">970        <div class="sidebar">220</div>    </div>    <div class="backgroundLeft"></div></body></html>

Get Two Columns With Different Background Colours That Extend to Screen Edge