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">
    

Circle

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

Example

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

Thumbnail

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

Example

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

Copyright 2016 by WebiBeris.com. All Rights Reserved.