Javatpoint Logo
Javatpoint Logo

Responsive Images in Bootstrap with Examples

In this tutorial we will learn how to make images responsive in Bootstrap with examples.

Bootstrap provides various classes for images to improve their appearance and make them responsive. Trying to make an image responsive implies that it needs to scale in accordance with its parent element. That is, the image's size must not be greater than its parent's size, and it needs to expand and reduce in proportion to its parent's size without having lost its aspect ratio.

The image classes offered in Bootstrap are as follows:

1. .img-responsive class: Responsive images in Bootstrap are formed by updating the.img-responsive class to the img tag. The following .img-responsive class is applied to the image: display: block, height: auto and max-width: 100%.

HTML Code:

Output:

Responsive Images in Bootstrap with Examples

2. .img-fluid class: Include the.img-fluid class in the tag. The.img-fluid class is applied to the image, with the following settings: max-width: 100% | height: auto.

HTML Code:

Output:

Responsive Images in Bootstrap with Examples

3. .img-rounded class:img-rounded class adds rounded edges to an image. (IE8 does not support rounded corners.)

HTML Code:

Output:

Responsive Images in Bootstrap with Examples

4. .img-circle class:img-circle class transforms the image's structure into a circle.

HTML Code:

Output:

Responsive Images in Bootstrap with Examples

5. .img-thumbnail class: The .img-thumbnail class is responsible for transforming the image into a thumbnail.

HTML Code:

Output:

Responsive Images in Bootstrap with Examples

Browsers that are supported:

  • Chrome by Google
  • Microsoft Internet Explorer
  • Safari
  • Firefox
  • Opera






Youtube For Videos Join Our Youtube Channel: Join Now

Feedback


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA