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.

Test it Live


Responsive Bootstrap  Image

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.

Test it Live


Responsive Rounded Bootstrap Image

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.

Test it Live


Responsive Circle Image

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.

Test it Live


Responsive Thumbnail Image

Getbootstrap 4 Images
Getbootstrap 3 Images

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Get FREE Access to Toolkit and Resources that we are using in Tutorialdeep that Every Professional Should Have! in one handy PDF.

Download Link Will be Send to Your Email id