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 }?>
