Bootstrap grid vertical align

Question

So I have a grid of games that I am getting from a database. I want each row of elements to be aligned vertically, and most of them are. But because the elements are not the same height, some of them are ending up on their own. Does anyone know how to fix this?

For each game in the database I am echoing this code:

<div class="col-xs-4 col-height thumb">
    <a class="thumbnail">
        <img class="img-responsive" src="'.$imgPath.'" alt="hello" style="width:135px;height:200px">
        <span>'.$gameArr[$i][5].'</span>
        <br/>
        <strong>Genre: </strong><span>'.$gameArr[$i][3].'</span>
        <br/>
        <strong>Publisher: </strong><span>'.$gameArr[$i][2].'</span>
        <br/>
        <strong>Platform: </strong><span>'.$gameArr[$i][1].'</span>
        <br/>
        <strong>PEGI Rating: </strong><span>'.$gameArr[$i][4].'+</span>
        <br/>
        <strong>Price: </strong><span>£'.$gameArr[$i][6].'</span>
    </a>
</div>

Example of what I want

Example of problem

P.S Please forgive me if I wasn't very clear, this is my first post. And I realised that what I am trying to explain isn't easy to explain

I think if you use the css clear the floating randomitem should fall to the next "row" — TheGeekYouNeed, Nov 25 '15 at 23:56
@sudomakeinstall2 Done it. Realised as soon as I posted that I didn't include the code — mab3103, Nov 25 '15 at 23:56
@TheGeekYouNeed I tried left right and both clear. left and both clear results in each game being on its own row and right align makes no change to the original problem. — mab3103, Nov 26 '15 at 00:06
if your data model remembers a table, use ... it's not a sin. — Joao Polo, Nov 26 '15 at 00:07
It's hard to diagnose style issues with just images, can you post a working example? — JesseEarley, Nov 26 '15 at 00:13

score 2 · Accepted Answer · edited May 23 '17 at 12:15

ANSWER FROM: zessx

SEE ORIGINAL POST

This is caused by skills with 2 lines of text or more. It's a well-known bug when using float property. Here is a little picture to understand :

enter image description here

[Bootply] The issue

Option #1 : Force the height

Your first option is to force elements to have the same height :

.tutor {
    height: 500px;
}

[Pro] Simple and work everywhere
[Con] Use a magic number
[Con] Limit the number of lines in skills
[Con] Useless whitespaces on modile version

[Bootply] Force height

Option #2 : Use a clearfix

Your second option is to use a clearfix, and force the 5th element to be on a new line (same for the 9th, the 13th...) :

.tutors-listing > .row > .col-md-3:nth-child(4n+1) {
    clear: both;
}

[Pro] Doesn't limit the number of lines in skills
[Pro] No useless whitespaces
[Pro] No magic number
[Con] One CSS rule per size (xs/sm/md/lg)
[Con] The rule depends of your grid (.col-xx-3)

[Bootply] Clearfix

Bootstrap grid vertical align

1 Answers1

Option #1 : Force the height

Option #2 : Use a clearfix