From SO media grid and caption

by panchroma

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<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>

CSS

.caption {
    text-align:center;
}



/* for testing purposes */

img {
    width:100%;
    height:auto;
}