align bottom images different size on bootsrap4 or css - css

Question

I use css align-xxxx:bottom not working, i want images different height align bottom all
.width-book{
width: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-4 text-center">
<a href="">
<figcaption class="figure-caption color-primary">A caption for image</figcaption>
<img class="a width-book" src="http://shakespeareandcompany.com/files/isbn/9780007448036.jpg" data-holder-rendered="true">
</a>
</div>
<div class="col-xs-4 text-center">
<a href="">
<figcaption class="figure-caption color-primary">A caption for image</figcaption>
<img class="a width-book" src="http://prodimage.images-bn.com/pimages/9780553805444_p0_v5_s1200x630.jpg" data-holder-rendered="true">
</a>
</div>
<div class="col-xs-4 text-center">
<a href="">
<figcaption class="figure-caption color-primary">A caption for image</figcaption>
<img class="a width-book" src="http://shakespeareandcompany.com/files/isbn/9780007448036.jpg" data-holder-rendered="true">
</a>
</div>
</div>
</div>
I want to result
image

Answer 1

Use flex css:
.wrapper {
position: relative;
height: 500px;
width: 1000px;
display: flex;
align-items: flex-end;
}
Example there: https://codepen.io/Czeran/pen/yPeGwO

Answer 2

Give your own class in col-xs-4 and give this css
.book{
align-self:end;
}
.width-book{
width: 100px;
}
.book{
align-self:end;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-4 text-center book">
<a href="">
<figcaption class="figure-caption color-primary">A caption for image</figcaption>
<img class="a width-book" src="http://shakespeareandcompany.com/files/isbn/9780007448036.jpg" data-holder-rendered="true">
</a>
</div>
<div class="col-xs-4 text-center book">
<a href="">
<figcaption class="figure-caption color-primary">A caption for image</figcaption>
<img class="a width-book" src="http://prodimage.images-bn.com/pimages/9780553805444_p0_v5_s1200x630.jpg" data-holder-rendered="true">
</a>
</div>
<div class="col-xs-4 text-center book">
<a href="">
<figcaption class="figure-caption color-primary">A caption for image</figcaption>
<img class="a width-book" src="http://shakespeareandcompany.com/files/isbn/9780007448036.jpg" data-holder-rendered="true">
</a>
</div>
</div>
</div>

Answer 3

The problem is that your content is wrapped in an "a" element. This is the one you actually need to style.
One simple way is to add the class "book" to each "a" element and this to your css:
a.book {
display: flex;
justify-content: space-between;
flex-direction: column;
height: 100%;
align-items: center;
}
That will give you exactly the result you're looking for.