Bootstrap Images - Complete Guide with Examples

Introduction

Bootstrap provides a set of utility classes for styling images to make them responsive, rounded, circular, thumbnails, and aligned properly. These classes work consistently across all devices and browsers without writing custom CSS. Bootstrap images are designed to be mobile-first and fluid by default.

1. Responsive Images (Fluid Images)

Make images scale properly with their parent container using the .img-fluid class. This applies max-width: 100%; and height: auto; to the image.

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

The image will never exceed its parent container's width and will scale down proportionally on smaller screens.

Example with different parent widths

<div class="col-6">
  <img src="example.jpg" class="img-fluid" alt="Image scales to 50% of parent">
</div>
<div class="col-12">
  <img src="example.jpg" class="img-fluid" alt="Image scales to full width">
</div>

2. Image Thumbnails

Add the .img-thumbnail class to give an image a rounded 1px border appearance with some padding and a subtle box shadow.

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

Customizing thumbnails

<!-- Default thumbnail -->
<img src="image.jpg" class="img-thumbnail" alt="Default thumbnail" width="200">

<!-- Thumbnail with custom dimensions -->
<img src="image.jpg" class="img-thumbnail" width="150" height="150" alt="Square thumbnail">

<!-- Thumbnail with additional rounded corners -->
<img src="image.jpg" class="img-thumbnail rounded-circle" width="100" alt="Circular thumbnail">

3. Rounded Corners

Use Bootstrap's border radius utilities to round image corners.

<!-- No rounding -->
<img src="image.jpg" class="rounded-0" alt="Square corners">

<!-- Small rounding -->
<img src="image.jpg" class="rounded-1" alt="Slightly rounded">

<!-- Medium rounding (default rounded) -->
<img src="image.jpg" class="rounded" alt="Medium rounded corners">

<!-- Large rounding -->
<img src="image.jpg" class="rounded-3" alt="Large rounded corners">

<!-- Extra large rounding -->
<img src="image.jpg" class="rounded-4" alt="Extra large rounding">

<!-- Maximum rounding -->
<img src="image.jpg" class="rounded-5" alt="Maximum rounding">

Rounding specific corners

<!-- Round only top corners -->
<img src="image.jpg" class="rounded-top" alt="Top corners rounded">

<!-- Round only bottom corners -->
<img src="image.jpg" class="rounded-bottom" alt="Bottom corners rounded">

<!-- Round only start (left) corners -->
<img src="image.jpg" class="rounded-start" alt="Left corners rounded">

<!-- Round only end (right) corners -->
<img src="image.jpg" class="rounded-end" alt="Right corners rounded">

4. Circle / Avatar Images

Create perfectly round images (useful for profile pictures and avatars) using the .rounded-circle class.

<!-- Circular image -->
<img src="profile.jpg" class="rounded-circle" width="100" height="100" alt="Profile picture">

<!-- Responsive circle avatar -->
<img src="avatar.jpg" class="rounded-circle img-fluid" style="max-width: 150px;" alt="Avatar">

<!-- Circle with border -->
<img src="user.jpg" class="rounded-circle border border-primary border-3" width="120" height="120" alt="User with border">

Note: For perfect circles, the image width and height should be equal, or you can set both dimensions explicitly.

5. Image Alignment

Align images within their parent containers using text alignment or float utilities.

Center align images (block level)

<!-- Using text-center on parent -->
<div class="text-center">
  <img src="image.jpg" class="img-fluid" alt="Centered image">
</div>

<!-- Using mx-auto margin utility (requires d-block) -->
<img src="image.jpg" class="img-fluid d-block mx-auto" alt="Centered image">

Left and right alignment (floating)

<!-- Float left -->
<img src="image.jpg" class="float-start" alt="Left aligned image">

<!-- Float right -->
<img src="image.jpg" class="float-end" alt="Right aligned image">

<!-- Clear floats after -->
<div class="clearfix"></div>

Responsive alignment

<!-- Center on mobile, left on medium screens -->
<img src="image.jpg" class="img-fluid d-block mx-auto mx-md-0" alt="Responsive alignment">

<!-- Float right on large screens, default left on smaller -->
<img src="image.jpg" class="float-lg-end" alt="Responsive float">

6-8. Border, Shadow, and Opacity

6. Image with Border

<!-- Basic border -->
<img src="image.jpg" class="border" width="200" alt="Image with border">

<!-- Colored border -->
<img src="image.jpg" class="border border-primary border-3" width="200" alt="Primary border">
<img src="image.jpg" class="border border-danger border-4 rounded" width="200" alt="Red border with rounding">
<img src="image.jpg" class="border border-secondary border-2" style="border-style: dashed !important;" width="200" alt="Dashed border">

7. Image Shadows

<img src="image.jpg" class="shadow-sm" width="200" alt="Small shadow">
<img src="image.jpg" class="shadow" width="200" alt="Medium shadow">
<img src="image.jpg" class="shadow-lg" width="200" alt="Large shadow">
<img src="image.jpg" class="shadow-none" width="200" alt="No shadow">
<img src="image.jpg" class="shadow-lg rounded-4" width="200" alt="Shadow with rounding">

8. Image Opacity

<img src="image.jpg" class="opacity-100" width="200" alt="Full opacity">
<img src="image.jpg" class="opacity-75" width="200" alt="75% opacity">
<img src="image.jpg" class="opacity-50" width="200" alt="50% opacity">
<img src="image.jpg" class="opacity-25" width="200" alt="25% opacity">
<img src="image.jpg" class="opacity-0" width="200" alt="Invisible">

9-11. Hover Effects, Figure Caption, and Background Images

9. Image Hover Effects

<style>
  .hover-scale { transition: transform 0.3s ease; }
  .hover-scale:hover { transform: scale(1.05); }
</style>
<img src="image.jpg" class="img-fluid rounded hover-scale" alt="Scale on hover">

<style>
  .hover-opacity { transition: opacity 0.3s ease; }
  .hover-opacity:hover { opacity: 0.7; }
</style>
<img src="image.jpg" class="rounded hover-opacity" width="200" alt="Fade on hover">

<style>
  .hover-bright { transition: filter 0.3s ease; }
  .hover-bright:hover { filter: brightness(1.1); }
</style>
<img src="image.jpg" class="rounded hover-bright" width="200" alt="Brighten on hover">

10. Image with Figure and Figcaption

<figure class="figure">
  <img src="image.jpg" class="figure-img img-fluid rounded" alt="Descriptive image">
  <figcaption class="figure-caption">A caption for the image above.</figcaption>
</figure>

<figure class="figure">
  <img src="image.jpg" class="figure-img img-fluid rounded" alt="Example">
  <figcaption class="figure-caption text-end">Caption aligned to the right.</figcaption>
</figure>

<figure class="figure">
  <img src="image.jpg" class="figure-img img-fluid rounded shadow" alt="Shadow image">
  <figcaption class="figure-caption text-primary">Caption with primary color.</figcaption>
</figure>

11. Background Images with Bootstrap

<div class="card text-white bg-dark" style="background-image: url('background.jpg'); background-size: cover; background-position: center;">
  <div class="card-body">
    <h5 class="card-title">Card with Background Image</h5>
    <p class="card-text">Content overlays on the image.</p>
  </div>
</div>

<div class="p-5 text-center bg-dark text-white" style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('hero.jpg'); background-size: cover; background-position: center;">
  <h1 class="display-4">Hero Section</h1>
  <p class="lead">Text overlaying a background image.</p>
</div>

12-18. Gallery, Lazy Loading, Overlays, Picture, and Real-World Examples

12. Image Gallery with Bootstrap Grid (Simple)

<div class="row g-3">
  <div class="col-6 col-md-4 col-lg-3">
    <img src="image1.jpg" class="img-fluid rounded" alt="Gallery image 1">
  </div>
  <div class="col-6 col-md-4 col-lg-3">
    <img src="image2.jpg" class="img-fluid rounded" alt="Gallery image 2">
  </div>
  <div class="col-6 col-md-4 col-lg-3">
    <img src="image3.jpg" class="img-fluid rounded" alt="Gallery image 3">
  </div>
  <div class="col-6 col-md-4 col-lg-3">
    <img src="image4.jpg" class="img-fluid rounded" alt="Gallery image 4">
  </div>
</div>

Image gallery with hover overlay effect

<style>
  .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
  }
  .gallery-item img {
    transition: transform 0.3s ease;
  }
  .gallery-item:hover img {
    transform: scale(1.05);
  }
  .gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 0.5rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }
  .gallery-item:hover .gallery-overlay {
    transform: translateY(0);
  }
</style>

<div class="row g-3">
  <div class="col-md-4">
    <div class="gallery-item">
      <img src="image.jpg" class="img-fluid w-100" alt="Gallery">
      <div class="gallery-overlay text-center">
        <small>Image Title</small>
      </div>
    </div>
  </div>
</div>

13. Lazy Loading Images

<img src="large-image.jpg" class="img-fluid rounded" loading="lazy" alt="Lazy loaded image">
<img src="thumbnail.jpg" data-src="full-image.jpg" class="img-fluid rounded" loading="lazy" alt="Lazy load with placeholder">

14. Image with Badge Overlay

<div style="position: relative; display: inline-block;">
  <img src="profile.jpg" class="rounded-circle" width="80" height="80" alt="Profile">
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    3
    <span class="visually-hidden">notifications</span>
  </span>
</div>

<div style="position: relative; display: inline-block;">
  <img src="avatar.jpg" class="rounded-circle" width="60" height="60" alt="User">
  <span class="position-absolute bottom-0 end-0 translate-middle p-1 bg-success border border-light rounded-circle">
    <span class="visually-hidden">Online</span>
  </span>
</div>

15. Picture Element with Bootstrap

<picture>
  <source srcset="image-large.jpg" media="(min-width: 992px)">
  <source srcset="image-medium.jpg" media="(min-width: 768px)">
  <source srcset="image-small.jpg" media="(max-width: 767px)">
  <img src="image-default.jpg" class="img-fluid rounded shadow" alt="Responsive picture">
</picture>

16. Image Alignment with Text (Real World Examples)

<div class="clearfix">
  <img src="image.jpg" class="float-start me-3 mb-2 rounded" width="200" alt="Floated image">
  <p>This text wraps around the image. The image is floated to the left with margin utilities applied. The clearfix class ensures the container properly contains the floated image.</p>
  <p>Additional paragraph text continues to wrap naturally around the floated image until it clears.</p>
</div>

<div class="d-flex align-items-center gap-3">
  <img src="avatar.jpg" class="rounded-circle" width="60" height="60" alt="User avatar">
  <div>
    <h5 class="mb-0">John Doe</h5>
    <small class="text-muted">john@example.com</small>
  </div>
</div>

<div class="card" style="width: 18rem;">
  <img src="card-image.jpg" class="card-img-top" alt="Card image">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some quick example text describing the image above.</p>
    <button class="btn btn-primary">View Details</button>
  </div>
</div>

<div class="card text-bg-dark">
  <img src="background.jpg" class="card-img" alt="Background">
  <div class="card-img-overlay">
    <h5 class="card-title">Image Overlay Title</h5>
    <p class="card-text">Text overlaying the image with dark background for readability.</p>
  </div>
</div>

17. Responsive Image Sizing with Width Utilities

<img src="image.jpg" class="img-fluid w-25" alt="25% of parent width">
<img src="image.jpg" class="img-fluid w-50" alt="50% of parent width">
<img src="image.jpg" class="img-fluid w-75" alt="75% of parent width">
<img src="image.jpg" class="img-fluid w-100" alt="Full parent width">
<img src="image.jpg" class="img-fluid w-100 w-md-75 w-lg-50" alt="Responsive width">

18. Complete Image Gallery Page Section

<section class="container my-5">
  <h2 class="text-center mb-4">Image Gallery</h2>
  <div class="row g-4">
    <div class="col-sm-6 col-md-4 col-lg-3">
      <div class="card h-100 shadow-sm">
        <img src="image1.jpg" class="card-img-top img-fluid" alt="Gallery image">
        <div class="card-body">
          <p class="card-text text-center">Image description</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
      <div class="card h-100 shadow-sm">
        <img src="image2.jpg" class="card-img-top img-fluid rounded-top" alt="Gallery image">
        <div class="card-body">
          <p class="card-text text-center">Another image description</p>
        </div>
      </div>
    </div>
    <!-- Add more image cards as needed -->
  </div>
</section>

Quick Reference Summary

Purpose	Class / Utility
Responsive image	`.img-fluid`
Thumbnail	`.img-thumbnail`
Circle / Avatar	`.rounded-circle`
Rounded corners	`.rounded`, `.rounded-0` to `.rounded-5`
Specific corner rounding	`.rounded-top`, `.rounded-bottom`, `.rounded-start`, `.rounded-end`
Shadows	`.shadow`, `.shadow-sm`, `.shadow-lg`
Opacity	`.opacity-100`, `.opacity-75`, `.opacity-50`, `.opacity-25`, `.opacity-0`
Image alignment	`.float-start`, `.float-end`, `.d-block.mx-auto`, `.text-center` on parent
Border	`.border`, `.border-*`, `.border-{color}`
Figure with caption	`<figure class="figure">`, `.figure-img`, `.figure-caption`
Card image	`.card-img-top`, `.card-img-bottom`, `.card-img-overlay`
Width control	`.w-25`, `.w-50`, `.w-75`, `.w-100`

Conclusion

Bootstrap Images utilities give you complete control over how images appear in your web pages. From simple responsive behavior to advanced styling with rounded corners, shadows, circles, and thumbnails, Bootstrap handles all the heavy lifting. By combining these image utilities with Bootstrap's grid system, cards, and spacing classes, you can create professional image galleries, user avatars, product displays, and any other image-based content without writing custom CSS.