Bootstrap card element stretching - php

Question

So the problem is that the cards are really stretching and I have tried everything to fix it and still haven't achieved the fix. Any way to fix this since I'm out of the clues? And what is the problem and where?
My container that holds cards
<div class="container mt-5">
<div class="row align-items-center">
<div class="col-sm-12 mx-auto">
<div class="card-group">
<?php
$companies = new Companies();
$companies->showAllCompanies();
?>
</div>
</div>
</div>
</div>
My PHP showAllCompanies code
public function showAllCompanies(){
$datas = $this->getAllCompanies();
foreach ($datas as $data){
$name = $data['name'];
$orgnr = $data['organization_number'];
$notes = empty($data['notes']) ? "No notes" : $data['notes'];
$id = $data['id'];
echo "
<div class='card me-2 d-block' style='width: 18rem;'>
<div class='card-body'>
<h4 class='card-title'>$name</h4>
<p class='card-text'><i class='bi bi-stickies'></i> $notes</p>
</div>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>Stores Owned <span class='badge text-bg-primary'>XX</span></li>
<li class='list-group-item'>Organization Number <span
class='badge text-bg-primary'>$orgnr</span></li>
</ul>
<div class='card-body'>
<a href='#' class='btn btn-primary'>Edit</a>
<a href='#' class='btn btn-danger'>Delete</a>
</div>
</div>
";
}
return;
}

Answer 1

You're squeezing all your cards onto one row.
If you limit the amount of cards you display to 6 per row you can update your function to this:
public function showAllCompanies(){
$cardsPerRow = 6;
$i = 0;
$datas = $this->getAllCompanies();
foreach ($datas as $data){
$name = $data['name'];
$orgnr = $data['organization_number'];
$notes = empty($data['notes']) ? "No notes" : $data['notes'];
$id = $data['id'];
if($i == 0){
echo '<div class="row">';
}
echo "
<div class='card me-2 d-block' style='width: 18rem;'>
<div class='card-body'>
<h4 class='card-title'>$name</h4>
<p class='card-text'><i class='bi bi-stickies'></i> $notes</p>
</div>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>Stores Owned <span class='badge text-bg-primary'>XX</span></li>
<li class='list-group-item'>Organization Number <span
class='badge text-bg-primary'>$orgnr</span></li>
</ul>
<div class='card-body'>
<a href='#' class='btn btn-primary'>Edit</a>
<a href='#' class='btn btn-danger'>Delete</a>
</div>
</div>
";
if(++$i >= $cardsPerRow){
echo '</div>';
$i = 0;
}
}
return;
}