4

Not a duplicate of this.

I trying to create two columns on a webpage have different background colours that extend to the screen edges. But the content of the columns needs to stay within the bootstrap boxed width.

It should look like this: enter image description here

I found this answer which almost worked but the inner content wasn't correctly aligned within the boxed width, especially on large screens over 1600px. It basically ended up looking like:

enter image description here

Below, is a code snippet of the closest I could get to it working, it may be the wrong approach entirely:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="background: bisque;">
 <div class="row">
  <div class="col-xs-12">
   <h1>Normal Boxed Width</h1>
  </div>
 </div>
</div>
<div class="container-fluid">
 <div class="row" style="background-color: aquamarine; padding: 0">
  <div>
   <div class="col-sm-8 col-sm-offset-1">
                <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 -->
Community
  • 1
  • 1
Holly
  • 7,462
  • 23
  • 86
  • 140

1 Answers1

3

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624