CODEWITHSUNDEEP
twitter-bootstrap-3overlap
Paul Perrick
Paul Perrick

Reputation: 494

Bootstrap 3 - I want to overlap a row across columns (with transparency)

I am attempting to duplicate the below using Bootstrap 3. If there was no grey box extending from the left over the 4 price boxes (columns) it wouldn't be an issue, but I know I could screw with this for hours before finding out I did it wrong. Any suggestions where to start?

Price Structure

Should I start with 5 columns with a set height and then make the text in column 1 have a width of 100%? Hmmm

EDIT: Here's the jsFiddle I have so far. Please bear in mind that I am a developer and a poor designer (unless it's something straightforward). I can't even stand to look at the colors I chose for the sample, so don't be too harsh.

jsFiddle First Pitiful Attempt

<div class="container">
  <div class="row">
    <div class="col-xs-4 price-descr">
    </div>
    <div class="col-xs-4 price-descr">
      <div class="row descr-spacer">&nbsp;</div>
      <div class="row">Script listings or script renewals</div>
    </div>
    <div class="col-xs-1 text-nowrap img-rounded price-box first">
      <div class="row priceText">1st
        <br />Script</div>
      <div class="row price-spacer">&nbsp;</div>
      <div class="row pricePrice">$60</div>
    </div>
    <div class="col-xs-1 img-rounded price-box second">
      <div class="row priceText">2nd<br />Script</div>
      <div class="row price-spacer">&nbsp;</div>
      <div class="row pricePrice">$50</div>
    </div>
    <div class="col-xs-1 img-rounded price-box third">
      <div class="row priceText">3rd<br />Script</div>
      <div class="row price-spacer">&nbsp;</div>
      <div class="row pricePrice">$40</div>
    </div>
    <div class="col-xs-1 img-rounded price-box fourth">
      <div class="row priceText">4th<br />Script</div>
      <div class="row price-spacer">&nbsp;</div>
      <div class="row pricePrice">$40</div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 204

Answers (1)

Prince Sodhi
Prince Sodhi

Reputation: 2955

I hope this will help you. you just need to use position absolute for overlap.

www.jsfiddle.net/t8oajk5u

Upvotes: 1

Related Questions