'3 columns cards in a row with bootstrap

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 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>
htmlcssbootstrap-5


Solution 1:[1]

This response is assuming this line creates the columns: <div class="col-sm-6 mb-3">.

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/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Lennert

Related Questions