Discuss Images in Bootstrap?

Web Development
,
#1

Bootstrap offers different classes for images to make their appearance better and also to make them responsive. Making an image responsive means that it should scale according to its parent element. That is, the size of the image should not overflow its parent and will grow and shrink according to the change in the size of its parent without losing its aspect ratio.

The different classes available in Bootstrap for images are as explained below:

  • img-responsive class: Responsive images in Bootstrap are created by adding .img-responsive class to img tag. An img-responsive class applies: max-width: 100% | height:auto | display:block onto the image.

  • img-thumbnail class: Shaping of the image to a thumbnail is done by the .img-thumbnail class.

  • img-circle class: The shape of the image is made into a circle by img-circle class.

  • img-rounded class: The rounded corners to an image are added by the img-rounded class.

  • img-fluid class: Add img-fluid class to tag. The img-fluid class applies : max-width: 100% | height: auto onto the image.