0

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>
Paul Perrick
  • 496
  • 9
  • 22
  • could you please paste your code in jsbin and show us how far you have made it work ? – Habib Rehman Aug 04 '16 at 14:48
  • it's actually not an issue make 6 columns size "2" and do your scripts in there after that make another 12 column div with absolute position and drag it to bottom by doing css properties . – Habib Rehman Aug 04 '16 at 14:50

1 Answers1

1

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

www.jsfiddle.net/t8oajk5u

Prince Sodhi
  • 2,845
  • 2
  • 21
  • 35