B. Dionys B. Dionys - 23 days ago 13
CSS Question

How do i put a Row in bottom of Thumbnail Bootstrap

I tried to add a row to the bottom of my Div Thumbnail but I can't seem to get it right, nor find a working answer.

<div class="item col-lg-4">
<div class="thumbnail">
<div class="caption">
<h4 class="list-group-item-heading"><?php echo $row["name"]; ?></h4>
<p class="list-group-item-text"><img style="width: 100%; padding-bottom: 10px;" border="0" src="<?php echo $row["description"]; ?>"></p>
<div class="row">
<div class="col-md-6 ">
<p class="lead"><?php echo '€'.$row["price"].' EURO'; ?></p>
</div>
<div class="col-md-6 ">
<a class="btn btn-success" href="cartAction.php? action=addToCart&id=<?php echo $row["id"]; ?>">Add to cart</a>
</div>
</div>
</div>
</div>
</div>


most likely if you put this in a normal code it wont give back anything at all. because it gets info from a sql database. but it gives back something like this:

|================| |================|
| picture | | picture |
| | | |
| - | | - |
| | but i want it to be like. | |
| price, button | | |
| | | |
| | | |
| | | |
| | | price, button |
|================| |================|


the problem is. adding an extra class to the row and giving it vallign bottom, or just
bottom: 0px;
does not work.

the big form is the Thumbnail, and the price and button are in a row. so u know what that form is might it be useful info.

sorry for bad english, not my native language.
and really sorry if this answer is to obvious but I'm new to bootstrap.

Answer

This may be what you need:

.thumbnail {
    position: relative;
    height: 300px; /* Replace with your desired thumbs height */
 }

.row-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
}

Check this example

Comments