Bootstrap 5 Images

Course Recommendations:

Image Shape

Rounded Corners .rounded

Example

Class to add rounded corners to the image:

Try It Yourself

<img src="flower.jpg" class="rounded" alt="Flower">

Circle .rounded-circle

Example

Class to shape the image into a circle:

Try It Yourself

<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">

Thumbnail .img-thumbnail

Example

Class to shape the image into a thumbnail (with border):

Try It Yourself

<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre">

Align Images .float-start Class to float the image to the left, or use .float-end Float to the Right:

Example

<img src="tulip.jpg" class="float-start">
<img src="tulip.jpg" class="float-end">

Try It Yourself

Centered Image

To center the image, we added utility classes to the image .mx-auto (margin:auto) and .d-block (display:block):

Example

<img src="tulip.jpg" class="mx-auto d-block">

Try It Yourself

Responsive Images

Images come in various sizes. So does the screen. Responsive images will automatically adjust to fit the screen size.

By adding .img-fluid Class Added to <img> Tag to create responsive images. Then the image will scale well within the parent element.

.img-fluid Class for Image Application max-width: 100%; and height: auto; :

Example

<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">

Try It Yourself