CODEWITHSUNDEEP
phphtmltwitter-bootstrappanel
Nik Mohamad Lokman
Nik Mohamad Lokman

Reputation: 63

How do I set the size of a bootstrap panel?

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

enter image description here

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?

Upvotes: 0

Views: 6931

Answers (2)

Ian Drake
Ian Drake

Reputation: 757

Bootstrap panels will fit just fine inside Bootstrap's columns.

Try wrapping the full set of <a> tags in a <div class="container"> and <div class="row">, then give each <a> tag a column class like col-md-6 (two 50% width columns at larger screen sizes, switching to a single full-width column at smaller screen sizes).

Also, avoid using the hardcoded 15% width. Use the column classes to define the width, since Bootstrap's grid system is responsive by default.

Full example:

<div class="container">
<div class="row">
<?php
$sql = "SELECT * FROM pembelitkataku";
$result = mysqli_query($db, $sql);
while($row = $result->fetch_array())
{
?>
<a href="" class="col-md-2">
    <div class="panel panel-primary">
        <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
}
?>
</div>
</div>

UPDATE

To answer your specific question about 15% widths, try using the col-md-2 class on all the <a> tags. This actually ends up being 16.66666667%, but it will be visually similar to the 15% you wanted originally, while still letting you take advantage of Bootstrap's grid system so you can put multiple panels side by side. I updated my example to reflect this.

Upvotes: 0

Korgrue
Korgrue

Reputation: 3478

Anchors are inline elements, not block level. you should put your anchors inside the panel div, not wrapping it.

Upvotes: 1

Related Questions