Position 3 images at the bottom of the div

Question

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

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.

I don't see the reason to reopen this. The solution is explained in other answers. http://www.codeply.com/go/fw3b4XJ3Pj — Carol Skelly, Apr 14 '17 at 17:19

b2ok · Answer 1 · 2017-04-14T18:59:29.710

0

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

style='margin_top:150px;'

edited Apr 14 '17 at 18:59

answered Apr 14 '17 at 16:47

b2ok

544
6
13

Doesn't work. I have tried that. Thanks though. – Elaine Byene Apr 14 '17 at 16:50

Position 3 images at the bottom of the div

1 Answers1