How can I make the following layout using datalist? I am using Bootstrap and datalist and ASP.NET. It got the layout but it only display 3 columns due to margin. Any idea how can I do this?
|---------| |---------| |---------| |---------|
| Image | | Image | | Image | | Image |
| 300x450 | | 300x450 | | 300x450 | | 300x450 |
| | | | | | | |
| | | | | | | |
|---------| |---------| |---------| |---------|
| name | |name | |name | |name |
| price | |price | |price | |price |
|---------| |---------| |---------| |---------|
|---------| |---------| |---------| |---------|
| Image | | Image | | Image | | Image |
| 300x450 | | 300x450 | | 300x450 | | 300x450 |
| | | | | | | |
| | | | | | | |
|---------| |---------| |---------| |---------|
| name | |name | |name | |name |
| price | |price | |price | |price |
|---------| |---------| |---------| |---------|
I did try to do this, below you will find my code:
<asp:DataList ID="repeaterGrid" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" cssClass="row">
<ItemTemplate>
<div class="text-center col-lg-3 col-md-4 col-sm-6 col-xs-12 img-thumbnail" style="height:400px;padding:0px;margin-right:40px;border:1px solid black;">
<asp:Image ID="ImageI" runat="server" src='<%# Eval("Picture_Path") %>' style="height:100%;" /> <br/>
<asp:Label ID="NameL" runat="server" Text='<%# Eval("Name") %>' /> <br/>
<asp:Label ID="PriceL" runat="server" Text='<%# Eval("Price") %>' />
</div>
</ItemTemplate>
</asp:DataList>
