Bootstrap 5 Imaja

Course Recommendation:

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">

Circular .rounded-circle

Example

Class to shape the image as circular:

Try It Yourself

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

Thumbnail .img-thumbnail

Example

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

Try It Yourself

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

Align Image .float-start Class to float the image to the left, or use .float-end Float 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 adjust automatically 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