Positioning trouble on label text - html

Question

So
This is what I am trying to achieve:
This is what I have: http://codepen.io/KieranRigby/pen/QyWZxV. For the snippet bellow, please use "Full page" view.
label {
color: #6d6e70;
bottom: 0;
}
.img-row img {
width: 100%;
}
.img-row {
text-align: center;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container img-row">
<div class="row">
<div class="col-md-2 col-xs-12 col-sm-12 col-md-offset-1">
<img id="img-1" class="img-responsive" src="http://i.imgur.com/ftaEZS9.png" />
<label for="img-1">Make your essay</label>
</div>
<div class="col-md-2">
<img id="img-2" class="img-responsive" src="http://i.imgur.com/7YUtBZk.png" />
<label for="img-2">Upload your essay</label>
</div>
<div class="col-md-2">
<img id="img-3" class="img-responsive" src="http://i.imgur.com/Hy84vQC.png" />
<label for="img-3">Choose your pay</label>
</div>
<div class="col-md-2">
<img id="img-4" class="img-responsive" src="http://i.imgur.com/tSqCUuO.png" />
<label for="img-4">Mentors Check</label>
</div>
<div class="col-md-2">
<img id="img-5" class="img-responsive" src="http://i.imgur.com/VmwzHFD.png" />
<label for="img-5">Receive an email</label>
</div>
</div>
<!-- /.row -->
</div>
How do I get the text labels to sit inline at the bottom?

Answer 1

Codepen
Use absolute positioning on your img and label to align them on the baseline (similar to this SO Answer).
New CSS
.col-md-2 {
height: 250px;
}
.col-md-2 img {
position: absolute;
bottom: 30px;
width: 80%;
}
.col-md-2 label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
This:
Gives your .col-md-2 containers a set height
Moves your label element to the very bottom of its parent .col-md-2
Moves your img element 30px above the bottom of its parent .col-md-2
The img width is set to 80% to give some space between images.