Bootstrap Thumbnails
Introduction
In this tutorial, you will see how to use Bootstrap to create thumbnails, which are grids of images, videos, and text.
Thumbnails have a simple and flexible markup. Also, you can use existing Bootstrap CSS classes such as .span2 or .span3 to set the width and height of thumbnails.
Why Use Thumbnails
When creating user experiences on the Web, you often need to create a grid of images or videos. A good example is a company website that needs to display product images; in such cases, thumbnails may be used.
Using Default Thumbnails Example
Example
<div class="container">
<ul class="thumbnails">
<li class="span3">
<a href="../php/php-tutorial.html" class="thumbnail">
<img src="../bootstrap/php-thumb.png.html" alt="php tutorial" width="260" height="180" />
</a>
</li>
<li class="span4">
<a href="../sql/sql-tutorial.html" class="thumbnail">
<img src="../bootstrap/mysql-thumb.png.html" alt="mysql tutorial" width="300" height="180" />
</a>
</li>
<li class="span5">
<a href="../js/js-tutorial.html" class="thumbnail">
<img src="../bootstrap/js-thumb.png.html" alt="js tutorial" width="380" height="180" >
</a>
</li>
</ul>
<hr>
</div> <!-- /container -->
<ul class="thumbnails">
<li class="span3">
<a href="../php/php-tutorial.html" class="thumbnail">
<img src="../bootstrap/php-thumb.png.html" alt="php tutorial" width="260" height="180" />
</a>
</li>
<li class="span4">
<a href="../sql/sql-tutorial.html" class="thumbnail">
<img src="../bootstrap/mysql-thumb.png.html" alt="mysql tutorial" width="300" height="180" />
</a>
</li>
<li class="span5">
<a href="../js/js-tutorial.html" class="thumbnail">
<img src="../bootstrap/js-thumb.png.html" alt="js tutorial" width="380" height="180" >
</a>
</li>
</ul>
<hr>
</div> <!-- /container -->
View example online
You can customize the default thumbnails and add paragraphs, heading lists, or other types of HTML content.
Custom Thumbnails Example
Example
<div class="container">
<ul class="thumbnails">
<li class="span5">
<div class="thumbnail">
<img src="../bootstrap/shoes1.jpg.html" 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="../index.html" class="btn btn-success">Buy</a> <a href="../index.html" class="btn btn-warning">Try</a></p>
</div>
</div>
</li>
<li class="span5">
<div class="thumbnail">
<img src="../bootstrap/shoes2.jpg.html" 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="../index.html" class="btn btn-success">Buy</a> <a href="../index.html" class="btn btn-warning">Try</a></p>
</div>
</div>
</li>
</ul>
<hr>
<footer>
<p>© Company 2013</p>
</footer>
</div> <!-- /container -->
<ul class="thumbnails">
<li class="span5">
<div class="thumbnail">
<img src="../bootstrap/shoes1.jpg.html" 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="../index.html" class="btn btn-success">Buy</a> <a href="../index.html" class="btn btn-warning">Try</a></p>
</div>
</div>
</li>
<li class="span5">
<div class="thumbnail">
<img src="../bootstrap/shoes2.jpg.html" 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="../index.html" class="btn btn-success">Buy</a> <a href="../index.html" class="btn btn-warning">Try</a></p>
</div>
</div>
</li>
</ul>
<hr>
<footer>
<p>© Company 2013</p>
</footer>
</div> <!-- /container -->
View example online
Click here to download all HTML, CSS, JS, and image files used in this tutorial.
Other Extensions