How can i stick the footer at the bottom of thumbnail i cannot find anything on google here is the code
HTML
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><b>Related Links</b></h3>
</div>
<div class="panel-body">
<ul class="equal-height-thumbnail">
<li>
<figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
<div class="caption">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis. </p>
</div>
<div class="panel-footer">
<p><a href="#" class="btn btn-primary btn-block" role="button">Read</a></p>
<p><span class="glyphicon glyphicon-time"> 13:27</span></p>
</div>
</li>
<li>
<figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
<div class="caption">
<p>Lorem ipsum dolor sit amet, consectetur adi amet, consectetur adi amet, consectetur adi amet, consectetur adi amet, consectetur adipiscing elit. Pellentesmet, consectetur adipiscing elit. Pellentesmet, consectetur adipiscing elit. Pellentesmet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis. </p>
</div>
<div class="panel-footer">
<p><a href="#" class="btn btn-primary btn-block" role="button">Read</a></p>
<p><span class="glyphicon glyphicon-time"> 13:27</span></p>
</div>
</li>
<li>
<figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
<div class="caption">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesmet, consectetur adipiscing elit. Pellentesmet, consectetur adipiscing elit. Pellentesmet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis. </p>
</div>
<div class="panel-footer">
<p><a href="#" class="btn btn-primary btn-block" role="button">Read</a></p>
<p><span class="glyphicon glyphicon-time"> 13:27</span></p>
</div>
</li>
</ul>
</div>
</div>
CSS
.equal-height-thumbnail {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.equal-height-thumbnail li {
width: 30%;
margin: 0 1% 20px;
padding:0 0.5%;
background: #FFF;
box-shadow: 0 0 1px 1px rgba(0,0,0,0.1)
}
.equal-height-thumbnail figure {
display: block;
margin: 5px 0;
padding: 0;
}
.equal-height-thumbnail figure img{ width:100%;}
.caption { padding: 2%;}
.equal-height-thumbnail panel-footer {
padding:0px;
}
And here is an example on JSFIDDLE
