Bootstrap, why are products displayed arbitrarily? - php

Question

Have a website in three languages. The porducts select from a mysql database and showed wiht a do-while-loop.
<!-- Shop Page Area Start-->
<div class="shoppage-area">
<div class="container">
<div class="about-desc">
<h2>
<?php echo $page['subtitle']; ?>
</h2>
<?php echo $page['content']; ?>
</div>
<div class="row">
<?php
do {
?>
<!--Product Start-->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="sngle-product">
<div class="product-thumb">
<img src="<?php echo $product['img']; ?>" alt=""/>
<h2>
<a href="#">
<?php echo $product['name']; ?>
</a>
</h2>
</div>
<h3>
<?php echo $product['desc']; ?>
</h3>
<span><?php echo $product['size']; ?></span> <span class="price"><?php echo $product['price']; ?> LE</span>
<div class="product-overlay">
<ul>
<li>
<div class="product-quantity">
<div class="input-number">
<input type="text" value="1" name="quantity">
</div>
</div>
</li>
<li><a class="orderbtn" href="#" data-uid="<?php echo $product['uniqueid']; ?>">ORDER</a></li>
</ul>
</div>
</div>
</div>
<!-- Product End -->
<?php
} while ($product = $res->fetch_assoc()) ?>
</div>
<!-- end Row -->
</div>
</div>
The problem is that in one language showed correctly and in the other i get a lot spaces between the products. See the image
enter image description here
How i can solve this

Answer 1

Add an additional class flex-row to the product wrapping row element. And try applying the following styles.
.flex-row{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

Answer 2

You can divide your column like this
<div class="shoppage-area">
<div class="container">
<div class="about-desc">
</div>
<div class="row">
<?php $i=1;
do {
?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="sngle-product">
<div class="product-thumb">
<img src="<?php echo "test"; ?>" alt=""/>
<h2><?php echo "test"; ?> </h2>
</div>
<h3><?php echo ($i==2)? " testtesttesttesttesttest testtesttesttest test": "test"; ?></h3>
<span><?php echo "test"; ?></span> <span class="price"><?php echo 12321; ?> LE</span>
<div class="product-overlay">
<ul>
<li>
<div class="product-quantity">
<div class="input-number">
<input type="text" value="1" name="quantity">
</div>
</div>
</li>
<li><a class="orderbtn" href="#" data-uid="<?php echo "1231"; ?>">ORDER</a></li>
</ul>
</div>
</div>
</div>
<?php
echo $i%4;
if($i%4== 0 && $i > 1) {
echo '</div><div class="row">';
}
$i++;
} while ($i<=10) ?>
</div>
</div>
</div>