I'm trying to make some cards I am using to display an image and some information about some products in my database.
http://i63.tinypic.com/2yjo712.png (It won't let me upload the image directly to Stack for some reason..)
As you can see, the boxes don't really line up very well. I have tried messing with the divs that build each card individual by in-line editing to try and resolve this issue.
The cards are dynamic, and sit inside a row which is always 500px tall. What I want in the picture to take up 35% of available space, and the body of the card (Under the tabs) to take up the rest (Minus what the tabs take up).
I have no idea how to accomplish this, I wish I knew more CSS tricks. Could anyone help me figure out how to make these cards look more pleasant?
Also, a side note, I am using Bootstrap.
(Each panel is inside a col-md-4 at its current state, so that leaves 3 cards per row)
$bootstrap_width = 4;
$amountCols = 12/$bootstrap_width;
$loop = 1;
//Loop through rows of database that apply....
while($row = $ret->fetchArray(SQLITE3_ASSOC) ){
if($loop == 1) {
echo "<div class='row' style='height:500px;overflow:hidden;'>";
}
echo "<div class='col-md-".$bootstrap_width."'>";
?>
<div class="panel with-nav-tabs panel-default">
<div class="panel-body" style="padding:0px;">
<div class="tab-content">
<img id='ShowImage' height='auto' width='100%' src='<?=$image;?>' />
</div>
</div>
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1default-<?=$row['uniqueID'];?>" data-toggle="tab">Info</a></li>
<li><a href="#tab2default-<?=$row['uniqueID'];?>" data-toggle="tab">Stock</a></li>
<li><a href="#tab3default-<?=$row['uniqueID'];?>" data-toggle="tab">Actions</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1default-<?=$row['uniqueID'];?>">Default 1</div>
<div class="tab-pane fade" id="tab2default-<?=$row['uniqueID'];?>">Default 2</div>
<div class="tab-pane fade" id="tab3default-<?=$row['uniqueID'];?>">Default 3</div>
</div>
</div>
</div>
<?
echo "</div>";
if($loop == $amountCols) {
echo "</div>";
$loop = 1;
} else {
$loop++;
}
}