Bootstrap 5 Images Thumbnails
Bootstrap 5 Images thumbnails are used to add a 1px rounded border around the image. A thumbnail is a small size image that represents a larger image.
Images thumbnails used Class:
- .img-thumbnail: This class is used to create the thumbnail image. This class adds 1px rounded border to the image.
Syntax:
<img src="..." class="img-thumbnail" alt="...">
Example 1: In this example, we will use .img-thumbnail class to create a thumbnail image.
HTML
<!DOCTYPE html> < html > < head > < title >Bootstrap 5 Images Thumbnails</ title > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "container text-center" > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Bootstrap 5 Images Thumbnails</ h2 > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" class = "img-thumbnail" alt = "GFG" > </ div > </ body > </ html > |
Output:
Example 2: In this example, we will use .img-thumbnail and .rounded-circle classes to create a thumbnail of rounded image.
HTML
<!DOCTYPE html> < html > < head > < title >Bootstrap 5 Images Thumbnails</ title > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "container text-center" > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Bootstrap 5 Images Thumbnails</ h2 > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" class = "img-thumbnail rounded-circle" alt = "GFG" > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/content/images/#image-thumbnails
Contact Us