Here we are solving a basic problem faced by a beginner web developer in bootstrap i.e. designing thumbnails in bootstrap .

Objectives and Outcomes

In this, we will discuss about designing thumbnails in bootstrap

Thumbnails

The following example shows the code for inserting a thumbnail in your webpage:

<img src="img/123.jpg" class="img-thumbnail img-responsive" alt="thumbnail" width="200" height="150">
thumbnail

The Bootstrap thumbnail component is very useful for creating grids of images or videos, lists of products, portfolios, and much more. You can also insert HTML content like headings, paragraphs, or buttons into thumbnails.

Another example


<div class="thumbnail">
	<img src="img/123.jpg"class="img-thumbnail img-responsive" alt="thumbnail" width="200" height="150">
	<center>
	<div class="caption">
		<h3>Thumbnail label</h3>
		<p>Thumbnail description…</p>
		<p><a href="#" class="btn btn-primary">Share</a> <a href="#" class="btn btn-default">Download</a></p>
	</div>
	</center>
</div>
thumbnail

Thumbnail label

Thumbnail description…

Share Download