Twitter bootstrap media-grid: How to add a caption to the thumbnails

Question

I am using twitter bootstrap and the 'media-grid' feature to display some thumnabils of images. Here is what it looks like right now: http://jsfiddle.net/vXMMA/

What I would like to do is add a caption to these thumbnails.. can someone offer some idea on what changes to CSS I would need to make to enable this.

Answer 1

The latest bootstrap comes with a .caption class that you can add to your thumbnail grid, you can place it above or below your media grid quite easily and it works like so:

<ul class="thumbnails">
    <li class="span2">
      <div class="caption">
        <h5>Caption above</h5>
      </div>
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
    </li>
    <li class="span2">
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
      <div class="caption">
        <h5>Caption below</h5>
      </div>
    </li>
    <li class="span2">
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
      <div class="caption">
        <h5>Caption below</h5>
      </div>
    </li>
    <li class="span2">
      <div class="caption">
        <h5>Caption above</h5>
      </div>
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
    </li>
</ul>
<hr>

<ul class="thumbnails">
    <li class="span4">
    <div class="caption">
      <h5>Caption above</h5>
    </div>
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
    </li>
    <li class="span4">
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
    <div class="caption">
      <h5>Caption below</h5>
    </div>
    </li>
</ul>

You can center the caption inside the image container by just modifying the .caption class and adding the text-align: center property, like so:

.caption {
    text-align:center;
}

Demo: http://jsfiddle.net/2BBnR/

Note Noticed this post is old, so the other method posted is irrelevant with the latest bootstrap, the .media-grid class is no longer used.

Answer 2

HTML

  <li>
    <a href="#">
        <legend >Caption</legend>
        <img class="thumbnail" src="http://placehold.it/140x90" alt="">
    </a>
  </li>

CSS

legend { margin:3px; text-align:center;width:100%}

Working DEMO