Bootstrap Thumbnails

Advertisements


This chapter discusses about Bootstrap thumbnails. A lot of sites need a way to lay out images,videos,text, etc in a grid, and Bootstrap has an easy way to do this with thumbnails. To create thumbnails using Bootstrap:

  • Add an <a> tag with the class of .thumbnail around an image.

  • This adds four pixels of padding and a gray border.

  • On hover, an animated glow outlines the image.

The following example demonstrates a default thumbnail:

<div class="row">
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="/bootstrap/images/kittens.jpg" 
         alt="Generic placeholder thumbnail">
      </a>
   </div>
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="/bootstrap/images/kittens.jpg" 
         alt="Generic placeholder thumbnail">
      </a>
   </div>
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="/bootstrap/images/kittens.jpg" 
         alt="Generic placeholder thumbnail">
      </a>
   </div>
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="/bootstrap/images/kittens.jpg" 
         alt="Generic placeholder thumbnail">
      </a>
   </div>
</div>
Thumbnail Demo

Adding Custom Content

Now that we have a basic thumbnail, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails. Follow the steps below:

  • Change the <a> tag that has a class of .thumbnail to a <div>.

  • Inside of that <div>, you can add anything you need. As this is a <div>, we can use the default span-based naming convention for sizing.

  • If you want to group multiple images, place them in an unordered list, and each list item will be floated to the left.

The following example demonstrates this:

<div class="row">
   <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
         <img src="/bootstrap/images/kittens.jpg" 
         alt="Generic placeholder thumbnail">
      </div>
      <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 class="col-sm-6 col-md-3">
      <div class="thumbnail">
         <img src="/bootstrap/images/kittens.jpg" 
         alt="Generic placeholder thumbnail">
      </div>
      <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 class="col-sm-6 col-md-3">
      <div class="thumbnail">
         <img src="/bootstrap/images/kittens.jpg" 
         alt="Generic placeholder thumbnail">
      </div>
      <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 class="col-sm-6 col-md-3">
      <div class="thumbnail">
         <img src="/bootstrap/images/kittens.jpg" 
         alt="Generic placeholder thumbnail">
      </div>
      <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>
Custom Thumbnail Demo


Advertisements
Advertisements