Bootstrap Full-Width With 2 Different Backgrounds (And 2 Columns)

* {  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>

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: 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

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

.row { display:flex;}.row .col-md-6{ padding:30px 15px;}.row { background:green;}.row .col-md-6{ background-image:url("http://placehold.it/350x150"); background-repeat:no-repeat; background-size:cover;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/><script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">   <div class="row">      <div class="col-md-2">    </div>      <div class="col-md-4">         <h1>Lorem ipsum</h1>         <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </p>         <a href="#">Learn more</a>                       </div>         <div class="col-md-6">         <!-- full-width image -->         </div>   </div> </div>

<section class="topbar">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 col-md-6">
                <div class="skewed">
                    <div class="content">
                        Welcome to Remote Auto Diagnostics
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6">
                Menu
            </div>
        </div>
    </div>
</section>

.topbar {
    background: #f41004;
    color: #fff;
    line-height: 2rem;
}

.topbar .skewed {
    background-color: #00f;
    transform: skew(-45deg);
    margin-left: -2rem;  /* this offset margin-left = padding-left */
}

.topbar .skewed .content {
    padding-left: 2rem;  /* this padding-left = offset margin-left */
    transform: skew(45deg);
}