Bootstrap Images
Just like HTML tables, raw HTML images can destroy a mobile website layout because they ignore screen sizing. Bootstrap 5 solves this instantly with the beautifully simple .img-fluid class.
1. Responsive Images
By default, if you place a 1000px wide image on a 400px wide smartphone screen, the image will overflow and break your design. By adding the .img-fluid class, Bootstrap automatically applies max-width: 100%; and height: auto; so the image scales down beautifully to fit its parent container.
<!-- Apply .img-fluid to make sure the image shrinks on mobile phones -->
<img src="architecture.jpg" class="img-fluid" alt="Architecture">2. Image Thumbnails
To give an image the classic "photograph" look, add the .img-thumbnail class. This applies a tiny 1px rounded border around the image with a slim line of padding, making it stand out off a flat background.
<!-- Typical profile picture styling -->
<img src="profile.jpg" class="img-thumbnail" alt="User Profile">3. Aligning Images
Aligning images in Bootstrap 5 depends entirely on whether they are behaving as inline elements or block elements.
Floating (Left / Right)
To align an image alongside text, use the .float-start (left) or .float-end (right) utility classes.
<img src="..." class="float-start" alt="Aligned Left">
<img src="..." class="float-end" alt="Aligned Right">Centering Images
Since images are naturally inline elements, you can wrap them in a text-center div. However, the most robust way to center a single image is by converting it to a block element (.d-block) and applying auto margins (.mx-auto).
<!-- Perfect Horizontal Centering -->
<img src="..." class="mx-auto d-block" alt="Centered Image">4. Rounded Corners and Circles
You can dramatically soften the design of an image using Bootstrap's built-in border radius utilities.
.rounded: Adds a subtle, modern curvature to the image corners..rounded-circle: Forces the image into a perfect circle (Requires an image that is perfectly square).
<!-- Slightly rounded corners -->
<img src="..." class="rounded" alt="Rounded Image">
<!-- Perfect circular profile picture -->
<img src="..." class="rounded-circle" alt="Circular Profile">