Bootstrap Thumbnails

Now the most of sites have requirement to lay out videos, image, text and other data in a grid. Extend grid system with the thumbnail component of Bootstrap to easily display grids of images, videos, text, and more. See below instructions to use Bootstrap thumbnail feature.

• 
  

  Wrap image tag with <a> tag and apply .thumbnail class on this.

  
  


• 
  

  You will see grey color border and four pixels padding.

  
  


• 
  

  When you will hover on image, outline of the image will glow with animation.

  
  

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

Demo

Adding Custom Content

Now we have bit of extra content with thumbnail, it’s possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails. Change the above mention code and follow the steps below:

• 
  

  Convert the <a> tag in to <div> and class .thumbnail will remain as is.

  
  


• 
  

  Within that <div>, you can put in the content what you need. As this is a <div>.

  
  


• 
  

  In the case of multiple group images simply place all them in <ul> tag and every list item will be left floated.

  
  

<div class="row">
 <div class="col-sm-6 col-md-3">
 <div class="thumbnail">
 <img src="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="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="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="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>

Demo

Bootstrap Thumbnails