Bootstrap Tutorial - Bootstrap Thumnails








Bootstrap's thumbnails component is used to display images and video thumbnails.

It displays images and videos with clickable appeal by applying a border that forms a box around them. It also comes with a neat hover effect that highlights the focused thumbnail by changing its border color to blue.

Here's the markup for creating a thumbnail: 

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head><!--   w  w w . j a va2s  .co m-->
  <body style='margin:30px'>
        <a href="#" class="thumbnail">
            <img src="http://placehold.it/200x200">
        </a>

  </body>
</html>

Click to view the demo





Example 2

Let's create a four-column design using Bootstrap's grid system. We'll place an image in each column and then apply thumbnail markup to each one.

We'll use the class col-xs-3 to create a four-column design: 

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head><!--  w ww.  ja  v a2s.co  m-->
  <body style='margin:30px'>
        <div class="row">
            <div class="col-xs-3">
                <a href="#" class="thumbnail">
                    <img src="http://placehold.it/200x200">
                </a>
            </div>
            <div class="col-xs-3">
                <a href="#" class="thumbnail">
                    <img src="http://placehold.it/200x200">
                </a>
            </div>
            <div class="col-xs-3">
                <a href="#" class="thumbnail">
                    <img src="http://placehold.it/200x200">
                </a>
            </div>
            <div class="col-xs-3">
                <a href="#" class="thumbnail">
                    <img src="http://placehold.it/200x200">
                </a>
            </div>
        </div>

  </body>
</html>

Click to view the demo





Example 3

Let's give a caption to each thumbnail. We just need to add an extra div with class caption just below the <img> tag. Our snippet for a thumbnail with a caption should be: 

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head><!--   w w w .j  a  v  a  2  s . c  o m-->
  <body style='margin:30px'>
        <a href="#" class="thumbnail">
            <img src="http://placehold.it/200x200">
                <div class="caption">
                    <h3>Caption Goes Here!</h3>
                </div>
        </a>

  </body>
</html>

Click to view the demo

Example 4

You can also add some excerpts to each thumbnail and a Read More button for linking to different pages in your website. 

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head><!--  w w w.jav a2  s  . c  om-->
  <body style='margin:30px'>
    <div class="thumbnail">
        <img src="http://placehold.it/200x200"/>
        <div class="caption">
            <h3>Microsoft</h3>
            <p>Lorem ipsum  dolor  sit amet,  consectetur ...</p>
            <p><a  href="#" class="btn btn-primary">Read More</a></p>
        </div>
    </div>

  </body>
</html>

Click to view the demo