align images on same line/row/div in larger screen - html

Question

There are a set of 3 images which align below each other (display:block) for screens less than 768 px. Now for screens of a larger size, the images should be displayed inline-block with text below them(centered), and they should resize themselves responsively on the same horizontal level, as the browser window resizes.
Now, here's what I have tried with the following results:
Trial 1:
HTML:
<div class="row container-fluid rowimg" id="row4">
<div class="conatiner-fluid col-sm-12 images">
<div class="conatiner-fluid col-sm-4 smcar">
<figure class="carimg">
<img src="images/Small Car.jpg" class="media-object pull-left" alt="Small Car">
<figcaption>Car 1</figcaption>
</figure>
</div>
<div class="conatiner-fluid col-sm-4 fmlcar">
<figure class="carimg">
<img src="images/Family Car.jpg" class="media-object pull-left" alt="Family Car">
<figcaption>Car 2</figcaption>
</figure>
</div>
<div class="conatiner-fluid col-sm-4 medcar">
<figure class=" carimg">
<img src="images/Medium Car.jpg" class="media-object pull-left" alt="Medium Car">
<figcaption>Car 3</figcaption>
</figure>
</div>
</div>
CSS:
#media (min-width: 768px) {
#row4{
border: 1px dotted red;
margin:0;
padding:0;
text-align:center;
}
figure {
display: inline-block;
border: 1px dotted gray;
padding:0;
margin:0;
vertical-align: bottom;
}
figure img {
vertical-align: bottom;
display:inline-block;
}
figure figcaption {
border: 1px dotted green;
text-align: center;
display:inline-block;
vertical-align: bottom;
}
}
The result is div's overlapping each other:
Trial 2:
Upon adding 'img-responsive' in the image's class, the images resize well, but the middle image floats up, even with vertical-align: bottom. It doesn't' matter whether I include ""media-object pull-left " or not. I am getting the following result:
Now I have tried various versions of these since the last 24 hours(that's why the separate classes for each image div), read numerous SO posts, added float, cleared floats, used relative and absolute positioning, with bottom:0 (that put my images on same line, but images were not behaving in a responsive manner). Also, I don't get why there are the extra spaces between the container and the content-div's. I did explicitly set margin and padding to 0. The middle image has gone up, and it has gone down, but it refuses to line up. The images have overflown the div, and they have shrunk too much. I have even tried resizing the images to have the same height, (but why should I do that in a responsive design?).
For the life of me, please help me figure this out.

Answer 1

just use structure like this:
<div class="row">
<div class="col-xs-12 col-sm-4">
img, text...
</div>
<div class="col-xs-12 col-sm-4">
img, text...
</div>
<div class="col-xs-12 col-sm-4">
img, text...
</div>
</div>
col-xs-12 used for display element with 100% width on screens <768px. col-sm-4 for 33% width on screens >768px.
Read this for better understanding: Bootstrap grid system
Set the same height property for image containers, overflow: hidden, text-align: center; and set 100% height on img element. So you will get images of the same height and cropped on sides.