Bootstrap Tutorial - Bootstrap Thumbnails

Default thumbnails

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--  w  w  w .ja  va 2s  .  co  m-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin: 20px;'>

  <div class="row">
    <div class="col-lg-3">
      <a href="#" class="thumbnail"> <img data-src="holder.js/100%x180"
        alt="100%x180" style="height: 180px; width: 100%; display: block;"
        src="">
      </a>
    </div>
    <div class="col-lg-3">
      <a href="#" class="thumbnail"> <img data-src="holder.js/100%x180"
        alt="100%x180" style="height: 180px; width: 100%; display: block;"
        src="">
      </a>
    </div>
    <div class="col-lg-3">
      <a href="#" class="thumbnail"> <img data-src="holder.js/100%x180"
        alt="100%x180" style="height: 180px; width: 100%; display: block;"
        src="">
      </a>
    </div>
    <div class="col-lg-3">
      <a href="#" class="thumbnail"> <img data-src="holder.js/100%x180"
        alt="100%x180" style="height: 180px; width: 100%; display: block;"
        src="">
      </a>
    </div>
  </div>
</body>
</html>

Click to view the demo

Custom content thumbnails

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!-- ww  w.  ja  v a 2  s  .  c o m-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin: 20px;'>

  <div class="row">
    <div class="col-lg-4">
      <div class="thumbnail">
        <img data-src="holder.js/300x200" alt="300x200"
          style="width: 300px; height: 200px;" src="">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.
            Donec id elit non mi porta gravida at eget metus. Nullam id dolor
            id nibh ultricies vehicula ut id elit.</p>
          <p>
            <a href="#" class="btn btn-primary">Action</a> <a href="#"
              class="btn btn-default">Action</a>
          </p>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="thumbnail">
        <img data-src="holder.js/300x200" alt="300x200"
          style="width: 300px; height: 200px;" src="">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.
            Donec id elit non mi porta gravida at eget metus. Nullam id dolor
            id nibh ultricies vehicula ut id elit.</p>
          <p>
            <a href="#" class="btn btn-primary">Action</a> <a href="#"
              class="btn btn-default">Action</a>
          </p>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="thumbnail">
        <img data-src="holder.js/300x200" alt="300x200"
          style="width: 300px; height: 200px;" src="">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.
            Donec id elit non mi porta gravida at eget metus. Nullam id dolor
            id nibh ultricies vehicula ut id elit.</p>
          <p>
            <a href="#" class="btn btn-primary">Action</a> <a href="#"
              class="btn btn-default">Action</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Click to view the demo