Bootstrap 5 Framework

Images and Figures

13 min Lesson 13 of 40

Images and Figures in Bootstrap 5

Bootstrap 5 provides powerful utilities for working with images, making them responsive, adding styling, and controlling their layout. Proper image handling is crucial for creating responsive, fast-loading websites.

1. Responsive Images

The most important class for images is .img-fluid, which makes images scale with their parent container.

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

<!-- Regular Image (Not Responsive) -->
<img src="example.jpg" alt="Regular image">

<!-- Responsive Image in Container -->
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <img src="photo1.jpg" class="img-fluid" alt="Photo 1">
        </div>
        <div class="col-md-6">
            <img src="photo2.jpg" class="img-fluid" alt="Photo 2">
        </div>
    </div>
</div>
        

How it works: The .img-fluid class applies max-width: 100% and height: auto to scale images proportionally within their parent element.

Best Practice: Always use .img-fluid on images unless you have a specific reason not to. This ensures your images work well on all screen sizes.

2. Image Thumbnails

Create rounded image thumbnails with a border using the .img-thumbnail class.

<!-- Image Thumbnail -->
<img src="profile.jpg" class="img-thumbnail" alt="Profile picture">

<!-- Responsive Thumbnail -->
<img src="product.jpg" class="img-thumbnail img-fluid" alt="Product">

<!-- Gallery of Thumbnails -->
<div class="container">
    <div class="row g-3">
        <div class="col-6 col-md-4 col-lg-3">
            <img src="thumb1.jpg" class="img-thumbnail" alt="Thumbnail 1">
        </div>
        <div class="col-6 col-md-4 col-lg-3">
            <img src="thumb2.jpg" class="img-thumbnail" alt="Thumbnail 2">
        </div>
        <div class="col-6 col-md-4 col-lg-3">
            <img src="thumb3.jpg" class="img-thumbnail" alt="Thumbnail 3">
        </div>
        <div class="col-6 col-md-4 col-lg-3">
            <img src="thumb4.jpg" class="img-thumbnail" alt="Thumbnail 4">
        </div>
    </div>
</div>
        

Styling: Image thumbnails have rounded corners (1px border-radius) and a light border. They're perfect for profile pictures, product images, and photo galleries.

3. Image Alignment and Floating

Control image positioning using float utilities and auto margins.

<!-- Float Left -->
<img src="example.jpg" class="float-start" alt="Float left">
<p>Text flows around the image on the right side...</p>

<!-- Float Right -->
<img src="example.jpg" class="float-end" alt="Float right">
<p>Text flows around the image on the left side...</p>

<!-- Clear Floats -->
<div class="clearfix">
    <img src="example.jpg" class="float-start" alt="Floated image">
    <p>Content here...</p>
</div>

<!-- Center Image with Margin Auto -->
<img src="example.jpg" class="d-block mx-auto" alt="Centered image">

<!-- Responsive Float -->
<img src="example.jpg" class="float-md-start" alt="Float on medium+ screens">
<p>Floats left on tablets and desktop, stacks on mobile</p>
        

Remember: Use d-block with mx-auto to center images. The image must be a block element for auto margins to work.

4. Rounded Images

Bootstrap provides utilities for rounding image corners.

<!-- Rounded Corners -->
<img src="example.jpg" class="rounded" alt="Rounded corners">

<!-- Rounded Top Only -->
<img src="example.jpg" class="rounded-top" alt="Rounded top">

<!-- Rounded End (Right in LTR) -->
<img src="example.jpg" class="rounded-end" alt="Rounded end">

<!-- Rounded Bottom Only -->
<img src="example.jpg" class="rounded-bottom" alt="Rounded bottom">

<!-- Rounded Start (Left in LTR) -->
<img src="example.jpg" class="rounded-start" alt="Rounded start">

<!-- Circular Image -->
<img src="profile.jpg" class="rounded-circle" alt="Circular profile">

<!-- Pill Shape -->
<img src="badge.jpg" class="rounded-pill" alt="Pill shaped">

<!-- No Rounding -->
<img src="example.jpg" class="rounded-0" alt="No rounded corners">

<!-- Large Rounded Corners -->
<img src="example.jpg" class="rounded-3" alt="Large rounded corners">
        

Circle Images: Use .rounded-circle on square images to create perfect circles. For rectangular images, use .rounded-pill instead.

5. Figures with Captions

Use the <figure> and <figcaption> elements with Bootstrap classes for images with captions.

<!-- Basic Figure -->
<figure class="figure">
    <img src="photo.jpg" class="figure-img img-fluid rounded" alt="A scenic photo">
    <figcaption class="figure-caption">A caption for the image.</figcaption>
</figure>

<!-- Right-Aligned Caption -->
<figure class="figure">
    <img src="photo.jpg" class="figure-img img-fluid rounded" alt="Photo">
    <figcaption class="figure-caption text-end">
        Photo by John Doe
    </figcaption>
</figure>

<!-- Figure in Grid -->
<div class="row">
    <div class="col-md-6">
        <figure class="figure">
            <img src="image1.jpg" class="figure-img img-fluid rounded" alt="Image 1">
            <figcaption class="figure-caption">
                This is the first image in our gallery.
            </figcaption>
        </figure>
    </div>
    <div class="col-md-6">
        <figure class="figure">
            <img src="image2.jpg" class="figure-img img-fluid rounded" alt="Image 2">
            <figcaption class="figure-caption">
                This is the second image in our gallery.
            </figcaption>
        </figure>
    </div>
</div>

<!-- Styled Figure -->
<figure class="figure border p-3 rounded bg-light">
    <img src="diagram.jpg" class="figure-img img-fluid" alt="Diagram">
    <figcaption class="figure-caption text-center mt-2">
        <strong>Figure 1:</strong> System architecture diagram
    </figcaption>
</figure>
        

Accessibility: Always use <figure> and <figcaption> for images with captions. This creates proper semantic HTML that screen readers can understand.

6. Picture Element for Art Direction

Use the <picture> element with Bootstrap classes for responsive images with different aspect ratios.

<!-- Responsive Picture with Multiple Sources -->
<picture>
    <source media="(min-width: 768px)" srcset="desktop-image.jpg">
    <source media="(min-width: 576px)" srcset="tablet-image.jpg">
    <img src="mobile-image.jpg" class="img-fluid" alt="Responsive image">
</picture>

<!-- WebP with Fallback -->
<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="image.jpg" class="img-fluid" alt="Image with WebP support">
</picture>
        

7. Image Overlays and Effects

Combine images with utility classes to create overlays and effects.

<!-- Image with Text Overlay -->
<div class="position-relative">
    <img src="hero.jpg" class="img-fluid" alt="Hero image">
    <div class="position-absolute top-50 start-50 translate-middle text-white">
        <h2 class="display-4">Welcome</h2>
        <p class="lead">To our amazing website</p>
    </div>
</div>

<!-- Image with Badge -->
<div class="position-relative d-inline-block">
    <img src="product.jpg" class="img-fluid rounded" alt="Product">
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
        Sale
    </span>
</div>

<!-- Image with Gradient Overlay -->
<div class="position-relative overflow-hidden rounded">
    <img src="background.jpg" class="img-fluid" alt="Background">
    <div class="position-absolute bottom-0 start-0 w-100 p-4 text-white"
         style="background: linear-gradient(transparent, rgba(0,0,0,0.8));">
        <h3>Image Title</h3>
        <p class="mb-0">Description of the image</p>
    </div>
</div>

<!-- Hover Effect Image -->
<div class="overflow-hidden rounded">
    <img src="photo.jpg" class="img-fluid transition" alt="Photo"
         style="transition: transform 0.3s;"
         onmouseover="this.style.transform='scale(1.1)'"
         onmouseout="this.style.transform='scale(1)'">
</div>
        

8. Object Fit Utilities

Control how images fill their container with object-fit utilities.

<!-- Object Fit Cover (Default for most cases) -->
<img src="photo.jpg" class="object-fit-cover"
     style="width: 300px; height: 200px;" alt="Cover">

<!-- Object Fit Contain -->
<img src="photo.jpg" class="object-fit-contain"
     style="width: 300px; height: 200px;" alt="Contain">

<!-- Object Fit Fill -->
<img src="photo.jpg" class="object-fit-fill"
     style="width: 300px; height: 200px;" alt="Fill">

<!-- Object Fit Scale Down -->
<img src="photo.jpg" class="object-fit-scale"
     style="width: 300px; height: 200px;" alt="Scale down">

<!-- Object Fit None -->
<img src="photo.jpg" class="object-fit-none"
     style="width: 300px; height: 200px;" alt="None">
        

Use Cases:

object-fit-cover: Card images, hero sections (fills container, may crop)
object-fit-contain: Product images, logos (shows entire image, may letterbox)
object-fit-fill: Rarely used (stretches image to fill)

9. Practical Example: Image Gallery

<div class="container py-5">
    <h2 class="text-center mb-4">Photo Gallery</h2>

    <div class="row g-4">
        <!-- Gallery Item 1 -->
        <div class="col-lg-4 col-md-6">
            <figure class="figure mb-0">
                <div class="position-relative overflow-hidden rounded">
                    <img src="gallery1.jpg" class="figure-img img-fluid mb-0"
                         alt="Nature scene">
                    <div class="position-absolute top-0 end-0 m-2">
                        <span class="badge bg-primary">New</span>
                    </div>
                </div>
                <figcaption class="figure-caption mt-2">
                    Beautiful nature landscape
                </figcaption>
            </figure>
        </div>

        <!-- Gallery Item 2 -->
        <div class="col-lg-4 col-md-6">
            <figure class="figure mb-0">
                <div class="rounded overflow-hidden">
                    <img src="gallery2.jpg" class="figure-img img-fluid mb-0"
                         alt="City view">
                </div>
                <figcaption class="figure-caption mt-2">
                    Urban architecture
                </figcaption>
            </figure>
        </div>

        <!-- Gallery Item 3 -->
        <div class="col-lg-4 col-md-6">
            <figure class="figure mb-0">
                <div class="rounded overflow-hidden">
                    <img src="gallery3.jpg" class="figure-img img-fluid mb-0"
                         alt="Portrait">
                </div>
                <figcaption class="figure-caption mt-2">
                    Portrait photography
                </figcaption>
            </figure>
        </div>
    </div>

    <!-- Featured Image Section -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="card border-0 shadow-lg">
                <div class="position-relative">
                    <img src="featured.jpg" class="card-img-top" alt="Featured">
                    <div class="position-absolute bottom-0 start-0 w-100 p-4 text-white"
                         style="background: linear-gradient(transparent, rgba(0,0,0,0.9));">
                        <h3 class="mb-2">Featured Image</h3>
                        <p class="mb-0">This is our featured photograph of the month</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
        

Practice Exercise

Task: Create a team members section with the following requirements:

Grid layout with 4 team members (3 columns on desktop, 2 on tablet, 1 on mobile)
Circular profile images (use .rounded-circle)
Each member card has an image, name, title, and short bio
Images should be responsive and centered
Use figure elements with captions for at least 2 members
Add a hover effect that scales images slightly

Bonus: Add social media icon badges positioned at the top-right of each profile image.

Summary

.img-fluid makes images responsive and scale with their container
.img-thumbnail adds a rounded border to create thumbnail images
Float utilities (.float-start, .float-end) control image positioning
Use .d-block .mx-auto to center images horizontally
Rounded utilities (.rounded, .rounded-circle, .rounded-pill) style image corners
.figure and .figure-caption create semantic image captions
<picture> element enables responsive images with art direction
Position utilities create image overlays and badges
Object-fit utilities (.object-fit-cover, .object-fit-contain) control image scaling
Always include descriptive alt attributes for accessibility
Combine Bootstrap utilities for advanced image effects and layouts