Tutorial on Bootstrap 3 Responsive Image

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

Bootstrap 3 responsive image

Bootstrap 3 responsive image

Structure of the bootstrap 3 image 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 avaiable in ie 8

Example:

Try It Yourself

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

Circle Image:

to make a image sape circle you need to use the class name: .img-circle

* it is not avaiable in ie 8

* best to use a same height and width image

Example:

Try It Yourself

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

Thumbnail image:

To make a image sape as 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 a image not overflow of its content tag that is give the image style as max-width: 100% and height: auto use 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 usefull.

Share The Post On -

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.