3 columns cards in a row with bootstrap-CodePudding

I want to display 3 columns of cards in a row, but it shows only 2 columns. I am using bootstrap and CSS. Here is the code.

 <style type="text/css">
    .card{
      width: 350px;
    }
  </style>

    
    <div  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 >
        <div >
          <div >
            <h5 ><?= $people["Surname"]?> <?=$people["Name"]?> <?= $people["Patronym"]?></h5>
            <p ><?=$people["Description"]?></p>
            <div >
             <img src="uploads/<?=$people['img_dir']?>" width="250px" height="350px" >
            </div>
          </div>
        </div>
      </div>

CodePudding user response：

This response is assuming this line creates the columns: <div >.

Bootstrap divides the page in 12 columns. "col-sm-6" will take in 6 out of that 12.

For 3 columns you'll have better succes using the class "col-sm-4"

doc: https://getbootstrap.com/docs/4.0/layout/grid/