How to make an entire bootstrap thumbnail clickable (for mobile and tablet)

Question

Using Bootstrap3, I am trying to make a page with few thumbnails leading to different links. I have figured out how to make hover effect with text and link but now I am confused how it can be used with mobile and tablet as there is no hover for those.

I am wondering how to make the entire thumbnail clickable? and is it a good idea to make it so?

Here is a bootply link for you to see what I mean http://www.bootply.com/OuUBXv4ope

Answer 1

Making the entire thumbnail clickable is a good idea in terms of user accessibility and in fact, easy to make.

According to your code:

<div class="col-sm-4">
    <div class="thumbnail">
        <!-- Place the anchor tag here to cover both your caption and image -->
        <a href="#" class="">
            <div class="caption">
                <h4 class="">Thumbnail Headline</h4>
                <p class="">Lorem ipsum dolor
                </p>
            </div>
            <img src="http://lorempixel.com/400/300/technics/1/" alt="..." class="">
        </a>
        <!-- Anchor tag ends covering both image and caption -->
    </div>
</div>

DEMO (The first 3 thumbnails)