Photo captions with credit for Twitter Bootstrap


The HTML is as simple as this:

<div class="thumbnail with-caption"> 
  <img src="" width="320"> 
  <p>Dumb ways to die<small>Metro</small></p> 

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: , ,

Back to top