0
0
Bootsrapmarkup~5 mins

Image thumbnails in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Image thumbnails help show smaller versions of pictures. They make pages load faster and look neat.

Showing a gallery of photos where users can click to see bigger images.
Displaying product images in a shopping site with small previews.
Listing user profile pictures in a small size.
Creating a blog post summary with a small image preview.
Showing multiple images in a grid without taking too much space.
Syntax
Bootsrap
<img src="image.jpg" class="img-thumbnail" alt="Description">

The img-thumbnail class adds a border and padding to the image.

Always add alt text for accessibility.

Examples
A simple thumbnail image with a red flower.
Bootsrap
<img src="flower.jpg" class="img-thumbnail" alt="Red flower">
Thumbnail with rounded corners using rounded class.
Bootsrap
<img src="cat.png" class="img-thumbnail rounded" alt="Cute cat">
Thumbnail with fixed width to control size.
Bootsrap
<img src="landscape.jpg" class="img-thumbnail" style="width: 150px;" alt="Mountain view">
Sample Program

This page shows three thumbnails side by side. The first is a normal thumbnail, the second has rounded corners, and the third is smaller in width.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Image Thumbnails</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="container py-4">
    <h1>Image Thumbnails Example</h1>
    <p>Below are three image thumbnails with different styles.</p>
    <div class="d-flex gap-3">
      <img src="https://via.placeholder.com/150" class="img-thumbnail" alt="Placeholder 150">
      <img src="https://via.placeholder.com/150" class="img-thumbnail rounded" alt="Rounded placeholder">
      <img src="https://via.placeholder.com/150" class="img-thumbnail" style="width: 100px;" alt="Smaller placeholder">
    </div>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Use descriptive alt text so screen readers can explain images to users.

Thumbnails keep images neat and consistent in size.

You can combine img-thumbnail with other Bootstrap classes like rounded for style.

Summary

Image thumbnails show smaller versions of images with a border and padding.

Use the img-thumbnail class on <img> tags in Bootstrap.

Always add alt text for accessibility and better user experience.