Make Bootstrap columns stack to form a Windows Title Style Design

Question

His is what I am looking to achieve:

+-----------+-----------+-----------+
|   item 1  |  itme 2   | item 3    |
| .col-md-4 | .col-md-4 | .col-md-4 |
|           |           +-----------+
+-----------+           | item 6    |
|           |           | .col-md-4 |
|  item 4   +-----------+           |
| .col-md-4 | .col-md-4 |           |
|           | item 5    +-----------+
+-----------+           |
            |           |
            +-----------+

How would I be able to make this happen using css? I don't want to columns to appear on the next line to the bottom of the heightest .col-md-4 div on the previous row.

I need the divs to fill up the spaces so that they stick to each other without leaving spaces in between each row.

Something like this but that scales properly on different devices: http://codepen.io/desandro/pen/mIkhq

Hopefully this is clear enough.

you may find this useful `http://masonry.desandro.com/`. or `http://salvattore.com/` — Matin Kajabadi, Mar 26 '16 at 19:27
I think I will be able to figure it out with the article: http://www.sitepoint.com/bootstrap-tabs-play-nice-with-masonry/ — Pabi, Mar 26 '16 at 19:37

score 1 · Answer 1 · edited Apr 05 '16 at 10:08

1

Easiest way would be to use nested columns and rows... kinda like this:

<div class="row">
    <div class="col-md-4">
        <div class="col-md-12">CONTENT</div>
        <div class="col-md-12">CONTENT</div>
    </div>
    <div class="col-md-4">
        <div class="col-md-12">CONTENT</div>
        <div class="col-md-12">CONTENT</div>
    </div>
    <div class="col-md-4">
        <div class="col-md-12">CONTENT</div>
        <div class="col-md-12">CONTENT</div>
    </div>
</div>

edited Apr 05 '16 at 10:08

marc_s

732,580
175
1,330
1,459

answered Mar 26 '16 at 19:28

Elvanos

302
2
4

The thing is that the way I generate the columns means they are in date order and if I do this on phone, when the website is scaled, they will no longer appear in the correct order. – Pabi Mar 26 '16 at 19:30
@Pabi -- probably best to show and hide two different layouts based on breakpoints. Or, don't use Bootstrap grid and use Flexbox. – Scott Simpson Mar 26 '16 at 19:32
Hmm, let me know what is the order supposed to be (preferably a picture). I am not sure which is supposed to be what. – Elvanos Mar 26 '16 at 19:32
@Elvanos Edited to make it clear. – Pabi Mar 26 '16 at 19:35

score 0 · Answer 2 · answered Mar 26 '16 at 20:07

0

There are Jquery plugins that do it, for example Masonry.

answered Mar 26 '16 at 20:07

Claudio King

1,606
1
10
12

Make Bootstrap columns stack to form a Windows Title Style Design

2 Answers2