Twitter Bootstrap Thumbnails tutorial

Last update on August 19 2022 21:51:33 (UTC/GMT +8 hours)

Introduction

In this tutorial, you will see how to create thumbnails, i.e. grids of images, videos, text, and more, using Twitter Bootstrap.

Thumbnails have a very simple as well as flexible markup. Moreover, you may use existing bootstrap css classes like .span2 or .span3 to set width and height of thumbnails.

Why shall you use thumbnails

While creating the user experience in web, often you require to create a grid of photos or videos. A good example is a company or portfolio web site where you need to display images of your product or your creations. You may use thumbnails for this.

Example of using default thumbnails

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of using default thumbnails from w3resource.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0 ">
<meta name="description" content="Example of using default thumbnails from w3resource.com">
<meta name="author" content="">
<!-- Le styles -->
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<link href="twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="twitter-bootstrap-v2/docs/examples/images/favicon.ico">
<link rel="apple-touch-icon" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
  </head>
  <body>
    <div class="container">
      <ul class="thumbnails">
  <li class="span3">
    <a href="https://www.w3resource.com/php/php-home.php" class="thumbnail">
      <img src="php-thumb.png" alt="php tutorial" width="260" height="180" />
    </a>
  </li>
 <li class="span4">
    <a href="https://www.w3resource.com/sql/tutorials.php" class="thumbnail">
      <img src="mysql-thumb.png" alt="mysql tutorial" width="300" height="180" />
    </a>
  </li>
 <li class="span5">
    <a href="https://www.w3resource.com/javascript/javascript.php" class="thumbnail">
      <img src="js-thumb.png" alt="js tutorial" width="380" height="180" >
    </a>
  </li>
</ul>
<hr>
</div> <!-- /container -->
</body>
</html>

View example live

You may customize the default thumbnails and add paragraphs, heading, list or any other kind of HTML content.

Example of thumbnails customized

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example of thumbnails customized from w3resource.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0 ">
    <meta name="description" content="Example of thumbnails customized from w3resource.com">
    <meta name="author" content="">
    <!-- Le styles -->
    <link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
	<link href="twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet">
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="twitter-bootstrap-v2/docs/examples/images/favicon.ico">
    <link rel="apple-touch-icon" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
  </head>
<body>
<div class="container">
<ul class="thumbnails">
        <li class="span5">
          <div class="thumbnail">
            <img src="shoes1.jpg" alt="product 1">
            <div class="caption">
              <h5>Product detail</h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 		magna aliqua.</p>
              <p><a href="#" class="btn btn-success">Buy</a> <a href="#" class="btn btn-warning">Try</a></p>
            </div>
          </div>
        </li>
        <li class="span5">
          <div class="thumbnail">
            <img src="shoes2.jpg" alt="product 2">
            <div class="caption">
              <h5>Product detail</h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              <p><a href="#" class="btn btn-success">Buy</a> <a href="#" class="btn btn-warning">Try</a></p>
            </div>
          </div>
        </li>
      </ul>
      <hr>
      <footer>
        <p>© Company 2012</p>
      </footer>
    </div> <!-- /container -->
</body>
</html>

View the example live

You may download all the HTML, CSS, JS and image files used in our tutorials here.

Previous: Twitter Bootstrap inline labels and badges tutorial
Next: Twitter Bootstrap progress bars tutorial