How to use images in Bootstrap
Hi guys, I am again in front of you with my fresh blog. In this blog I am going to share my personal point of view and experience on how to use images in bootstrap. This is a good topic and it may help you guys a lot in future. So read this blog carefully and try to learn. So let’s start with details.
When you are making a website there you will find most commonly some images. So it’s quite necessary to keep all the images properly in websites for better look and user experience. For the proper placement of images bootstrap provides 4 best images styling classes like
- .img-rounded
- .img-circle
- .img-responsive
- .img-thumbnail
Now I am going to discuss how all these classes work in bootstrap. So let’s start
.img-rounded:
If you want to add rounded corners to an image then you have to add .Img-rounded class. This is normally used in the container class. This is used for simple website pages. IE8 will never support rounded corners.
.img-circle:
In bootstrap if you want to give circular shape to any image then you can use .img-circle class. All the attributes which are used in .img-rounded are easily used in this class also which is very good and helpful.
.img-responsive:
If you want to make an image responsive in bootstrap then you can use this class. This automatically adjusts the image according to the screen size. This class adjusts the image size up to 100% and height automatically.
.img-thumbnail:
If you want to create a thumbnail image in bootstrap then you can use this .img-thumbnail. This class adds a grey border and padding to the image. You can add thumbnail on an image in two ways like single thumbnail image and multiple thumbnails.
Single thumbnail image:
In single thumbnail you can use only one image as a thumbnail image. You can use scr, width, alt, and height as the exact purpose.
You can create image gallery by using multiple thumbnail images. To making an image gallery you have to use multiple thumbnail images.
This is all about how to use images in bootstrap. I explain almost all things related to as per my knowledge hope you guys understand all the things properly. But still you have any questions regarding this topic or any doubt on this topic then you can write down on the comment section. I will try to solve your problems. For more information you can visit www.cpd-india.com. CPD Technologies Block C 9/8, Sector – 7, Rohini, Delhi – 110085, India Landmark: Near Rohini East Metro Station, Opposite Metro Pillar No-397. For free demo class you can call at-011-65164822/91-8860352748. For any suggestion free feels to email at support@cpd-india.com.
