Create Responsive Images Using Bootstrap Image Classes
If you want to make an image responsive, you have to just add the
.img-responsive class to the <img> tag. The class makes the image to scale according to the container size.
The Bootstrap image responsive class makes the image max-width to 100% and height to auto, which makes it fit in the screen size and responsive.
<img src="../../images/nature.jpg" class="img-responsive" alt="Responsive Bootstrap Image"/>
Shaping Images Using Bootstrap Image Classes
In addition to making the images responsive, you can also create different shapes of the images like rounded, circular and thumbnail using the Bootstrap images classes.
See each shape classes of Bootstrap image given below.
A rounded image create a responsive image with rounded corner using the Boostrap class
The class adds an additional CSS border-radius property with 6px as its value.
<img src="../../images/nature.jpg" class="img-rounded" alt="Responsive Rounded Bootstrap Image"/>
If you want to create a circular image you have to write CSS individually and it needs extra efforts from you. However, bootstrap comes with a class
.img-circle, which automatically create a circular image on the addition of the class.
See the example below and check the circular image made from this class.
<img src="../../images/nature.jpg" class="img-circle" alt="Responsive Circle Image"/>
Image Gallery with Thumbnail Images Using Bootstrap Image Class
Thumbnail images are the required items of any image gallery. To create an image gallery, you have to add image and write extra CSS to each image.
Bootstrap solve this difficulty by providing the class
.img-thumbnail. This class creates an image looks like a thumbnail image of the image gallery.
See the thumbnail made from the class and create an image gallery of your own.
<img src="../../images/nature.jpg" class="img-thumbnail" alt="Responsive Thumbnail Image"/>