Issue with bootstrap grid and mysql response - php

Question

I have an issue with bootstrap and creating a 4 column responsive grid from a mysql response.
The problem is that if the second mysql query has a variable number of results, it brakes the grid.
Here is my code (where the first query has 9 results and the second query has a variable number of results):
<?php
$a = "SELECT * FROM $table_users ORDER BY username";
$result = mysql_query($a);
?>
<div class="container">
<div class="row">
<?php while ($row = mysql_fetch_array($result)) {?>
<div class="col-xs-3" style="background-color:aqua;">
<?php echo $row['username'];
$b = "SELECT * FROM $table_presents WHERE bought_for='$row[username]' OR bought_for='' ORDER BY id";
$result_presents = mysql_query($b) or die(mysql_error());
while ($row_presents = mysql_fetch_array($result_presents)) {
?>
<div style="background-color:red;">
Hello world!
</div>
<?php }?>
</div>
<?php }?>
</div>
</div>
which gives me this:
enter image description here
instead of this (obviously with many 'Hello world'):
enter image description here
Any help greatly appreciated!

Answer 1

Bootstrap doesn't claim to do any kind of elegant bin-packing on panels with different sizes. You could do some programming or css work to make all your panels the same size.
If that doesn't work for your application, you're going to need a layout library that does bin-packing so these panels of different sizes align properly.
There are a few such libraries available as jQuery plugins.

Answer 2

In this, $row[username] is wrong as it should be $row['username'].
$b = "SELECT * FROM $table_presents WHERE bought_for='$row[username]' OR bought_for='' ORDER BY id";
BTW, I changed your code bit. Please Try this.
<?php
$a = "SELECT * FROM $table_users ORDER BY username";
$result = mysql_query($a);
?>
<div class="container">
<div class="row">
<?php while ($row = mysql_fetch_array($result))
{
$username=$row['username'];
?>
<div class="col-xs-3" style="background-color:aqua;">
<?php echo $username;
$b = "SELECT * FROM $table_presents WHERE bought_for='$username' OR bought_for='' ORDER BY id";
$result_presents = mysql_query($b) or die(mysql_error());
while ($row_presents = mysql_fetch_array($result_presents)) {
?>
<div style="background-color:red;">
Hello world!
</div>
<?php }?>
</div>
<?php }?>
</div>
</div>
[NOTE: Users can inject your SQL commands. Use prepared statements and parameterized queries. For more info, click Prevent SQL Injections