Bootstrap Thumbnails

This chapter will explain Bootstrap thumbnails. Most sites need to layout images, videos, text, etc. in a grid. Bootstrap provides an easy way to do this with thumbnails. The steps to create a thumbnail using Bootstrap are as follows:

• Add an <a> tag around the image with the class .thumbnail.
• This will add four pixels of padding and a gray border.
• When the mouse hovers over the image, it will animate to show the image's outline.

The following example demonstrates the default thumbnail:

Example

<div class="row">
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img decoding="async" src="/wp-content/uploads/2014/06/kittens.jpg"
                 alt="Generic placeholder thumbnail">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img decoding="async" src="/wp-content/uploads/2014/06/kittens.jpg"
                 alt="Generic placeholder thumbnail">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img decoding="async" src="/wp-content/uploads/2014/06/kittens.jpg"
                 alt="Generic placeholder thumbnail">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img decoding="async" src="/wp-content/uploads/2014/06/kittens.jpg"
                 alt="Generic placeholder thumbnail">
        </a>
    </div>
</div>

The result is shown below:

Adding Custom Content

Now that we have a basic thumbnail, we can add various HTML content to the thumbnail, such as titles, paragraphs, or buttons. The steps are as follows:

• Change the <a> tag with the class .thumbnail to a <div>.
• Inside this <div>, you can add anything you want. Since this is a <div>, we can use the default span-based sizing system.
• If you want to group multiple images, place them in an unordered list, with each list item floating to the left.

The following example demonstrates this:

Example

<div class="row">
    <div class="col-sm-6 col-md-3">
         <div class="thumbnail">
            <img decoding="async" src="/wp-content/uploads/2014/06/kittens.jpg" 
             alt="Generic placeholder thumbnail">
            <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Some example text. Some example text.</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">
                        Button
                    </a> 
                    <a href="#" class="btn btn-default" role="button">
                        Button
                    </a>
                </p>
            </div>
         </div>
    </div>
    <div class="col-sm-6 col-md-3">

<div class="thumbnail">
    <img decoding="async" src="/wp-content/uploads/2014/06/kittens.jpg" 
    alt="Generic placeholder thumbnail">
    <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Some sample text. Some sample text.</p>
        <p>
            <a href="#" class="btn btn-primary" role="button">
                Button
            </a> 
            <a href="#" class="btn btn-default" role="button">
                Button
            </a>
        </p>
    </div>
</div>
</div>
<div class="col-sm-6 col-md-3">
    <div class="thumbnail">
        <img decoding="async" src="/wp-content/uploads/2014/06/kittens.jpg" 
        alt="Generic placeholder thumbnail">
        <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Some sample text. Some sample text.</p>
            <p>
                <a href="#" class="btn btn-primary" role="button">
                    Button
                </a> 
                <a href="#" class="btn btn-default" role="button">
                    Button
                </a>
            </p>
        </div>
    </div>
</div>
<div class="col-sm-6 col-md-3">
    <div class="thumbnail">
        <img decoding="async" src="/wp-content/uploads/2014/06/kittens.jpg" 
        alt="Generic placeholder thumbnail">
        <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Some sample text. Some sample text.</p>
            <p>
                <a href="#" class="btn btn-primary" role="button">
                    Button
                </a> 
                <a href="#" class="btn btn-default" role="button">
                    Button
                </a>
            </p>
        </div>
    </div>
</div>
</div>