Bootstrap - Images


How can we make images responsive?

Add the img-responsive to the img element:

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

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.

How can we center images that use the .img-responsive class?

Add the center-block class instead of .text-center.

In Internet Explorer 8-10, SVG images with .img-responsive are disproportionately sized. To fix this, add width: 100% \9; where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.

How can we implement image replacement?

Utilize the .text-hide class or mixin to help replace an element's text content with a background image.

<h1 class="text-hide">Custom heading</h1>
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License