Images not responsive by default in Twitter Bootstrap 3?

Question

It looks like with the new version 3.0 I have to set the class names of an image to col-lg-4 col-sm-4 col-4 if the image is part of div with the same class name

Answer 1

Got here after trying to figure out if it's safe to apply img-responsive for all images.

The answer by @its_me led me to think that it isn't safe to apply this for images under a p element.

This does not seems to be what the bootstrap team think.

This is why images are not responsive by default in bootstrap3:

The summary is that it breaks a ton of unsuspecting third-party widgets (including Google Maps), which understandably don't anticipate the images within them being forcibly resized to other widths. This is why we rolled back Bootstrap v2's "images are responsive by default" approach in Bootstrap v3 in favor of an explicit .img-responsive class.

https://github.com/twbs/bootstrap/issues/18178#issuecomment-154180107

Answer 2

Bootstrap 4

For Bootstrap 4 use Sass (SCSS):

// make images responisve by default
img {
  @extend .img-fluid;    
}

answer updated for version 3

Bootstrap 3 has a special class for responsive images (set max-width to 100%). This class is defined as:

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

Note img tag gets by default:

img {
     vertical-align: middle;
     border: 0;
     page-break-inside: avoid;
     max-width: 100% !important;
     }

So use class="img-responsive" to make your images responsive.

To make all images responsive by default:

css: add the code below under the bootstrap css:

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

less: add the code below in your mixins.less:

img {
  &:extend(.img-responsive);
}

Note: requires Less 1.4.0. see: https://stackoverflow.com/a/15573240/1596547

Carousel

img tags inside a carousel are responsive by default

Semantic rules

See also the answer of @its-me (https://stackoverflow.com/a/18653778/1596547). Using the above to make all your images responsive by default turns your images to block level elements. Block level elements are not allowed in paragraphs (<p>), see: https://stackoverflow.com/a/4291515/1596547

As far as i understand the distinction of block-level vs. inline elements is replaced with a more complex set of content categories. See also: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente#Inline_vs._block-level. So in HTML5 a p tag can contain any phrasing element intermixed with normal character data. (see: http://www.w3.org/TR/html-markup/p.html) The img tag is such a phrasing element. The img tag's default value for the display property is indeed inline-block. Changing the display property to block does not violate any of the preceding rules.

Block level elements (display:block) take all the available space of their parent, which seems exactly what you expect for responsive images. So setting display: block; seems a reasonable choice, which has to be preferred above the inline-block declaration.

Images inside p elements which require inline-block as suggest by @its-me (https://stackoverflow.com/a/18653778/1596547) should maybe not be responsive at all.

Answer 3

Excellent suggestion by @BassJobsen, but I'd use display: inline-block; instead of display: block; as that feels more semantic ¹ (which means you can be a bit more sure you are not messing up somewhere else).

So, mine would look like this:

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

Please do let me know if my understanding is flawed. :)

---

[1]: For one, images are almost always wrapped in a block-level element if that's the use case; and then again, we also use images in elements like paragraphs (p), where an inline-block would be more appropriate than a block element.