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

Recommended Answers

All 2 Replies

Exactly what i need just with width: 100% :D

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.