Images not responsive by default in Twitter Bootstrap 3?

javascript, responsive-design, twitter-bootstrap, twitter-bootstrap-3

Solution

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.

Problem

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 names to make the image responsive with all breakpoints. In version 2 the images CSS properties inherited by default the parent's div properties. Is this correct?

Original source

Related problems