Vertical stacking on bootstrap grid

Asked Jul 15 '15 at 15:04

Active Jul 15 '15 at 15:05

Viewed 26 times

I'm trying to vertically stack items on a bootstrap grid, but they're not stacking up correctly. Instead, it adds 4-5 items together to one row and breaks for next row. Is there anything bootstrap-native that can fix this? Or do I need some other workaround?

<div id="result-container" class="row">
    <div class="item col-xs-3" style="height:220px">Item</div>
    <div class="item col-xs-3" style="height:320px">Item</div>
    <div class="item col-xs-3" style="height:270px">Item</div>
    ...
</div>

See jsFiddle.

Current, wanted

edited Jul 15 '15 at 15:05

James Donnelly

126,410
34
208
218

asked Jul 15 '15 at 15:04

Gottlieb Notschnabel

9,408
18
74
116

Blockquotes are designed for... well... blockquotes. Not to decorate JSFiddle links. I've edited that out. – James Donnelly Jul 15 '15 at 15:05
1

Something like that? [Bootstrap + Isotope](http://mpezzi.github.io/bootstrap_isotope/) – IndieRok Jul 15 '15 at 15:09
Use isotope or masonry.. bootstrap grid is not meant for that. – Yotam Omer Jul 15 '15 at 15:11
You're looking for something called masonry. There is plenty to find about this topic, for example: http://www.sitepoint.com/bootstrap-tabs-play-nice-with-masonry/ – Mathijs Rutgers Jul 15 '15 at 15:11
Use one row with each vertical stack in one column (i.e col-xs-4 with three items inside). – Aibrean Jul 15 '15 at 15:13
@Aibrean Thanks, that helped. Make it an answer and I'll accept! – Gottlieb Notschnabel Jul 15 '15 at 15:26
@JamesDonnelly I've seen blockquotes to highlight content a couple of times around here - that's why I used it. But thanks for editing and for the note. – Gottlieb Notschnabel Jul 15 '15 at 15:28
@MathijsRutgers, IndieRok Yeah, something like that. But I'd rather not implement another framework for that purpose. – Gottlieb Notschnabel Jul 15 '15 at 15:28
@GottliebNotschnabel I can't because they closed it. – Aibrean Jul 15 '15 at 15:31

Vertical stacking on bootstrap grid

0 Answers0