English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap Basic Tutorial

Bootstrap Plugins

Bootstrap Thumbnails

This chapter will explain Bootstrap thumbnails. Most websites need to layout images, videos, text, etc. in a grid. Bootstrap provides a convenient way for this through thumbnails. The steps to create a thumbnail with Bootstrap are as follows:

  • Add a class .thumbnail tag.

  • This will add a four-pixel inner padding (padding) and a grey border.

  • When the mouse hovers over the image, the outline of the image will be animated.

The following example demonstrates the default thumbnail:

Online Example

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
　　　　<title>Bootstrap Example　-　Thumbnail</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="row">
　　　　<div　class="col-sm-6　col-md-3">
　　　　　　　　<a　href="#"　class="thumbnail">
　　　　　　　　　　　　<img　src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Universal placeholder thumbnail">
　　　　　　　　</a>
　　　　</div>
　　　　<div　class="col-sm-6　col-md-3">
　　　　　　　　<a　href="#"　class="thumbnail">
　　　　　　　　　　　　<img　src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Universal placeholder thumbnail">
　　　　　　　　</a>
　　　　</div>
　　　　<div　class="col-sm-6　col-md-3">
　　　　　　　　<a　href="#"　class="thumbnail">
　　　　　　　　　　　　<img　src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Universal placeholder thumbnail">
　　　　　　　　</a>
　　　　</div>
　　　　<div　class="col-sm-6　col-md-3">
　　　　　　　　<a　href="#"　class="thumbnail">
　　　　　　　　　　　　<img　src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Universal placeholder thumbnail">
　　　　　　　　</a>
　　　　</div>
</div>
</body>
</html>
Test it out ‹/›

The results are as follows:

Add Custom Content

Now we have a basic thumbnail, we can add various HTML content to the thumbnail, such as titles, paragraphs, or buttons. The specific steps are as follows:

  • Add a class .thumbnail Change the <a> tag to <div>.

  • Within this <div>, you can add anything you want. Since this is a <div>, we can use the default span-based naming conventions to adjust the size.

  • If you want to group multiple images, please place them in an unordered list and each list item should float to the left.

The following example demonstrates this:

Online Example

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
　　　　<title>Bootstrap Example　-　Custom Thumbnail</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="row">
　　　　<div　class="col-sm-6　col-md-3">
　　　　　　　　<div　class="thumbnail">
　　　　　　　　　　　　<img　src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Universal placeholder thumbnail">
　　　　　　　　　　　　<div　class="caption">
　　　　　　　　　　　　　　　　<h2>Thumbnail Tag</h2>
　　　　　　　　　　　　　　　　<p>Some sample text. Some sample text.</p>
　　　　　　　　　　　　　　　　<p>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-primary"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Button
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-default"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Button
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　</div>
　　　　<div　class="col-sm-6　col-md-3">
　　　　　　　　<div　class="thumbnail">
　　　　　　　　　　　　<img　src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Universal placeholder thumbnail">
　　　　　　　　　　　　<div　class="caption">
　　　　　　　　　　　　　　　　<h2>Thumbnail Tag</h2>
　　　　　　　　　　　　　　　　<p>Some sample text. Some sample text.</p>
　　　　　　　　　　　　　　　　<p>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-primary"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Button
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-default"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Button
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　</div>
　　　　<div　class="col-sm-6　col-md-3">
　　　　　　　　<div　class="thumbnail">
　　　　　　　　　　　　<img　src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Universal placeholder thumbnail">
　　　　　　　　　　　　<div　class="caption">
　　　　　　　　　　　　　　　　<h2>Thumbnail Tag</h2>
　　　　　　　　　　　　　　　　<p>Some sample text. Some sample text.</p>
　　　　　　　　　　　　　　　　<p>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-primary"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Button
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-default"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Button
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　</div>
　　　　<div　class="col-sm-6　col-md-3">
　　　　　　　　<div　class="thumbnail">
　　　　　　　　　　　　<img　src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Universal placeholder thumbnail">
　　　　　　　　　　　　<div　class="caption">
　　　　　　　　　　　　　　　　<h2>Thumbnail Tag</h2>
　　　　　　　　　　　　　　　　<p>Some sample text. Some sample text.</p>
　　　　　　　　　　　　　　　　<p>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-primary"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Button
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　　　　　<a　href="#"　class="btn　btn-default"　role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Button
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　</div>
</div>
</body>
</html>
Test it out ‹/›

The results are as follows:

Bootstrap AlertsBootstrap Page Titles