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

Question

I want my 2 columns to be different size and background-color, but I want them together to always take up 100% width while the text content stays inside the normal container. Any ideas?

Link to jsfiddle: https://jsfiddle.net/de5k2j4n/1/

<div class="container">
 <p>
  Text inside container
 </p>
 <div class="row">
  <div class="col-sm-4">
   <p>
    Text inside container, but my background wants to take all width on left
   </p>
  </div>
  <div class="col-sm-8">
   <p>
    Text inside container, but my background wants to take all width on right
   </p>
 </div>
</div>

I sketched a picture to visualize my idea:

Are the borders going to be visible or are those just to demonstrate your idea? Do they need to be different heights like in your image? Also, if you have an attempt at this the code should be in your question. — BSMP, Feb 01 '17 at 21:59
Borders just for demonstration. Different height would be nice, but I think that is not the tricky part. I'll add the code to JSfiddle now! — Habi Le, Feb 01 '17 at 22:11
The code will need to go in the question itself but you can still link to your fiddle as long as the code is here too. You can also create a [runnable snippet](http://meta.stackoverflow.com/questions/269754/stack-snippets-sandbox-try-it-out-here) from within your question. — BSMP, Feb 01 '17 at 22:18
Possible duplicate of [Get Two Columns with different background colours that extend to screen edge](http://stackoverflow.com/questions/41507852/get-two-columns-with-different-background-colours-that-extend-to-screen-edge) — BSMP, Feb 01 '17 at 22:22

score 1 · Accepted Answer · edited May 23 '17 at 11:45

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

Thank you! This worked perfectly. I had forgotten about the before/after pseudo elements. — Habi Le, Feb 01 '17 at 22:48

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

1 Answers1