Bootstrap portfolio-item with asp dalalist - asp.net

Question

i try to use bootstrap portfolio-item in datalist
the code is
<div class="row">
<asp:Panel ID="Pnl_prodL" runat="server" Width="100%">
<asp:DataList ID="dlst_prodNP" runat="server" OnItemDataBound="dlst_prodNP_ItemDataBound" RepeatColumns="2" DataKeyField="id" Width="100%">
<ItemTemplate>
<div class="col-lg-6 portfolio-item" style="background-color: red">
<div class="card h-100">
<a href="#">
<img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
Project Three
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
</div>
</ItemTemplate>
<FooterTemplate></FooterTemplate>
</asp:DataList>
</asp:Panel>
</div>
and I face a problem, what I want is like this example in the link Portfolio 2 Subheading
but the problem with me all record come like this
so could anyone tell me what my mistake here?
Thanks for everyone

Answer 1

According to the link you mentioned the html should look like this
<div class="row">
<div class="col-lg-6 portfolio-item">
<div class="card h-100">
But since you wrap the DataList in a Panel, your html looks like this.
<div class="row">
<div ID="Pnl_prodL"> // extra div from panel
<div class="col-lg-6 portfolio-item" style="background-color: red">
<div class="card h-100">
A Panel creates a <div> element in html. I don't know what the use of that Panel is, but a PlaceHolder has most of the functionality without creating a div of it's own.
Maybe that will solve your problem...