How can I get Bootstrap four columns grid span two rows on a second column?

Question

Hi, if somene can help me to achieve the kind of portfolio grid with 4 columns (see the pic enter image description here) where second column span 2 rows. (have a plan to put images with hover caption effect inside).

I tried with this solutions, but havent found the right one. Links below:

How can I get a Bootstrap column to span multiple rows?

Row span in Bootstrap 3?

How to make a div in the middle of two others to span multiple rows, like rowspan in tables

Twitter Bootstrap 3 rowspan and reorder

how to create complex grid in bootstrap 3, (column rowspan)

Twitter Bootstrap 3 rowspan and reorder

Thank you in advance!

look the scheme

Try to use only one row, all floating element could do the trick. If not, post a fiddle to test it. — Loenix, Apr 01 '16 at 12:30
It's not really possible to do with Bootstrap's normal Grid. Rowspan is something you can apply to s. — niorad, Apr 01 '16 at 12:33
Can/did you try nesting like this? http://www.bootply.com/Dxd7yctlwi — Carol Skelly, Apr 01 '16 at 12:49
This is the same result as the photo as concerns the structure but the counting is not right. The second item called 5 etc.. — Spyros Xenikakis, Apr 01 '16 at 13:47

score 0 · Answer 1 · answered Apr 01 '16 at 12:35

Assuming all cells have the same height (as the the image shows), all you have to do is create a four columns structure, and within them put one or two elements.

Something like that:

<div class="row">
  <div class="col-md-3">
    <div class="single-height">
      1
    </div>
    <div class="single-height">
      5
    </div>
  </div>
  <div class="col-md-3">
    <div class="double-height">
      2
    </div>
  </div>
  <div class="col-md-3">
    <div class="single-height">
      3
    </div>
    <div class="single-height">
      6
    </div>
  </div>     
  <div class="col-md-3">
    <div class="single-height">
      4
    </div>
    <div class="single-height">
      7
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Apr 01 '16 at 13:42

0

You cannot do this with bootstrap column grid style . The tallest column will push the bottom row . You can do this using masonry which suits very nice with bootstrap grid columns . See it here Masonry page

answered Apr 01 '16 at 13:42

Spyros Xenikakis

101
3

This is my first post on stack overflow and I'm pretty new in web dev. Masonry seems like a good solution for the issue, will explore, thank you. – Jasmina Apr 01 '16 at 13:53
I want my portfolio grid be like on the theme, just without the filtering. Do you still think masonry is a right for it? http://www.themezaa.com/html/h-code/home-architecture.html – Jasmina Apr 01 '16 at 14:00
in this example all boxes have the same height so bootstrap it should be good enough i think but if your images height differ so masonry is the only choise . check this page http://www.kristianhammerstad.com/ – Spyros Xenikakis Apr 01 '16 at 14:02

How can I get Bootstrap four columns grid span two rows on a second column?

2 Answers2