Bootstrap Images
In this chapter, we will learn about Bootstrap's support for images. Bootstrap provides three classes that can apply simple styles to images:
- .img-rounded: Addborder-radius:6pxto get rounded corners for images.
- .img-circle: Addborder-radius:50%to make the entire image circular.
- .img-thumbnail: Add some padding and a gray border.
See the following example demonstration:
Example
<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png" class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail">
Try it »
The result is shown below:
<img> Classes
The following classes can be used on any image.
| Class | Description | Example |
|---|---|---|
| .img-rounded | Add rounded corners to images (not supported in IE8) | Try it |
| .img-circle | Make images circular (not supported in IE8) | Try it |
| .img-thumbnail | Thumbnail functionality | Try it |
| .img-responsive | Responsive images (scales well to the parent element) | Try it |
Responsive Images
By adding the .img-responsive class to the <img> tag, you can make images support responsive design. The image will scale well to the parent element.
The .img-responsive class applies the styles max-width: 100%; and height: auto; to images:
Other Extensions