How to Create Two Full-Screen Background Columns with Bootstrap Boxed Content?

Get Two Columns with Different Background Colors that Extend to Screen Edge

Understanding the Problem

The goal is to create a webpage layout with two columns that have different background colors extending to the screen edges while ensuring the content within the columns remains within the defined bootstrap boxed width.

Bootstrap 3 Solution

The recommended approach in Bootstrap 3 is to use another wrapper DIV around a second container. This allows the second container to inherit the width of the outermost wrapper while the background color of the wrapper can extend to the screen edges.

<div class="container">
<p><strong>Bootstrap 4 and 5 Solution</strong></p>
<p>In Bootstrap 4 and 5, the preferred method is to use the container-fluid class along with nesting smaller grid columns within the outer columns to achieve the desired effect.</p>
<pre class="brush:php;toolbar:false"><!-- Bootstrap 5 -->
<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 4 -->
<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>

Additional Options

Another way to achieve a similar effect is to use a pseudo element, such as .right:before, to create the appearance of a colored background extending beyond the container width.

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

This method can also be applied to Bootstrap 3 and later versions.