Bootstrap Image

Responsive Images in Bootstrap

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 in Bootstrap

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

• .img-rounded
• .img-circle
• .img-thumbnail

Let’s find the use of these classes with the example given below:-

Rounded Image in Bootstrap

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 in Bootstrap

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

Thumbnail Images in Bootstrap

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