PHP MySQL loop with Bootstrap 4 columns

loop_columns.php

<style>
    body {
        background: #0d161f;
    }
    .row {
        background: #00b9eb;
        padding: .4rem;
        margin-top: .6rem;
        text-align: center;
    }
    .a-col {
        background: #de7c8d;
        border: 3px solid transparent;
        background-clip:padding-box;
    }
</style>
<?php
$width_xsml = 12;//Columns size for extra small screen
$width_sml = 6;
$width_med = 4;
$width_large = 3;//Column size for large screen

$col_width = 12 / $width_large;//12 column layout
$row_count = 0;//The loop counter

$select = $db->prepare("SELECT `item_name` FROM `products` WHERE `is_aval` = 1;");
$select->execute();

while ($row = $select->fetch(PDO::FETCH_ASSOC)) {
    if ($count % $width_large == 0) {
        echo '<div class="row">';
    }
    $count++;
    echo "<div class='col-$width_xsml col-sm-$width_sml col-md-$width_med col-lg-$width_large'>";
    echo $row['item_name'];
    echo '</div>';
    if ($count % $width_large == 0) {
        echo '</div>';
    }
}

Examples

lg:

sm:

xs: