I am using a PHP while loop to get review data from the database. However, when reviews are longer than 1 line is breaks the grid system (I am using Bootstrap 3) and then the page looks messy. I have thought about two solutions, a read more button and show a fixed height for all of the boxes. Alternatively, split the data received from the database into 3 columns so it will not break the page.
Preferably I would like to split the data from the loop so it shows the data in 3 columns.
This is the while loop that fetches the data:
<?php
while($row = mysqli_fetch_array($result)) {
$data = mysqli_fetch_array(mysqli_query($con, "SELECT first_name, last_name FROM transactions WHERE order_id = '{$row['order_id']}'"));
$name = $data['first_name']. ' '. mb_substr($data['last_name'], 0, 1);
if($row['rating'] == 5) $star = '<span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span>';
if($row['rating'] == 4) $star = '<span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span>';
if($row['rating'] == 3) $star = '<span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span>';
if($row['rating'] == 2) $star = '<span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span>';
if($row['rating'] == 1) $star = '<span class="glyphicon glyphicon-star review_star"></span>';
?>
<div class="col-md-4">
<div id="box_review">
<h3><?php echo $star; ?></h3>
<h5 class="thin"><?php echo $row['date'] ?></h5>
<blockquote>
<p><?php echo $row['comment'] ?></p>
<footer><?php echo $name ?></footer>
</blockquote>
</div>
</div>
<?php } ?>