CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Habi Le
Habi Le

Reputation: 23

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

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:

There are three boxes with text. The first black box is centered and the text goes across it's entire width. Below the text a red and blue box are side by side. They overlap the black box. The text in the red and blue boxes only take up the space where they overlap the black box.

Upvotes: 1

Views: 2197

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362620

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

Upvotes: 1

Related Questions