Working with Images

Class                                           Description 
img-rounded                       Adds rounded corners to an image (not available in IE8)
img-circle                        Shapes the image to a circle (not available in IE8)
img-thumbnail                Shapes the image to a thumbnail & adds a bit of padding and a gray border
img-responsive             Makes an image responsive (will scale nicely to the parent element)
push-left                        To align image towards left of text
push-right                      To align image to right side of text .


Example: 

<div class="row" style="background-color:black">
    <img src="/images/gradient_radial.jpg" class="col-sm-offset-3 col-sm-2 img-rounded">
    <img src="/images/gradient_radial.jpg" class="col-sm-2 img-circle ">
    <img src="/images/gradient_radial.jpg" class="col-sm-2 img-thumbnail">
</div>

Note that the images restore their original size if the width of browser is reduced (smaller resolution devices).

•  To align image to right / left of paragraph use "pull-right" / "pull left" 
• To resize Image with change of resolution use "img-responsive" 

<img src="/images/Background.jpg" class="col-sm-4 pull-right img-responsive"> 

This is text around image This is text around image This is text around image This is text around image This is text around image This is text around image This is text around image This is text around image This is text around image This is text around image