Repeater with items side by side

Question

User-909867351 posted

Hi

I gave up from listbox because I can't put it to work on bootstrap 4.  (https://forums.asp.net/t/2139750.aspx?ListView+and+Card+Bootstrap)

I try to use the repeater to achieve the same result but I have no luck because the items from repeater seems to be in row and I can't make colums.

Why I can't get a grid of two or more columns? It's possible to have a grid with 4 columns with the reapeater using bootstrap?

Answer 1

User283571144 posted

Hi mariolopes,

I try to use the repeater to achieve the same result but I have no luck because the items from repeater seems to be in row and I can't make colums.

Why I can't get a grid of two or more columns? It's possible to have a grid with 4 columns with the reapeater using bootstrap?

Since you don't provider the details codes about your repeater control, I could only create a test demo according to your previous thread's listview.

The aspx codes as below:

                 <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
                    <ItemTemplate>
                        <div class=" col-lg-3 col-md-3 col-sm-3">
                            <div class="card">
                                <div class="card-header">
                                    ID: <asp:Label ID="Label2" runat="server" Text='<%#Eval("Id")%>'></asp:Label>
                                </div>
                                <div class="card-body">
                                    Name: <asp:Label ID="Label3" runat="server" Text='<%#Eval("Name")%>'></asp:Label>
                                </div>
                                <div class="card-footer">
                                    Price: <asp:Label ID="Label1" runat="server" Text='<%#Eval("Price")%>'></asp:Label>
                               </div>
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DataStoreConnectionString %>" SelectCommand="SELECT * FROM [Product]"></asp:SqlDataSource>

The result as below:

 

Since bootstrap Grid system's 'col-' class need in the row class div, we should add the div with 'row' class outside the repeater.

More details, you could refer to below codes.

        <div class="row">
            <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
                <ItemTemplate>
                    <div class="col-lg-3 col-md-3 col-sm-3">
                        <div class="card">
                            <div class="card-header">
                                ID:
                                <asp:Label ID="Label2" runat="server" Text='<%#Eval("Id")%>'></asp:Label>
                            </div>
                            <div class="card-body">
                                Name:
                                <asp:Label ID="Label3" runat="server" Text='<%#Eval("Name")%>'></asp:Label>
                            </div>
                            <div class="card-footer">
                                Price:
                                <asp:Label ID="Label1" runat="server" Text='<%#Eval("Price")%>'></asp:Label>
                            </div>
                        </div>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DataStoreConnectionString %>" SelectCommand="SELECT * FROM [Product]"></asp:SqlDataSource>
        </div>

Result:

If these codes don't solve your issue, please feel no hesitate to post the details information with repeater codes.

Best Regards,

Brando

Answer 2

User-909867351 posted

Thank you 

That´s what I'm looking for.