Search code examples
csstwitter-bootstraplayouttwitter-bootstrap-3

Bootstrap 3 and different grid layout

I'm a super, super noob and need your help.
What I'm trying to achieve is layout kinda flexible in a column but still in rows, like on a picture below, there are 3 rows, each in a different color. I tried 3 rows as well as 1 row, doesn't make a difference.
Ok, so I got 9 columns, each one takes 4 spaces. And I tried to move the middle picture in a green row to the middle column of the pink one. Didn't work out, I mean it did but the other pictures got messed up. I also tried the .clearfix.
Hope you can help guys, cheers!

grid layout

Solution

  • What you are trying to achieve is called a Masonry Layout.

    You cannot distribute your layout by rows, you have to do it using columns.

    Everything should be inside a .row div, and have the number of columns you need (in your image case, you need to use .col-md-4).

    Then you should add everything to those three columns dynamically, using Javascript or the technology you are using (you can achieve it also on PHP or so on, I'll edit if you need help on that).

    Also, I recommend you using Bootstrap 4, as it contains a new feature called Cards Columns which is designed for what you are trying to achieve:

    https://v4-alpha.getbootstrap.com/components/card/#card-columns