CODEWITHSUNDEEP
jquerytwitter-bootstrap-3jquery-pluginszurb-foundation
Alex.Barylski
Alex.Barylski

Reputation: 2949

How do I achieve rowspan using bootstrap grid

I am trying to implement a stack something like:

http://homedepot.ca

Are they using a jQuery extension to achieve the effect of that layout, if so, which one? A quick peak at the source didn't tell me much...

It looks as though they may be using Foundation by Zurb and not Bootstrap as I assumed initially. Perhaps a jQuery library called granite?

I want the left most column to assume all it's vertical and horizontal space, while the smaller right column will have 2 or 3 rows of much smaller images.

I need each cell to assume it's max width and height basically whilsty remaining responsive and collapsing vertically on smaller devices.

Any ideas?

Upvotes: 0

Views: 5035

Answers (1)

Rachel S
Rachel S

Reputation: 3920

They basically used something like this from Bootstrap with nested rows. http://www.bootply.com/OCSQsH71zp

<div class="container">
<div class="row">
  <div class="col-md-8">Something</div>
  <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">Something</div>
            <div class="col-md-12">Something</div>    
         </div> 
  </div>  
  </div>
</div>

You have two initial columns. In the right column, you add another row with two columns each spanning full width.

Upvotes: 2

Related Questions