Bootstrap has the following image shapes and Corners:-

• Rounded Corners
• circle
• Thumbnail
• Aligning Images
• RESPONSIVE Images
• Centered Image

Rounded Corners:-

  The class .rounded add round corners to the image .

syntax:-

   <img alt="Statue of unity" class="rounded" src="Statueofunity.jpg">

Circle :-

 The class .rounded-circle turns the shape of the image to a circle.

Syntax:-

  <img alt="Statue of unity" class="rounded-circle" src="Statueofunity.jpg">

Thumbnail:-

  The class .img-thumbnail turns the shape of the image to a thumbnail, i.e. bordered image.

Syntax:-

  <img alt="Statue of unity" class="img-thumbnail" src="Statueofunity.jpg">

Aligning Images:-

An image is aligned to the left with the class .float-left and an image is aligned to the right with the class .float-right

Syntax:-

  <img class="float-left" src="Statueofunity .jpg">

  <img class="float-right" src="Statueofunity .jpg">

Centered Image:-

 The classes .mx-AUTO (margin:auto) &AMP; .d-block (display:block) ALIGN the image at the center.

Syntax:-

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

Responsive Images:-

The responsive images ADJUST themselves dynamically according to the size of the screen. The class .img-fluid is added to the <img> tag to create a responsive images. The class .img-fluid gives max-width: 100%; & height: auto; to the image that has to be responsive.

Syntax:-

<img alt="Pune" class="img-fluid" src="img_Pune.jpg">