Bootstrap - Images

In this tutorial we will learn to style images in Bootstrap.

Images are an important part of any website. They add color and provides us with visual data.

"A picture is worth a thousand words"

The responsive image

To make an image responsive we add the .img-responsive class in img tag.

This applies the following styling properties to the image so that it scales nicely to the parent element.

max-width: 100%;
height: auto;
display: block;

<img class="img-responsive" src="/path/to/image.png">

Example:

Image without the .img-responsive class. You can see that the image has moved too far to the first and thus merged with the sidebar.

Same image with the .img-responsive class. This looks perfect.

Center block

We can use the .center-block class to center images.

<img class="img-responsive center-block" src="/path/to/image.png">

Example:

Image without the .center-block class.

Same image with the .center-block class.

Image shape

We can use the following classes to give shape to the images.

Keep in mind that Internet Explorer 8 lacks support for rounded corners.

<img src="/path/to/image.png" alt="sample-image" class="img-rounded">
<img src="/path/to/image.png" alt="sample-image" class="img-circle">
<img src="/path/to/image.png" alt="sample-image" class="img-thumbnail">