I have encountered a problem with the script below, where the content in a div is of variable size and does not always occupy the entire horizontal space allotted by the col-6 class from one row to the next:
<div class="card-body " >
<div class="row comments_container" id="comments_container">
<?php foreach ($comments AS $comment){?>
<div class="callout <?php echo $comment['comment_callout'];?>">
<div class="row">
<div class="col-3"><?php echo '<span class="text-bold">From: </span>'.$comment['comment_author'];?></div>
<div class="offset-6 col-3">Sent on: <?php echo $comment['comment_date'];?></div>
</div>
<div class="row">
<div class="offset-3 col-6 border-primary border-left">
<?php
if (!empty($comment['comment_parent_author'])){echo 'In response to '.$comment['comment_author'].'.<br/>';}
echo '<span class="text-xs">'.$comment['comment_content'].'</span>';
?>
</div>
<div class="col-3"></div>
</div>
<div class="row justify-content-center border-top mt-2 pt-2 border-thick border-primary w-100">
<div class="col-1">Approve</div>
<div class="col-1">Reply</div>
<div class="col-1">Report as Spam</div>
<div class="col-1">Delete</div>
</div>
</div>
<?php } ?>
</div>
</div>
In the screenshot provided below, you can see that when $comment['comment_content'] data varies in size, the div containing the smallest data field does not fully utilize the col-6 class, taking only the size of the smallest data field.