Bootstrap 3 - SPLessons

Bootstrap Thumbnails

Chapter 28

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Bootstrap Thumbnails

Bootstrap Thumbnails

shape Description

Almost all the websites make use of images, videos, and text.To use these images, layouts are required. Layouts can be created with Bootstrap Thumbnails. To create thumbnails, add class .thumbnail to <a> tag.

When mouse is hovered on the image, an outline appears for the image.

shape Example

In the below example, the image is given in the anchor tag. When hovered on image, a border appears.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Thumbnails</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
    	margin: 20px;
    }
</style>
</head> 
<body>
<div class="bs-example">
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <a href="#" class="thumbnail">
                    <img src="splessons.jpg">
                </a>
            </div>
            <div class="col-xs-3">
                <a href="#" class="thumbnail">
                    <img src="splessons.jpg">
                </a>
            </div>
            <div class="col-xs-3">
                <a href="#" class="thumbnail">
                    <img src="splessons.jpg">
                </a>
            </div>
            <div class="col-xs-3">
                <a href="#" class="thumbnail">
                    <img src="splessons.jpg">
                </a>
            </div>
        </div>
    </div>
</div>
</body>
</html>  

Output:

Thumbnails Custom Content

shape Description

Within the thumbnails, elements such as text, headings, and buttons can be added.

  • Initially, create a thumbnail class inside <a>.
  • Then, place the above tag in <div> element.

If wanted to group a number of pages, place them in <ul>.

shape Example

In the below example, labels and buttons “Share” and “Follow” are added inside the thumbnail using the <div> element.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Thumbnails</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
    	margin: 20px;
    }
</style>
</head> 
<body>
<div class="bs-example">
   <div class="container">
        <div class="row">
            <div class="col-xs-6">
                <div class="thumbnail">
                    <img src="splessons.jpg" alt="Sample Image">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p> SPLessons stands for Simple Programming Lessons and was started with an intention to help developers all around the globe by presenting programming codes with different queries in different programming languages.</p>
                        <p><a href="#" class="btn btn-primary">Share</a> <a href="#" class="btn btn-default">Follow</a></p>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="thumbnail">
                    <img src="splessons.jpg" alt="Sample Image">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p> SPLessons stands for Simple Programming Lessons and was started with an intention to help developers all around the globe by presenting programming codes with different queries in different programming languages.</p>
                        <p><a href="#" class="btn btn-primary">Share</a> <a href="#" class="btn btn-default">Follow</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>     
</div>
</body>
</html>  

Output:

Summary

shape Key Points

  • Bootstrap Thumbnails gives a layout to images.
  • To add text/buttons to thumbnails, the anchor tag with image is placed in the div element.