In this tutorial img element with different attributes in
bootstrap will be explained.
There are following bootstrap class for img tag.
1) Rounded Corners
2) Circle
3) Thumbnail
4) Responsive Images
Rounded corners images
In this example img-rounded class is used to make the corners of an
image round. This is like border radius property in css.
<imgclass="img-rounded"src="img/bg-img/gallery1.jpg"alt="rounded-img"width="200px"height="200px">
Output of above code
Rounded corner image
Circle images
In this example rounded-circle class is used to make the image
in circle shaped image. img-circle class was removed in Bootstrap 4.
<imgclass="rounded-circle"src="img/bg-img/gallery1.jpg"alt="circle-img"width="200px"height="200px">
Output of above code
Circle shaped image
Thumbnail images
In this example img-thumbnail class is used to make the image
in thumbnail shaped image.
<imgclass="img-thumbnail"src="img/bg-img/gallery1.jpg"alt="thumbnail-img"width="200px"height="200px">
Output of above code
Thumbnail image
Responsive images
In this example img-responsive class is used to make the image
responsive for different size of screen. Resize the browser window to check it's
effect. For example check it's responsiveness on mobile screen(767px)
<imgclass="img-responsive"src="img/bg-img/gallery1.jpg"alt="thumbnail-img"width="400px"height="300px">
Output of above code
Responsive image
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
