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