title: Can't figure out how to use Bootstrap thumbnail component
body: <p>I'm trying to use Bootstrap's thumbnail component to display a list of product categories with thumbnail images. I want users to click the thumbnails to go to the category.</p>
  
  <p>The documentation on the Bootstrap website provides this basic markup:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul class="thumbnails"&gt;
      &lt;li class="span4"&gt; 
          &lt;a href="#" class="thumbnail"&gt;
              &lt;img data-src="holder.js/300x200" alt=""&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      ...
  &lt;/ul&gt;
  </code></pre>
  
  <p>I've Googled for information about holder.js, found the official holder.js page, downloaded the zip version, put the files in my site's js folder and linked to the holder.js file with a script tag in my HTML.</p>
  
  <p>But how/where in the markup do I specify what image files to use?</p>
  
  <p>I also need to include a category name under each image, probably with a span or h4 tag. This would need to form part of the clickable block.</p>
  
  <p>UPDATE:
  Just to clarify, it's really only the styling aspects of the thumbnail component that I want to utilise. So perhaps I can achieve this with the thumbnails component and associated HTML markup, and leave out holder.js altogether?</p>
  
  <p>This is the kind of HTML mark-up I would like to use:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul class="thumbnails"&gt;
      &lt;li class="span4"&gt;
          &lt;a href="/category-name/" class="thumbnail"&gt;
              &lt;img src="/assets/images/filename.jpg" alt=""&gt;
              &lt;span&gt;Category name&lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      ...
  &lt;/ul&gt;
  </code></pre>