Bootstrap: Full width grid with columns in container

Question

I want to create a full width layout with a blue halft on the left and a red half on the right.

After that I want to add text inside the layout but inside a container.

Is this possible?

EDIT: you can see, that the green container has a different size than the col-6 inside the blue and red half.

* {
  color: white;
}
.blue-half {
  background: blue;
}
.red-half {
  background: red;
}
.green {
  background: green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container green">
  I am the normal container!
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
      <div class="container-fluid text-center">
        <div class="row">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am first half of the blue container!
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am second half of the blue container!
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
      <div class="container-fluid text-center">
        <div class="row">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am first half of the red container!
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am second half of the blue container!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Try this:

  <div class="container">
    <div class="row">
      <div class="col-md-6">Left Column</div>
      <div class="col-md-6 col-expand">Right Column</div>
    </div>
  </div>

CSS:

.col-expand {
    position: absolute;
    background-color: orange;
    width: 100%;
    right: 0px;
}

Answer 2

Variant 2. Divide the container into two parts

You can define a new class for each half of the container. But in this solution you needs to control that the two halves have the same height.

.blue { background: blue; color: white; }
.red  { background: red;  color: white; }

.container-left-half,
.container-right-half {
  padding-right: 15px;
  padding-left: 15px;
}
.container-left-half {
  margin-right: 0;
  margin-left: auto;
}
.container-right-half {
  margin-right: auto;
  margin-left: 0;
}
@media (min-width: 768px) {
  .container-left-half,
  .container-right-half {
    width: 375px;
  }
}
@media (min-width: 992px) {
  .container-left-half,
  .container-right-half {
    width: 485px;
  }
}
@media (min-width: 1200px) {
  .container-left-half,
  .container-right-half {
    width: 585px;
  }
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 blue">
      <div class="container-left-half">
        <div class="row">
          <div class="col-xs-12">This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue!</div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 red">
      <div class="container-right-half">
        <div class="row">
          <div class="col-xs-12">This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red!</div>
        </div>
      </div>
    </div>
  </div>
</div>

Variant 1. Linear-gradient & matryoshka

1) You can use the linear-gradient() function to make two-colored background.

2) Bootstrap has rows and two types of containers:

Use .container for a responsive fixed width container.

Use .container-fluid for a full width container, spanning the entire width of your viewport.

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

3) So you can make a matryoshka:
.container-fluid > .row with linear-gradient > .container > .row with content

Matryoshka is a set of brightly painted hollow wooden dolls of varying sizes, designed to nest inside one another.

4) col-xs-6 is equivalent to col-xs-6 col-sm-6 col-md-6 col-lg-6.

.two-colors {
  background: linear-gradient(to right, blue 50%, red 50%);
  color: white;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row two-colors">
    <div class="container">
      <div class="row">
        <div class="col-xs-6">This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue!</div>
        <div class="col-xs-6">This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red!</div>
      </div>
    </div>
  </div>
</div>

Answer 3

Something like this?

* { color: white; }

.blue-half {
  background: blue;
}

.red-half {
  background: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
      <div class="container-fluid text-center">
        <div class="row">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am first half of the blue container!
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am second half of the blue container!
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
      <div class="container-fluid text-center">
        <div class="row">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am first half of the red container!
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am second half of the red container!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Update I attempted to create what I was reading from your comment regrading the formatting not being quite right

Update 2

.row-green {
  background: green;
  color: white;
}
.blue-half {
  background: blue;
  color: white;
}

.red-half {
  background: red;
  color: white;
}

.option1 .row .container {
  padding: 0;
}

.option2 .container.unindent {
  padding: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid option1">
  <h3>Option 1</h3>
  <p>
    This uses a .row .container selector rule to enforece the padding removal on containers nested in rows.
  </p>
  <div class="row row-green">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      I am the row above!
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            I am the blue container!
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            I am the red container!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid option2">
  <h3>Option 2</h3>
  <p>
    This uses an unindent CSS class on the containers that need to have the padding removed
  </p>
  <div class="row row-green">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      I am the row above!
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
      <div class="container unindent">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            I am the blue container!
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
      <div class="container unindent">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            I am the red container!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 4

Try this

<div class="container-fluid">
 <div class="row">
    <div class="col-xs-6 blue">
        <div class="container">
            <!--content-->
        </div>
    </div>
    <div class="col-xs-6 red">
        <div class="container">
            <!--content-->
        </div>
    </div>
 </div>

CSS

  .red{
    background: red;
   }
  .blue{
    background: blue;
  }