Photo captions with credit for Twitter Bootstrap

bootstrap-photo-caption

The HTML is as simple as this:

<div class="thumbnail with-caption"> 
  <img src="http://img.youtube.com/vi/IJNR2EpS0jw/0.jpg" width="320"> 
  <p>Dumb ways to die<small>Metro</small></p> 
</div>

The only thing is you need to add these styles.

  .thumbnail.with-caption {
    display: inline-block;
    background: #f5f5f5;
  }
  .thumbnail.with-caption p {
    margin: 0;
    padding-top: 0.5em;
  }
  .thumbnail.with-caption small:before {
    content: '\2014 \00A0';
  }
  .thumbnail.with-caption small {
    width: 100%;
    text-align: right;
    display: inline-block;
    color: #999;
  }

I have this Bootstrap photos with captions posted as a Gist on Github as well.

Share Button

Tagged under: , ,

0 comments
Back to top
http://twitter-widget.com/blog/button-html/