Aligning Boostrap 'Thumbnail Grid System'

Question

I am trying to align all the images equally, I have attached a screen recording of what it currently looks like. I am not sure why it's doing this, they are all the same size since I am using Boostraps column design ( class="col-sm-4 col-md-3" )...

Here you can view the screen recording

EDIT:

Here is my current code:

{% extends 'navbar.html' %}

{% block container %}
<div class="row">
  {% for product in my_list %}
  <div class="col-sm-4">
    <div class="thumbnail">
      <img src="{{ product[4] }}" alt="{{ product[1] }}">
      <div class="caption">
        <h3>{{ product[1] }}</h3>
        <p>This is a test, this will have the price and category of the product</p>
        <p><a href="#" class="btn btn-primary" role="button">View Product</a></p>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endblock %}

Answer 1

This is because some images are larger than others making each div different heights which makes the next image div go to the next line. You have two options:

1. Use a counter to add a before each first div of that row and a closing div after the fourth.

2. Use a matchHeight.js to make each div of that row the same height.