Why doesn't repeater repeat 3 images per row but 1 ?

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>