Bootstrap Image

Create Responsive Images Using Bootstrap Image Classes

If you want to make an image responsive, you have to just add the .img-responsive class to the <img> tag. The class makes the image to scale according to the container size.

The Bootstrap image responsive class makes the image max-width to 100% and height to auto, which makes it fit in the screen size and responsive.

Output

Shaping Images Using Bootstrap Image Classes

In addition to making the images responsive, you can also create different shapes of the images like rounded, circular and thumbnail using the Bootstrap images classes.

See each shape classes of the Bootstrap image given below.

Rounded Image

A rounded image create a responsive image with rounded corner using the Boostrap class .img-rounded.

The class adds an additional CSS border-radius property with 6px as its value.

Output

Circle Image

If you want to create a circular image you have to write CSS individually and it needs extra efforts from you. However, bootstrap comes with a class .img-circle, which automatically create a circular image on the addition of the class.

See the example below and check the circular image made from this class.

Output

Image Gallery with Thumbnail Images Using Bootstrap Image Class

Thumbnail images are the required items of any image gallery. To create an image gallery, you have to add image and write extra CSS to each image.

Bootstrap solve this difficulty by providing the class .img-thumbnail. This class creates an image looks like a thumbnail image of the image gallery.

See the thumbnail made from the class and create an image gallery of your own.

Output

Reference
Getbootstrap 4 Images
Getbootstrap 3 Images