What is Image Thumbnail in Bootstrap 4 ?

Last Updated : 21 Oct, 2021

Image in Bootstrap 4 is displayed using <img> tag. In Bootstrap, Thumbnail is a border which is around the image. It is created using the .img-thumbnail class.

Syntax:

<img src="..." alt="...">

Image Thumbnails: 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.

Syntax:

<img src="..." alt="..." class="img-thumbnail">

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport"
          content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" 
          href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> 
    </script> 
    <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> 
    </script> 
</head> 
  
<body style="background-color:black"> 
    <center> 
        <h1 style="color:green;"> 
          GeeksforGeeks 
        </h1> 
        <div class="container"> 
            <h2 style="color:white"> 
              Thumbnail 
            </h2>  
          <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210929144017/geeksimage-200x145.png" 
               class="img-thumbnail" 
               alt="GFG" 
               width="200" 
               height="200">  
      </div> 
    </center> 
</body> 
  
</html>