Sure! Here’s a quick overview of Bootstrap 5 Images — how to style and control images easily using Bootstrap’s built-in classes.

?? Bootstrap 5 Images

Bootstrap 5 provides utility classes to make images responsive, styled, and shaped.

1. Responsive Images

Make images scale nicely to the parent container:

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

• .img-fluid applies max-width: 100%; height: auto; to scale the image nicely.

2. Image Shapes

Bootstrap 5 offers classes to change image shapes:

• .rounded — Adds border-radius for rounded corners.

• .rounded-circle — Makes the image circular (works best with square images).

• .rounded-pill — Makes the image rounded like a pill shape.

<img src="avatar.jpg" class="rounded" alt="Rounded corners" /><img src="avatar.jpg" class="rounded-circle" alt="Circle image" /><img src="avatar.jpg" class="rounded-pill" alt="Pill shaped image" />

3. Aligning Images

Use Bootstrap’s flex and float utilities to position images:

• Float left: .float-start

• Float right: .float-end

• Center with utility classes or flexbox

<img src="image.jpg" class="float-start me-3" alt="Float left" /><img src="image.jpg" class="float-end ms-3" alt="Float right" />

4. Image Thumbnails

Add .img-thumbnail for a bordered thumbnail style:

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

5. Responsive Breakpoint Utilities

You can control image visibility at breakpoints using .d-* classes, for example:

<img src="image.jpg" class="img-fluid d-none d-md-block" alt="Only shows on md and up" />

Summary of Useful Classes

If you want, I can show you example code with images inside cards, responsive image galleries, or how to combine images with other BS5 components!