Bootstrap 5 Images
Image Shapes
Rounded Corners:

Circle:

Thumbnail:

Rounded Corners
The .rounded
class adds rounded corners to an image:
Circle
The .rounded-circle
class shapes the image to a circle:
Thumbnail
The .img-thumbnail
class shapes the image to a thumbnail
(bordered):
Aligning Images
Float an image to the left with the .float-start
class or to the right with .float-end
:


Example
<img src="paris.jpg" class="float-start">
<img src="paris.jpg"
class="float-end">
Try it Yourself »
Centered Image
Center an image by adding the utility classes .mx-auto
(margin:auto) and .d-block
(display:block) to the image:

Responsive Images
Images come in all sizes. So do screens. Responsive images automatically adjust to fit the size of the screen.
Create responsive images by adding an .img-fluid
class
to the <img>
tag. The image will then scale nicely to the parent element.
The .img-fluid
class applies max-width: 100%;
and
height: auto;
to the image:
Did You Know?
W3.CSS is an excellent alternative to Bootstrap 5.
W3.CSS is smaller, faster, and easier to use.
If you want to learn W3.CSS, go to our W3.CSS Tutorial.