Bootstrap4 Image Shapes

Rounded Image

.roundedThe class can make images display rounded corner effects:

Example

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

Try it Yourself »

Ellipse Image

.rounded-circleThe class can set elliptical 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-rightclass to set images right-aligned, use.float-leftclass to set images left-aligned:

Example

<img src="paris.jpg" class="float-left"> <img src="cinqueterre.jpg" class="float-right">

Try it Yourself »

Centered Image

Use.mx-auto (margin:auto)and .d-block (display:block)class to set image centered alignment:

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 to the size of the screen.

We can do this by adding<img>tag, add.img-fluidclass 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