Bootstrap grid not aligned properly when dynamically creating div - asp.net

Question

I am trying to retrieve product information such as name,imagepath etc from database using repeater and display in the dataview using code behind. I could successfully retrieve and display the detail but the alignment of the div is not proper.
aspx code:
<div class="row">
<asp:Repeater ID="Repeater2" runat="server"></asp:Repeater>
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img width="250px" height="300px" src="images/<%#Eval("ImagePath") %>" alt="<%#Eval("ProductName") %>">
<div class="caption">
<h4><%#Eval("ProductName") %></h4>
<h4><%#Eval("UnitPrice")%></h4>
</div>
<div class="clearfix">
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
code behind:
SqlDataAdapter sda = new SqlDataAdapter("SELECT ProductName, UnitPrice, ImagePath FROM Products", con);
DataTable dt = new DataTable();
sda.Fill(dt);
DataView dv = new DataView(dt);
dv.Sort = "ProductName"; // Sort by product name
Repeater1.DataSource = dv;
Repeater1.DataBind();
current output:
screenshot
Expected output:
The fourth image should come below the first image according to bootstrap gridview concept which is not happening in my case and because of which the entire layout changes.
I am a beginner and have just started to learn bootstrap.

Answer 1

There are two ways to resolve this issue:
1) End the row after 3 columns and start 2nd row for next 3 columns.
2) Add equal height for columns. You can use following script and add 'resize-height' class to each column.
function setHeight(column) {
var maxHeight = 0;
//Get all the element with class = col
column = jQuery(column);
column.css('height', 'auto');
//Loop all the column
column.each(function () {
//Store the highest value
if (jQuery(this).height() > maxHeight) {
maxHeight = jQuery(this).height();
}
});
//Set the height
column.height(maxHeight);
}
jQuery(window).on('load resize', function () {
setHeight('.resize-height');
});