CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
skall
skall

Reputation: 13

How to align by columns, not rows, in bootstrap

I've been having a lot of trouble finding out how to align my site this way using a grid system and could not find any questions regarding this when I searched.

I essentially want my site to layout like this, but when using Bootstrap's grid system like:

<div class="row">
    <div class="col s3">
        ....
    </div>
    <div class="col s9">
        ....
    </div>
</div>

If any content in the second column extends past the first it shifts the whole page down. Any ideas? I don't want the second column heights to be restricted by the bounds set by the first column.

Upvotes: 1

Views: 43

Answers (1)

Vince
Vince

Reputation: 3286

Bootstrap does not offer this functionality. You could achieve this effect using Masonry.js. Take a look at this jQuery plugin. It should do the trick.

http://masonry.desandro.com/

It is very well documented and easy to implement. Good luck!

Upvotes: 1

Related Questions