1

I'm using Bootstrap and trying to position these 3 images at the bottom without any success. Could you help?

JSFIDDEL

HTML:

<div class="row">
<div class="col-xs-2">
  <img src="https://s10.postimg.org/730mt4y5l/image.jpg" class="img-responsive first">
</div>
<div class="col-xs-8">
  <img src="https://s10.postimg.org/yp3edthih/image.jpg" class="img-responsive second">
</div>
<div class="col-xs-2">
  <img src="https://s10.postimg.org/z4j9kkstl/image.jpg" class="img-responsive third">
</div>
</div>

CSS: 

.row {
  border-bottom: 1px solid red;
  position: relative;
}
.first {

}
.second {

}
.third {

}

The 3 images are of different dimensions. I would like to position them in such a way that all the images seat on the red border line.

Elaine Byene
  • 3,784
  • 8
  • 45
  • 90
  • I don't see the reason to reopen this. The solution is explained in other answers. http://www.codeply.com/go/fw3b4XJ3Pj – Zim Apr 14 '17 at 17:19
  • The main issue is making columns the same height – Zim Apr 14 '17 at 17:29

1 Answers1

0

For now, I only see to regulate with margin_top or padding_top, and responsive regulate with media switch.

style='margin_top:150px;'
b2ok
  • 550
  • 6
  • 13