Bootstrap Responsive Images

Bootstrap Images

In a responsive design the image is taking its own width and making the design mast so bootstrap is given responsive image class with some image shape.

Responsive Image:

Images in Bootstrap can be made responsive via the addition of the .img-responsive class. It make the image maximum width 100% height auto and display block

Example: <img src=”…” class=”img-responsive” alt=”Responsive image” /&gt

Image shapes

We can make Image shape rounded,circle, and thumbnail using bootstyrap.

Rounded Image:

Rounded Image Looks like the corner portion of the images is rounded. To make a rounded image using bootstrap we have to use the class name .img-rounded

Example: <img src=”…” class=”img-rounded” alt=”Rounded image” /&gt

Circle Image:

To make a rounded image using bootstrap we have to use the class name .img-circle and to get proper circle please select a squired image.

Example: <img src=”…” class=”img-circle” alt=”Circle image” /&gt

Thumbnail Image:

To make a Thumbnail type image using bootstrap we have to use the class name .img-thumbnail .

Example: <img src=”…” class=”img-thumbnail” alt=”Thumbnail image” />

For code and example visit my site