Loading…

List the different image shapes & Corners used in Bootstrap 4?

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) & .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">

Suggest An Answer

No suggestions avaliable!

Latest post from Bootstrap 4 Interview Questions

Ask Question