88

Bootstrap 4 Image thumbnail

In this article, we will understand how to create an image thumbnail in Bootstrap 4.

What do you mean by image thumbnail?

In Bootstrap 4, the image thumbnail is a border surrounded by the image.

To create this image thumbnail, you can use the .img-thumbnail class.

Following is the syntax of the image thumbnail.

Syntax:

In the above syntax,

• img is a tag used for adding an image in html.
• Src is the source of the image.
• Alt is used to give the alternative name of the image in place of not loading an image.
• img-thumbnail is the class used for adding a thumbnail in an image.

Let’s take the various examples of image thumbnails in bootstrap 4.

Example 1:

Explanation:

In the above example, we have created an image thumbnail in bootstrap 4.

Output:

Following is the output of this example.

Example 2:

Explanation:

In the above example, we have created an image gallery thumbnail in bootstrap 4.

Output:

Following is the output of this example.

---