.img-responsive breaks when used with .pull-right

Question

I\'ve got some images that have .pull-left and .pull-right to align them in a specific pattern. I\'m also using .img-responsive.

T

Answer 1

Your problem is that .img-responsive set max-width: 100%. It works only when you've got a single element per line. Here are two options to change this, choose the one which fit you need.

Option #1 : pictures stick the sides

.row-pictures .img-responsive {
  max-width: 50%
}

Bootply example

This will make pictures to stick both sides.

Option #2 : pictures stick each other

.row-pictures img {
    padding: 0; /* optional: only to remove the gutter */
}

Bootply example