Bootstrap5 Image Shapes

Bootstrap 5 provides many classes to help you quickly adjust and optimize the appearance of images, especially controlling the shape, size, and responsive layout of images.

Rounded Image

.roundedThe class can make images display rounded corner effects:

Example

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

Try it Yourself »

Oval Image

.rounded-circleThe class can create oval images:

Example

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

Try it Yourself »

Thumbnail

.img-thumbnailThe class is used to set image thumbnails (images have borders):

Example

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

Try it Yourself »

Image Alignment

Use.float-startclass to align images left, use.float-endclass to align images right:

Example

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

Try it Yourself »

Centered Image

Use.mx-auto (margin:auto)and .d-block (display:block)classes to center images:

Example

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

Try it Yourself »

Responsive Image

Images come in various sizes, and we need to automatically adapt based on the screen size.

We can add the<img>class to the.img-fluidtag to set responsive images.

.img-fluidThe class setsmax-width: 100%; 、 height: auto; :

Example

<img class="img-fluid" src="img_chania.jpg" alt="Chania">

Try it Yourself »
Other Extensions