Bootstrap Images & Figures — Responsive Media Utilities

In this tutorial, you will learn about Bootstrap Images & Figures. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap provides responsive images with the img-fluid class, image thumbnails, alignment helpers, and figure styling for captioned media.

What You'll Learn

You will learn how to make images responsive, add thumbnail borders, align images with text, create figures with captions, and use image replacement.

Why It Matters

Images must scale across devices. DodaTech's product screenshots use img-fluid to resize properly on mobile, and figure elements to caption feature demonstrations.

Real-World Use

Doda Browser's feature pages use img-fluid rounded shadow for product screenshots and <figure> with .figure-caption for annotated screenshots.

flowchart LR
    A[Flex Utilities] --> B[Images & Figures]
    B --> C[Responsive Images]
    B --> D[Thumbnails]
    B --> E[Alignment]
    B --> F[Figures]
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Responsive Images

The .img-fluid class makes images scale with their parent:

<img src="https://via.placeholder.com/1200x400" class="img-fluid" alt="Responsive image">

Expected output: The image scales down on smaller screens and never exceeds its container width.

.img-fluid applies max-width: 100% and height: auto, ensuring the image shrinks proportionally on small screens.

Image Thumbnails

Add a subtle border and padding:

<img src="https://via.placeholder.com/200" class="img-thumbnail" alt="Thumbnail image">

Expected output: The image appears with a 1px border, 4px padding, and 4px border-radius.

Image Alignment

Align images using float or flex utilities:

<div class="bg-light p-4 clearfix">
  <img src="https://via.placeholder.com/150" class="float-start me-3" alt="Left aligned">
  <p>Text wraps around the left-aligned image. The float-start class floats the image left,
    and me-3 adds margin to prevent text from touching the image edge.</p>
</div>

<div class="bg-light p-4 clearfix mt-3">
  <img src="https://via.placeholder.com/150" class="float-end ms-3" alt="Right aligned">
  <p>Text wraps around the right-aligned image. The float-end class floats the image right,
    and ms-3 adds margin on the start side.</p>
</div>

Expected output: Two sections with images floated left and right, text wrapping around them.

Center an image with d-block and mx-auto:

<img src="https://via.placeholder.com/200" class="d-block mx-auto" alt="Centered image">

Expected output: The image is horizontally centered within its container.

Figures

The figure element creates a captioned image:

<figure class="figure">
  <img src="https://via.placeholder.com/400x300" class="figure-img img-fluid rounded" alt="Figure example">
  <figcaption class="figure-caption">A caption describing the image above.</figcaption>
</figure>

Expected output: An image with rounded corners and a muted caption beneath it.

Align figure caption to the right:

<figure class="figure">
  <img src="https://via.placeholder.com/400x200" class="figure-img img-fluid rounded" alt="Figure">
  <figcaption class="figure-caption text-end">Right-aligned caption text.</figcaption>
</figure>

Expected output: A figure with the caption right-aligned.

Picture Element

Bootstrap works with the HTML5 <picture> element for art direction:

<picture>
  <source srcset="https://via.placeholder.com/800x400" media="(min-width: 768px)">
  <img src="https://via.placeholder.com/400x400" class="img-fluid" alt="Responsive image with art direction">
</picture>

Expected output: On screens 768px and above, the wider 800x400 image loads. On smaller screens, the square 400x400 image loads.

SVG Images

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect fill='%237952b3' width='100' height='100'/%3E%3Ctext x='50' y='55' text-anchor='middle' fill='white' font-size='14'%3ESVG%3C/text%3E%3C/svg%3E"
     class="img-fluid" alt="SVG placeholder image">

Expected output: A purple SVG image displayed as a responsive image.

Common Mistakes

1. Forgetting img-fluid on Large Images

Without img-fluid, images use their native width. A 2000px-wide image will overflow its container on an 800px screen.

2. Not Using clearfix with Floated Images

Floated images can escape their container. Add clearfix class to the parent to contain floats.

3. Missing Alt Text for Accessibility

Every image needs descriptive alt text for screen readers and SEO. Bootstrap cannot add this automatically.

4. Placing Images Outside Figures Without Captions

Use <figure> and figure-caption instead of manually positioning text below images for semantic HTML.

5. Loading Oversized Images

img-fluid scales images down visually but does not reduce file size. Load images at the display size to avoid wasted bandwidth.

Practice Questions

1. What class makes an image responsive? img-fluid applies max-width: 100% and height: auto.

2. How do you add a thumbnail border to an image? Add the img-thumbnail class for a 1px border with padding and rounded corners.

3. How do you center an image horizontally? Use d-block mx-auto on the image to center it.

4. What is the figure element used for? The <figure> element semantically groups an image with its caption.

5. How do you float an image to the right? Use float-end on the image, and ms-3 for left margin.

Challenge

Create an article page with a featured image (responsive, centered), a left-floated image with wrapping text in the body, and a figure with a caption at the end.

FAQ

Mini Project

Build a product showcase page with a hero image using img-fluid, a row of 3 product thumbnails with img-thumbnail, and each product in a figure element with a caption describing the product.

What's Next

Learn Bootstrap Tables for data presentation. Then explore Forms and Inputs for user input handling.