Why doesn't repeater repeat 3 images per row but 1 ? - asp.net

Question

I have used asp's repeater to repeat 3 images per row but it shows only 1 image per row. why ?
I have tried every way I could but no effect.
<asp:Repeater ID="rptrImages" runat="server">
<ItemTemplate>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src='<%# "UploadedImages/"+ Eval("Image") %>' alt="No Image" class="img-responsive img-rounded" />
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>

Answer 1

The <ItemTemplate> within a repeater is the content that gets repeated for every object within the data source. All you need to do is refactor your template:
<div class="row">
<asp:Repeater ID="rptrImages" runat="server">
<ItemTemplate>
<div class="col-md-4">
<div class="thumbnail">
<img src='<%# "UploadedImages/"+ Eval("Image") %>' alt="No Image" class="img-responsive img-rounded" />
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
Using the above, the <div class="col-md-4"> will be repeated for each item in your data source and all contained within a single <div class="row">, due to the nature of Bootstrap's columns they will automatically wrap onto another line within the same div once three are placed horizontally. If you need to hide the <div class="row"> should the repeater not contain any items then try the below:
<asp:Repeater ID="rptrImages" runat="server">
<HeaderTemplate>
<div class="row">
</HeaderTemplate>
<ItemTemplate>
<div class="col-md-4">
<div class="thumbnail">
<img src='<%# "UploadedImages/"+ Eval("Image") %>' alt="No Image" class="img-responsive img-rounded" />
</div>
</div>
</ItemTemplate>
<FooterTemplate>
</div>
</FooterTemplate>
</asp:Repeater>
Then in your code-behind when binding the repeater:
rptrImages.DataSource = myDataSourceVar;
rptrImages.DataBind();
rptrImages.Visible = (rptrImages.Items.Count > 0);
Because the <div class="row"> is within the HeaderTemplate and FooterTemplate it will not get rendered if you set Visible to false.

Answer 2

You must add width and height to Your Image
<div class="row" style="width: 100%;">
<div class="col-sm-12">
<asp:Repeater ID="RepeaterImages" runat="server" Visible="true">
<ItemTemplate>
<asp:Image ID="imageSlide" CssClass="MyGridGallery" ImageUrl='<%# Container.DataItem %>' runat="server" Width="300px" Height="200px" />
</ItemTemplate>
</asp:Repeater>
</div>
.MyGridGallery {
padding: 5px;
}
</style>