Bootstrap 3 Images

Create responsive images and image shapes with Bootstrap's image styles.

Bootstrap provides classes that can be used when working with the <img> element. Specifically, there are classes for responsive images, and classes for image shapes.

Responsive Images

Bootstrap provides the .img-responsive class to make an image scale appropriately across devices. This class adds max-width: 100%, height: auto, and display: block to the image. This ensures that the image scales to the parent element.

Resize your browser to see the image scale as the viewport becomes smaller.

To see the image scale upwards, open the preview in a new window

Centering Responsive Images

You can center responsive images by using Bootstrap's .center-block class (not center-text).

Image Shapes

You can use Bootstrap to render images as thumbnails, with rounded corners, and as a circle.