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.