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.
Example
In the below example, the image is given in the anchor tag. When hovered on image, a border appears.
[html]
<!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>
[/html]
Output:
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.
Example
In the below example, labels and buttons "Share" and "Follow" are added inside the thumbnail using the <div> element.
[html]
<!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>
[/html]
Output:
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.