Images

Center Align Image

All Images in HSM are made responsive with .img-responsive class. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

<div class="img-container img-alignCenter">
	<img class="img-responsive" src="../images/juice.jpg" alt="image" >
</div>
        		

Thumbnail Image

Add .img-thumbnail class on img tag to make the image thumbnail size(250 x 250px).

<div class="img-container">
	<img class="img-responsive img-thumbnail" src="../images/juice.jpg" alt="image" >
</div>
        		

Rounded Corner Image

Add .img-border and .img-round class on img tag to have a grey rounded border around the image.

<div class="img-container">
	<img class="img-responsive img-thumbnail img-border img-round" src="../images/juice.jpg" alt="image" >
</div>
        		

Circle Image

Add .img-circle class on img tag to make the image round shaped. If the image is square it will result in circular image and if the image is rectangle size then it will be oval shaped image.

<div class="img-container">
	<img class="img-responsive img-thumbnail img-circle" src="../images/juice.jpg" alt="image" >
</div>
        		

Image With Caption

Wrap div with class .img-container around figure tag to add a padding of 1em/16px to the images. Add img-responsive and img-thumbnail class on img tag to make the image responsive and thumbnail size. Add .img-caption on <figcaption> to have an caption in italic