Issue with bootstrap grid and mysql response

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!

score 0 · Accepted Answer · answered Dec 07 '15 at 13:51

0

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.

answered Dec 07 '15 at 13:51

O. Jones

103,626
17
118
172

Thanks soo much for pointing me in the right direction. Found this: [https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows]. Works perfectly! – George Feichter Dec 07 '15 at 19:21

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

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

Issue with bootstrap grid and mysql response

2 Answers2