Bootstrap Images
In this chapter, we will learn about the support Bootstrap provides for images. Bootstrap offers three classes that can be applied to images for simple styling:
- .img-rounded: Adds border-radius: 6px to give the image rounded corners.
- .img-circle: Adds border-radius: 50% to make the entire image circular.
- .img-thumbnail: Adds some padding and a grey border.
See the example below for a demonstration:
Example
<img decoding="async" src="/wp-content/uploads/2014/06/download.png" class="img-rounded">
<img decoding="async" src="/wp-content/uploads/2014/06/download.png" class="img-circle">
<img decoding="async" src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail">
The result is as follows:
<img> Classes
The following classes can be used on any image.
| Class | Description | Example |
|---|---|---|
| .img-rounded | Adds rounded corners to the image (not supported in IE8) | Try it |
| .img-circle | Makes the image circular (not supported in IE8) | Try it |
| .img-thumbnail | Thumbnail functionality | Try it |
| .img-responsive | Makes the image responsive (scales well to the parent element) | Try it |
Responsive Images
To make an image responsive, add the .img-responsive class to the <img> tag. The image will scale well to the parent element.
The .img-responsive class applies the styles max-width: 100% and height: auto to the image:
Example
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">