.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

<div class="row-pictures">
    <img src="~/Images/test-modern.jpg" class="pull-right img-responsive">
    <img src="~/Images/test-modern.jpg" class="pul-left img-responsive">
</div>

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

Bootply example

This will make pictures to stick both sides.

Option #2 : pictures stick each other

<div class="row row-pictures">
    <img src="~/Images/test-modern.jpg" class="col-xs-6 img-responsive" />
    <img src="~/Images/test-modern.jpg" class="col-xs-6 img-responsive" />
</div>

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

Bootply example

Answer 2

Instead of pull-left and pull-right use col-** classes for that.