So I am making a webpage using panels. The idea is to fetch rows from database and display it on panels. I set the width of the panel-primary to 15% and visually it resized the panel to 15%. I want to make the panel clickable so I added an (<'a'>) surrounding the panel to my surprise that even though the panel is visually 15% in size, it still takes the whole horizontal space. Notice the cursor is a hand
I attach my code for this part:
<?php
$sql = "SELECT * FROM pembelitkataku";
$result = mysqli_query($db, $sql);
while($row = $result->fetch_array())
{
?>
<a href="">
<div class="panel panel-primary" style="width: 15%">
<div class="panel-heading"><?php echo $row['text']; ?></div>
<div class="panel-body"><?php echo "<img src = 'images/".$row['image']."' width=\"100\">"?></div>
</div>
</a>
<?php
}
?>
My question is, how do I visually and physically change the panel size to 15% so that I can put multiple panels side by side?