Understanding Twitter Bootstrap Image Classes with Examples

Twitter Bootstrap Framework provides so much of ready-made plug-ins and components for comprehensive web design. What does it offer to handle images? Speaking, Bootstrap tends to display images without border by default. It also provides some special image classes that can be used for styling them in your web projects.

Twitter Bootstrap Image Classes List

Bootstrap 3 comes with three styles of image classes for you to style the images.

1. img-rounded - Turns out all four corners of the image to rounded corner edges.
2. img-circle - Turns images into a complete circle or oval shape. To get a circular image use square images (of equal width and height) else you will end up with somewhat oval shaped images.
3. img-thumbnail - Makes thumbnail of the image. Here the image will span to the full width of its container. You can use this class to build thumbnail image gallery.

Style Images with Bootstrap Image Classes

By simply using these image classes with html <img> element, you can easily transform the images into different shapes.

Example

<img src="/path/to/image1.jpg" class="img-rounded">
<img src="/path/to/image1.jpg" class="img-circle">
<img src="/path/to/image1.jpg" class="img-thumbnail">

The above markup will give you something like this,

Twitter Bootstrap Image Shapes Example

Note: The classes img-rounded and img-circle uses the css3 property 'border-radius', hence they won't be working with IE8 or lower versions but who else is using these anymore :).

Make Images Responsive in Bootstrap

Generally images are not responsive in twitter bootstrap by default. By responsive means the ability of the images to scale up or down to span to the full width of the container. Well! Bootstrap let you make the images responsive by choice.

It has a special css class named 'img-responsive' for the purpose. This is the bootstrap's css code for it.

.img-responsive
{
    display: block;
    max-width: 100%;
    height: auto;
}

Simply adding the class 'img-responsive' to <img> tags will make the images to scale nicely to its parent container. It adds css properties of max-width: 100%; and height: auto; to images to make them responsive.

And that was all about using twitter bootstrap image classes :).