Bootstrap 3 Images

Bootstrap's global default font-size is 14px, with a line-height of 1.428.
This is applied to the <body> element and all paragraphs (<p>).
In addition, all <p> elements have a bottom margin that equals half their computed line-height (10px by default).

Responsive images

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

To center images which use the .img-responsive class, use .center-block instead of .text-center. See the helper classes section for more details about .center-block usage.

<img src="..." class="img-responsive" alt="Responsive image">

Image shapes

Add classes to an <img> element to easily style images in any project.

Example

Rounded Corners

The .img-rounded class adds rounded corners to an image (IE8 does not support rounded corners):

Example


        <img src="..." alt="..." class="img-rounded">

Try Your Self

Circle

The .img-circle class shapes the image to a circle (IE8 does not support rounded corners):

Example


        <img src="..." alt="..." class="img-circle">

Try Your Self

Thumbnail

The .img-thumbnail class shapes the image to a thumbnail:

Example


        <img src="..." alt="..." class="img-thumbnail">

Try Your Self

Previous Next