Bootstrap - Thumbnails

 

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>

 

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>