Questions PHP Images into Bootstrap Thumbnails show - php

Question

Help i uses this code PHP and bootstrap please see image.
<?php
$sql = "SELECT * FROM article ORDER BY article_id DESC";
$r = page_query($link, $sql, 10);
while ($a = mysqli_fetch_array($r)) {
$src = "images/cover-image.jpg";
if ($a['image_id'] != 0) {
$src = "read-image.php?id={$a['image_id']}";
}
echo '
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="thumbnail">
<div class="thumb">
<img src="' . $src . '" alt="">
<div class="caption-overflow">
<span>
<i class="icon-plus3"></i>
<i class="icon-link2"></i>
</span>
</div>
</div>
<div class="caption">
<h6 class="no-margin-top text-semibold">
Not rapturous
<i class="icon-download pull-right"></i>
</h6>
' . mb_substr($a['article_text'], 0, 120, 'utf-8') . '...<br>' . '
</div>
</div>
</div>';
}
if (page_total() > 1) {
echo '<p id="page">';
page_echo_pagenums();
echo '</p>';
}
?>
Image
I use this code PHP and bootstrap see images
The problem of this sort on the part of the how to had to modify how it displays the correct result.

Answer 1

What I found Is:
You opened <div class="row">. But, not closed. (It may be one of the reason for alignment not coming properly)
And, My suggestion is not to use <div class="row"> inside while loop. Place it above while loop. Because every occurrence in while loop, it will take single row as whole div. Putting it before while loop, it will help you to place all col-lg-3 rows inside <div class="row"> in proper alignment.
Updated Code:
<div class="row">
<?php
$sql = "SELECT * FROM article ORDER BY article_id DESC";
$r = page_query($link, $sql, 10);
while ($a = mysqli_fetch_array($r)) {
$src = "images/cover-image.jpg";
if ($a['image_id'] != 0) {
$src = "read-image.php?id={$a['image_id']}";
}
echo '
<div class="col-lg-3 col-sm-6">
<div class="thumbnail">
<div class="thumb">
<img src="' . $src . '" alt="">
<div class="caption-overflow">
<span>
<i class="icon-plus3"></i>
<i class="icon-link2"></i>
</span>
</div>
</div>
<div class="caption">
<h6 class="no-margin-top text-semibold">
Not rapturous
<i class="icon-download pull-right"></i>
</h6>
' . mb_substr($a['article_text'], 0, 120, 'utf-8') . '...<br>' . '
</div>
</div>
</div>';
}
?>
</div>
When, I did these changes in my desktop. It works fine for me. Keep calm. Have patience. And, Try once again. It will work.