Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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>

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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/

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading