Thumbnails

A thumbnail is a lightweight bordered box built specifically for the "image plus a short caption" pattern — a photo grid, a product listing, a gallery of results. The .thumbnail class adds a border, padding, and rounded corners around whatever it wraps, most commonly an <img> followed by a caption block.

1. Basic Thumbnail: .thumbnail

<a href="#" class="thumbnail">
  <img src="trail-photo.jpg" alt="...">
</a>

2. Adding a Caption

Wrap a heading and text in a .caption div directly inside the thumbnail to add a title, description, or action button below the image.

<div class="thumbnail">
  <img src="trail-photo.jpg" alt="...">
  <div class="caption">
    <h3>Cedar Creek Path</h3>
    <p>An easy, shaded loop along the creek.</p>
    <p><a href="#" class="btn btn-primary btn-sm">View Trail</a></p>
  </div>
</div>

3. Grid Usage: .col-sm-6 .col-md-4 > .thumbnail

Thumbnails are almost always laid out in the grid — one thumbnail per column, with the column widths widening at larger breakpoints so more fit per row as screen space allows.

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="trail-1.jpg" alt="...">
      <div class="caption"><h3>Trail One</h3></div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="trail-2.jpg" alt="...">
      <div class="caption"><h3>Trail Two</h3></div>
    </div>
  </div>
</div>

4. Worked Example: TrailMap Photo-Grid Gallery

TrailMap's "Nearby Trails" gallery lays out three thumbnails per row on tablets and up, two per row on phones, each captioned with the trail name and a quick link.

<!-- TrailMap: nearby trails photo grid -->
<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="/img/trails/sunset-ridge.jpg" alt="Sunset Ridge Trail">
      <div class="caption">
        <h3>Sunset Ridge Trail</h3>
        <p><a href="#" class="btn btn-primary btn-sm">View Trail</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="/img/trails/cedar-creek.jpg" alt="Cedar Creek Path">
      <div class="caption">
        <h3>Cedar Creek Path</h3>
        <p><a href="#" class="btn btn-primary btn-sm">View Trail</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="/img/trails/ridgeline-loop.jpg" alt="Ridgeline Loop">
      <div class="caption">
        <h3>Ridgeline Loop</h3>
        <p><a href="#" class="btn btn-primary btn-sm">View Trail</a></p>
      </div>
    </div>
  </div>
</div>