Tutorial on Bootstrap 3 Responsive Image

Image and its placement is a very important part of an HTML website design and so bootstrap have given some structure and also while we place an image the width adjustment creating the problem and in Bootstrap 3 Image, bootstrap also defined class for the width of an image.

Bootstrap 3 responsive image

Structure of the bootstrap 3 images the Rounded, Circle, Thumbnail Image and its class name:

Rounded Image:

to make a rounded that is the corner portion of the image will be rounded use the class name: .img-rounded

* it is not available in ie 8

Example:

Try It Yourself

<img src="image.src" class="img-rounded" alt="Rounded Image" /> 

Circle Image:

to make an image shape circle you need to use the class name: .img-circle

* it is not available in ie 8

* Best to use the same height and width image

Example:

Try It Yourself

<img src="image.src" class="img-circle" alt="Circle Image" /> 

Thumbnail image:

To make an image shape as a thumbnail which is mainly used in image gallery page use the class name: .img-thumbnail

Example:

Try It Yourself

<img src="image.src" class="img-thumbnail" alt="Thumbnail Image" /> 

Bootstrap responsive image

Make max 100% width image:

to make an image not an overflow of its content tag that gives the image style as max-width: 100% and height: auto uses the class name: .img-responsive

Example:

Try It Yourself

<div class="col-md-12">
	<img src="image.src" class="img-responsive" alt="Responsive Image" />
</div>

Thanks for reading and please provide your valuable comment thus the site can be better useful.