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 .


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

Circle :-

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


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


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


  <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


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

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

Centered Image:-

 The classes .mx-auto (margin:auto) & .d-block (display:block) align the image at the center.


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


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

BY Best Interview Question ON 31 Mar 2019