Bootstrap Thumbnails

Introduction

In this tutorial, you will learn how to create thumbnails using Bootstrap, which are grids of images, videos, or text.

Thumbnails have a simple yet flexible markup. You can also use existing Bootstrap CSS classes like .span2 or .span3 to set the width and height of the thumbnails.

Why Use Thumbnails

When creating user experiences on the web, you often need to create grids of images or videos. A good example is a company website that needs to display product images, where thumbnails might be used.

Using Default Thumbnail Example

Example

<div class="container">
    <ul class="thumbnails">
        <li class="span3">
            <a href="//www.tutorialpro.org/php/php-tutorial.html" class="thumbnail">
                <img decoding="async" src="../bootstrap/php-thumb.png" alt="php tutorial" width="260" height="180" />
            </a>
        </li>
        <li class="span4">
            <a href="//www.tutorialpro.org/sql/sql-tutorial.html" class="thumbnail">
                <img decoding="async" loading="lazy" src="../bootstrap/mysql-thumb.png" alt="mysql tutorial" width="300" height="180" />
            </a>
        </li>
        <li class="span5">
            <a href="//www.tutorialpro.org/js/js-tutorial.html" class="thumbnail">
                <img decoding="async" loading="lazy" src="../bootstrap/js-thumb.png" alt="js tutorial" width="380" height="180" >
            </a>
        </li>
    </ul>
    <hr>
</div> <!-- /container -->

You can customize the default thumbnails and add paragraphs, header lists, or other types of HTML content.

Custom Thumbnail Example

Example

<div class="container">
    <ul class="thumbnails">
        <li class="span5">
            <div class="thumbnail">
                <img decoding="async" src="../bootstrap/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 decoding="async" src="../bootstrap/shoes2.jpg" alt="product 2">
                <div class="caption">

<h5>Product Details</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>&copy; Company 2013</p>
</footer>

</div> <!-- /container -->

Click here to download all the HTML, CSS, JS, and image files used in this tutorial. ```