0

I have created the following card layout (shown in the screenshot) using bootstrap. The .card-columns class is adding my cards vertically so that I am loosing some part of the card.

I want my cards aligned horizontally and exactly 3 cards per row without changing the size of the card.

Here is my markup and code:

<body>
  <div class="card-columns">
  <?php
      $conn=new mysqli("localhost","root","","dbname");
          if(!$conn)
          {
            echo "connection_failed";
          }
          else{

          }
          $query= "select title,description,id from problems where difficulty='hard'";
          $result=mysqli_query($conn,$query);
          $num=mysqli_num_rows($result);
          if(mysqli_query($conn,$query)){

          }
          else{
        echo "Error: " . $query . "<br>" . mysqli_error($conn);
      }
        ?>

<?php 
  while ($row=mysqli_fetch_array($result)) { 
    $title=$row[0];
    $description=$row[1];
    $index=$row[2];
    ?>
    <div class="card-group">
  <div class="card bg-info">
    <div class="card-body">
      <h5 class="card-title" style="color:white;">Card title</h5>
      <p class="card-text" style="color: white;">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>
</body>
<?php }?>

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
maneesh sandra
  • 116
  • 8
  • Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) – Paulie_D Apr 28 '20 at 14:25
  • ..but it seems to me you don't want columns, you want **rows** – Paulie_D Apr 28 '20 at 14:25
  • yes i want rows. that's what i am asking for – maneesh sandra Apr 28 '20 at 14:38
  • That's why we need the demo...in BS4 the cards will all be the same height be default. From the picture it does not look like you have arranged in rows but are actually using columns. – Paulie_D Apr 28 '20 at 14:53
  • i don't know what went wrong please look at it and arrange it in rows please – maneesh sandra Apr 28 '20 at 14:56
  • Without a demo we can't. We need your output HTML not PHP *and* your CSS. – Paulie_D Apr 28 '20 at 15:15
  • look at the image that is the output – maneesh sandra Apr 28 '20 at 15:59
  • An image does not help we need a functional demonstration – Paulie_D Apr 28 '20 at 16:15

0 Answers0