Bootstrap - Images

Bootstrap provides a set of utilities and classes to make images responsive, styled, and aligned easily. These classes work for Bootstrap 3, 4, and 5, though some syntax differs slightly.

1. Responsive Images

To make an image scale properly with the parent container (resize on different screen sizes):

Bootstrap 3:

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

Bootstrap 4 & 5:

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

Explanation:

.img-responsive (BS3) / .img-fluid (BS4/5) → Makes image width 100% of parent, height auto.
Prevents image overflow in smaller screens.

2. Rounded Images

Bootstrap allows rounding corners:

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

Fully Rounded (Circle) Image:

<img src="image.jpg" class="rounded-circle" alt="Circle Image">

Thumbnail (with border and padding):

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

3. Alignment and Floats

Left Float:

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

Right Float:

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

Center Image:

Inline image: mx-auto d-block

<img src="image.jpg" class="mx-auto d-block" alt="Centered Image">

Explanation:

.float-start → Floats image left
.float-end → Floats image right
.mx-auto → Auto horizontal margin
.d-block → Displays as block (required for centering)

4. Image Shapes

Rounded corners: .rounded
Circle: .rounded-circle
Thumbnail (border + padding): .img-thumbnail

Example:

<img src="image.jpg" class="rounded" alt="Rounded">
<img src="image.jpg" class="rounded-circle" alt="Circle">
<img src="image.jpg" class="img-thumbnail" alt="Thumbnail">

5. Responsive Image in Figures

Bootstrap provides the <figure> element for images with captions:

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

Explanation:

.figure-img → Styles the image
.figure-caption → Caption below the image
.text-end → Aligns caption to the right

6. Image in Buttons or Links

You can combine images with buttons:

<button class="btn btn-primary">
  <img src="icon.png" class="me-2" alt="Icon" " height="20">
  Submit
</button>

Explanation:

.me-2 → Adds right margin (Bootstrap spacing utility)
width & height → Optional size control

7. Background Images

While Bootstrap doesn’t have specific classes for background images, you can use utility classes:

<div class="bg-image" style="background-image: url('image.jpg'); height: 300px; background-size: cover; background-position: center;"></div>

Tips:

background-size: cover; → Fills container
background-position: center; → Centers the image

8. Bootstrap 3 vs Bootstrap 4 & 5 Differences

Feature	Bootstrap 3	Bootstrap 4 & 5
Responsive image	`.img-responsive`	`.img-fluid`
Rounded corners	`.img-rounded`	`.rounded`
Circle image	`.img-circle`	`.rounded-circle`
Thumbnail image	`.img-thumbnail`	Same
Floats	`.pull-left` / `.pull-right`	`.float-start` / `.float-end`
Center image	`center-block`	`mx-auto d-block`

9. Complete Example (Bootstrap 5)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Images</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">

  <h2>Bootstrap Images Example</h2>

  <!-- Responsive Image -->
  <img src="https://via.placeholder.com/300" class="img-fluid mb-3" alt="Responsive Image">

  <!-- Rounded and Circle -->
  <img src="https://via.placeholder.com/150" class="rounded mb-3" alt="Rounded">
  <img src="https://via.placeholder.com/150" class="rounded-circle mb-3" alt="Circle">

  <!-- Thumbnail -->
  <img src="https://via.placeholder.com/150" class="img-thumbnail mb-3" alt="Thumbnail">

  <!-- Alignment -->
  <img src="https://via.placeholder.com/150" class="float-start me-3 mb-3" alt="Float Start">
  <img src="https://via.placeholder.com/150" class="float-end ms-3 mb-3" alt="Float End">
  <img src="https://via.placeholder.com/150" class="mx-auto d-block mb-3" alt="Centered">

  <!-- Figure -->
  <figure class="figure">
    <img src="https://via.placeholder.com/300" class="figure-img img-fluid rounded" alt="A figure">
    <figcaption class="figure-caption text-end">A caption for the figure.</figcaption>
  </figure>

</body>
</html>