Portfolio Project- having a tough time with the thumbnails

Code Feedback
1

I’m missing something and can’t quite figure out what’s wrong I have only managed to make it wrong in different ways. My images aren’t a consistent size and they don’t load into the columns that I expect. I intended to have 3 columns in the Coding section. Is there something I should put into CSS to standardize it for all thumbnails? Thanks for helping!

Portfolio project - https://codepen.io/neuroduck/full/KvJpNz/

<div id="coding">
  <a id="coding" class="smooth"></a>
  <h3>Coding</h3>
<div class = "container-responsive">
  <div class = "row">
  <!--1st-->
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
      <img src = "#""></script>
</a>
  <div class = "caption">
<h6>A tribute page for my Grandma.</h6>
     </div></div>
   <!--2nd-->
 <div class = "col-sm-6 col-md-3">
   <a href = "#" class = "thumbnail">
    <img src = "#" alt = "Caterpillar" height ="300px">
      </a>
   <h6>2 day old caterpillar, waiting for the next coding project.</h6></div>
   </div>
   <!--3rd-->
<div class = "col-sm-6 col-md-3">
   <a href = "#" class = "thumbnail">
  <img src = "#" alt = "Cocoons" width = "300px">
      </a>
  <div class = "caption">
    <h6>2 cocoons hanging out.</h6></div>
   </div>
   <!--4th-->
<div class = "col-sm-6 col-md-3">
  <a href = "#" class = "thumbnail">
   <img src = "#" alt = "Eclose" height = "150px">
      </a>
  <div class = "caption">
    <h6>A new butterfly.</h6></div>
   </div>
</div>
</div>
3

You could give your images a fixed height and a width of 100%.
Something like:

a.thumbnail img{
width: 100%;
height: 120px; (your desired height)
}

4

Thank you both. I didn’t understand that each row needed to be stopped and the next row started over with :

<div class="row">
<div class = "col-sm-4">

I knew I didn’t quite understand the grid system, but I didn’t know why. Lightbulb moment.