<div class="col-xs-12 col-sm-4 no-margin product-item-holder hover"> <!-- this div will be repeated for each product -->
<div class="product-item">
    <div class="image">
        <img runat="server" id="img" alt="" src="" />
    </div>
    <div class="body">
        <div class="label-discount clear"></div>
        <div class="title">
            <a runat="server" id="name" href="single-product.html"></a>
        </div>
    </div>
    <div class="prices">
        <div class="price-prev"></div>
        <div runat="server" id="price" class="price-current pull-right"></div>
    </div>
    <div class="hover-area">
        <div class="add-cart-button">
            <a href="single-product.html" class="le-button">Enquiry</a>
        </div>

    </div>
</div>

dbConnection cn = new dbConnection();
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        getLoopData();
    }
}

public void getLoopData()
{
    cn.con.Open();
    cn.cmd.Connection = cn.con;
    cn.cmd.CommandText = "select * FROM products";
    MySqlDataReader reader = cn.cmd.ExecuteReader();

    while (reader.Read())
    {
        //int id = reader.GetInt32(0);
        name.InnerText = reader["InventionName"].ToString();
        price.InnerText = reader["Price"].ToString();
        img.Src = reader["Picture"].ToString();

    }
    reader.Close();
    cn.con.Close();
}

<asp:Repeater ID="ProductRepeater" runat="server" EnableViewState="False">
  <ItemTemplate>
     <div class="product-item">
        <div class="image">
    <img id="img" alt="" src='<%# Eval("Picture") %>' />
               ///...
  </ItemTemplate>
 </asp:Repeater>

cn.con.Open();
cn.cmd.Connection = cn.con;
cn.cmd.CommandText = "SELECT InventionName, Price, Picture FROM products";
MySqlDataReader reader = cn.cmd.ExecuteReader();
ProductRepeater.DataSource = reader;
ProductRepeater.DataBind();