top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

How to create thumbnails and customize thumbnails using Bootstrap?

0 votes
436 views
How to create thumbnails and customize thumbnails using Bootstrap?
posted Jul 3, 2017 by Ananna Dey

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes

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.

Customize thumbnails

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.

Example

<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>

Preview

enter image description here

answer Jul 3, 2017 by Anand Huded
...