Bootstrap - Image Utilities

1. What Are Image Utilities in Bootstrap?

Bootstrap provides special image utility classes that help you:

• Make images responsive (adjust automatically to screen size)

• Give images rounded corners

• Add borders and padding to make images look like photo thumbnails

You don’t have to write any custom CSS — just use Bootstrap’s built-in classes.

2. .img-fluid — Making Images Responsive

Definition:

The .img-fluid class makes your image responsive — it automatically scales up or down to fit the width of its parent container.

How It Works:

It applies this CSS behind the scenes:

img {
  max-width: 100%;
  height: auto;
}

This ensures the image:

• Never grows larger than its container (max-width: 100%)

• Keeps its original aspect ratio (height: auto)

Example:

<img src="example.jpg" class="img-fluid" alt="Responsive image">

Result:
The image resizes automatically on all devices — large on desktop, smaller on mobile.

3. .rounded — Adding Rounded Corners

Definition:

The .rounded class gives an image (or any element) slightly rounded corners, making it look smoother.

How It Works:

It applies:

border-radius: 0.375rem; /* or similar */

Example:

<img src="profile.jpg" class="rounded" alt="Rounded image">

Result:
The image corners are gently rounded, giving a neat, modern appearance.

More Rounded Variants:

Bootstrap also provides extra classes for different corner effects:

Example:

<img src="avatar.jpg" class="rounded-circle" alt="Circular image" " height="150">

Result:
The image appears circular, perfect for avatars or team photos.

4. .img-thumbnail — Framed (Bordered) Images

Definition:

The .img-thumbnail class adds:

• A small border

• Padding

• Rounded corners

This makes the image look like a photo thumbnail — often used in galleries.

How It Works:

It applies CSS like:

padding: 0.25rem;
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: 0.375rem;
max-width: 100%;
height: auto;

Example:

<img src="photo.jpg" class="img-thumbnail" alt="Thumbnail image">

✅ Result:
The image appears inside a white frame with rounded corners, like a printed photo.

5. Combining Classes

You can combine these classes for different effects.

Examples:

Responsive and Rounded:

<img src="image.jpg" class="img-fluid rounded" alt="Rounded responsive image">

Responsive Thumbnail:

<img src="image.jpg" class="img-fluid img-thumbnail" alt="Responsive thumbnail">

Circular Thumbnail:

<img src="avatar.jpg" class="img-thumbnail rounded-circle" alt="Circular thumbnail" " height="150">

6. Comparison Example

Here’s how each looks in one row:

<div class="container text-center">
  <div class="row gy-4">
    <div class="col">
      <img src="image.jpg" class="img-fluid" alt="Responsive">
      <p>.img-fluid</p>
    </div>
    <div class="col">
      <img src="image.jpg" class="img-fluid rounded" alt="Rounded">
      <p>.rounded</p>
    </div>
    <div class="col">
      <img src="image.jpg" class="img-fluid rounded-circle" alt="Circle">
      <p>.rounded-circle</p>
    </div>
    <div class="col">
      <img src="image.jpg" class="img-fluid img-thumbnail" alt="Thumbnail">
      <p>.img-thumbnail</p>
    </div>
  </div>
</div>

7. When to Use Each Class

In Simple Words:

So in short:

Bootstrap Image Utilities make it super easy to style and resize images.
Use .img-fluid to make them responsive, .rounded to make them look smoother, and .img-thumbnail to give them a framed, polished look — all without writing any CSS yourself.