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) Try it
.img-circle Shapes the image to a circle (not available in IE8) Try it
.img-thumbnail Shapes the image to a thumbnail Try it
.img-responsive Makes an image responsive (will scale nicely to the parent element) Try it

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">
Try it Yourself »

Copyright 1999-2023 by Refsnes Data. All Rights Reserved.