Bootstrap Images
Rounded Corners:
Circle:
Thumbnail:
<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
html
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">