iaBootstrap

Thumbnails Grids of images, videos, text, and more

Default thumbnails

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

Highly customizable

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

  • Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Action Action

  • Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Action Action

  • Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Action Action

Why use thumbnails

Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

Simple, flexible markup

Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

Uses grid column sizes

Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

Markup

As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/300x200" alt="">
    </a>
  </li>
  ...
</ul>

For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img src="http://placehold.it/300x200" alt="">
      <h3>Thumbnail label</h3>
      <p>Thumbnail caption...</p>
    </div>
  </li>
  ...
</ul>

More examples

Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

Newsline

Hands on: Pixelmator for iPad is a valuable tool for artists and photographers

Hands on: Pixelmator for iPad is a valuable tool for artists and photographers

Oct 25, 2014

Now that it’s here — just in time for iOS 8 — we took Pixelmator for iPad for a spin and found it a solid contribution to the slate of image editors for the iPad, and especially useful for those already using Pixelmator on the desktop. With the mobile Pixelmator, available... continue reading

Hipstamatic’s TinType photo effects app harks back to the 1800s

Hipstamatic’s TinType photo effects app harks back to the 1800s

Oct 25, 2014

Sometimes the simplest apps are the most visually powerful, and that’s the case with  TinType , an iPhone app that you imparts a luminous, hand-tinted vintage look to your images. TinType takes about five minutes to learn — if you haven’t had your coffee yet. Launch... continue reading

How the design team behind ‘Destiny’ built their immersive worlds

How the design team behind ‘Destiny’ built their immersive worlds

Oct 25, 2014

If you’re even remotely into video games, you’ve heard of  Destiny . It’s the mega-blockbuster game of the season that’s become a multi-record breaker since its release in September. And now it holds the distinction of being the best-selling new franchise of all... continue reading