I am struggling to get 3 columns of cards to display in a row using bootstrap and CSS. Currently, only 2 columns are showing up. Here is the code snippet:
<style type="text/css">
.card{
width: 350px;
}
</style>
<div class="container text-center" style="display: flex; flex-wrap: wrap;">
<?php
$peoples = $pdo->query("SELECT * FROM peoples")->fetchALL(PDO::FETCH_ASSOC);
//print_r($employees);
foreach ($peoples as $people) {
if($people["id"]==0){
continue;
}
?>
<div class="col-sm-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title text-center"><?= $people["Surname"]?> <?=$people["Name"]?> <?= $people["Patronym"]?></h5>
<p class="card-text"><?=$people["Description"]?></p>
<div class="image text-center">
<img src="uploads/<?=$people['img_dir']?>" width="250px" height="350px" class="center">
</div>
</div>
</div>
</div>