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


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">

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">
	<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>

Thumbnail label

Thumbnail description…

Share Download