How to properly align the items in the div? - html

Question

Achieved
Want
as seen in the first picture the items are not properly aligned how can it be aligned like on the second picture? Here's the code I tried. Vertical-align attribute also doesn't seem to work, or may be i used it wrong.
.features{
background-color: #0375b4;
padding:40px 100px;
float: left;
width: 100%;
}
.features img{
width: auto;
}
.features-content{
text-align: center;
width: 100%;
display: inline-block;
margin:0 auto;
}
.features-content h1{
font-size: 24px;
color: #ffffff;
text-transform: uppercase;
margin-top: 10px;
}
<div class="features">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="features-content">
<img src="images/compass.png" alt="Compass Logo">
<h1>Adventure</h1>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="features-content">
<img src="images/tube.png" alt="Compass Logo">
<h1>Fun & Safety</h1>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="features-content">
<img src="images/diamond.png" alt="Compass Logo">
<h1>Impeccable Service</h1>
</div>
</div>
</div>
</div>
</div>

Answer 1

The problem is that your uploaded images are not the same height.
A. Make them the same either with CSS either before uploading them
See below example with changing height with css ( i changed the class col-xs-12 to col-xs-4 for example purposes only, so they will be 3 in row in the snippet )
.features {
background-color: #0375b4;
padding: 40px 100px;
float: left;
width: 100%;
}
.features img {
width: auto;
}
.features-content {
text-align: center;
width: 100%;
display: inline-block;
margin: 0 auto;
}
.features-content h1 {
font-size: 24px;
color: #ffffff;
text-transform: uppercase;
margin-top: 10px;
}
.features-content img{
height:150px;
width:auto;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="features">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="features-content">
<img src="http://via.placeholder.com/150x150" alt="Compass Logo">
<h1>Adventure</h1>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="features-content">
<img src="http://via.placeholder.com/150x250" alt="Compass Logo">
<h1>Fun & Safety</h1>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="features-content">
<img src="http://via.placeholder.com/150x200" alt="Compass Logo">
<h1>Impeccable Service</h1>
</div>
</div>
</div>
</div>
</div>
B. Or you can make the cols same height an position the text absolutely at the bottom if you don't want to change the height of the images ( if you want your images to have different heights )
.features {
background-color: #0375b4;
padding: 40px 100px;
float: left;
width: 100%;
}
.features img {
width: auto;
max-width:100%;
}
.features-content {
text-align: center;
width: 100%;
display: inline-block;
margin: 0 auto;
}
.features-content h1 {
font-size: 24px;
color: #ffffff;
text-transform: uppercase;
margin-top: 10px;
}
.features .row {
display: flex;
flex-wrap: wrap;
}
.features .row > div {
position: relative;
padding-bottom: 60px;
border: 1px solid green;
/*for visual example*/
}
.features .row > div h1 {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="features">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="features-content">
<img src="http://via.placeholder.com/150x150" alt="Compass Logo">
<h1>Adventure</h1>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="features-content">
<img src="http://via.placeholder.com/150x250" alt="Compass Logo">
<h1>Fun & Safety</h1>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="features-content">
<img src="http://via.placeholder.com/150x200" alt="Compass Logo">
<h1>Impeccable Service</h1>
</div>
</div>
</div>
</div>
</div>
C. The least 'clean' solution would be to add specific padding-bottom or margin-bottom to the images until the h1 are aligned. ( same with margin-top or padding-top to the h1 )
.features {
background-color: #0375b4;
padding: 40px 100px;
float: left;
width: 100%;
}
.features img {
width: auto;
max-width: 100%
}
.features-content {
text-align: center;
width: 100%;
display: inline-block;
margin: 0 auto;
}
.features-content h1 {
font-size: 24px;
color: #ffffff;
text-transform: uppercase;
margin-top: 10px;
}
.features .col-md-4:first-child img {
padding-bottom: 100px;
}
.features .col-md-4:last-child img {
padding-bottom: 50px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="features">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="features-content">
<img src="http://via.placeholder.com/150x150" alt="Compass Logo">
<h1>Adventure</h1>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="features-content">
<img src="http://via.placeholder.com/150x250" alt="Compass Logo">
<h1>Fun & Safety</h1>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="features-content">
<img src="http://via.placeholder.com/150x200" alt="Compass Logo">
<h1>Impeccable Service</h1>
</div>
</div>
</div>
</div>
</div>