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.
Holder.js is just image placeholder framework based on javascript and inline images. It is used by bootstrap to create sample images. There is no need in this library on production. So instead of using data-src
attribute and holder.js
library you should use src
attribute and markup like:
<ul class="thumbnails">
<li class="span4">
<a class="thumbnail" href="#">
<img src="/image/path.jpg" alt="My Image" />
<span class="caption">This is my image</span>
</a>
</li>
</ul>
You can also need to disable text underline in image caption. Just use css:
a.thumbnail:hover {
text-decoration: none;
}
Example: http://jsfiddle.net/M3fpA/46/