Tech Grid layout not working

[Publisher Bucks]

So I have the following code on a page that I *think* should be working to display the data in a grid of 4 columns with 1 row in each column:

<?php
$rows = $result->num_rows; // Find total row
if($rows > 0) {
$cols = 4; // column count
$counter = 1; //start or end row
$nbsp = $cols - ($rows % $cols); // blank column

$container_class = 'container-fluid'; // Grid class
$row_class = 'row'; // Row class
$col_class = 'col-sm-4'; // Column class

echo '<div class="'.$container_class.'">'; // Grid open
while ($item = $result->fetch_array()) {
if(($counter % $cols) == 1) { // Check new row
echo '<div class="'.$row_class.'">'; // Start new row
}
$img = "".$item['Cover'];
echo '<div class="'.$col_class.'"><img src="'.$img.'" width="180px" height="180px" alt="'.$item['Title'].'"/><h5>'.$item['Title'].'</h5></div>'; // Column content
if(($counter % $cols) == 0) { // last column then 0
echo '</div>'; // Close row
}
$counter++; // Increase counter
}
$result->free();
if($nbsp > 0) { // unused column in last row
for ($i = 0; $i < $nbsp; $i++) {
echo '<div class="'.$col_class.'">&nbsp;</div>';
}
echo '</div>'; // Close row
}
echo '</div>'; // Close container
}
?>

But it only appears to work showing the data in one continuos column, any idea why or pointers as to where I messed up the code please?

I was pretty sure I had this from the outset but apparently not

[Publisher Bucks]

Nevermind, the code is fine, it was an error in calling the class in the css.

[blackmonsters]

[Publisher Bucks]

This is just the base code, theres going to be pagination (based on how many items there are to display) included from the database based on keyword search too, I was told using a bootstrap based layout with the sql query stuff would be the better option?