Bootstrap CSS Images Reference

Bootstrap Images

Rounded Corners:

Cinque Terre

Circle:

Cinque Terre

Thumbnail:

Cinque Terre


<img> Classes

The classes below can be used to style any image:

Class Description Example
.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
.img-responsive Makes an image responsive (will scale nicely to the parent element)

Responsive Images

Create responsive images by adding an .img-responsive class to the <img> tag. The image will then scale nicely to the parent element.

The .img-responsive class applies max-width: 100%, height: auto, and display:block to the image:

Example

<img src=”cinqueterre.jpg” class=”img-responsive” alt=”Cinque Terre”>

Leave a Reply

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