Twitter Bootstrap Question posted in

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

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

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search