Step 1

Create a table for storing your Image (Product) information, such as ProductID, Name ,Price, Quantity etc., which you want to show as product details on the homepage of a shopping cart.
Step 2

Create a web form for your web application.

Import Bootstrap line or manage NuGet packages to install bootstrap in your web form (right-click on web application --> Manage NuGet Packages-->install bootstrap).
LINQ

Step 3

Add repeater in your form,
  1. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <link href="Content/bootstrap.css" rel="stylesheet" />
  6. <title></title>
  7. <style>
  8. well{
  9. margin-top:20px;
  10. padding:2px,2px,2px,2px;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <form id="form1" runat="server">
  16. <div class="container" style="margin-top:10px">
  17. <div class="row">
  18. <asp:Repeater ID="RepeatImages" runat="server">
  20. <ItemTemplate>
  21. <div class="col-md-3">
  22. <div class="well" style="height:350px; width:350px;">
  23. <asp:Image ID="Image" runat="server" CssClass="align" style="height:200px; width:100%" ImageUrl='<%# DataBinder.Eval(Container,"DataItem.Image") %>' />
  24. <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container,"DataItem.ImageID") %>'></asp:Label><br />
  25. </div>
  26. </div>
  27. </ItemTemplate>
  29. </asp:Repeater>
  30. </div>
  31. </div>
  32. </form>
  33. </body>
  34. </html>
Step 4

Now, add model to access database (right click on web application --> add new item-->ADO.NET entity data model (model.edmx)).
LINQ
Add model1.edmx

LINQ
Create new connection Add database (Entity).

LINQ
Choose table

LINQ

By finishing this you will get access to your database.
Step 5

Fetch the data from table to send it to repeater,
  1. using System;
  2. using System.Collections.Generic;
  3. using System.IO;
  4. using System.Linq;
  5. using System.Web;
  6. using System.Web.UI;
  7. using System.Web.UI.WebControls;
  8. using upload_image.model;
  10. namespace upload_image
  11. {
  12. public partial class repeater : System.Web.UI.Page
  13. {
  14. userEntities db = new userEntities();
  15. protected void Page_Load(object sender, EventArgs e)
  16. {
  17. var data = (from a in db.ImageUploads select a).ToList();
  19. RepeatImages.DataSource = data;
  20. RepeatImages.DataBind();
  22. }
  23. }
  24. }

I am using LINQ for fetching data.

var data = (from a in db.ImageUploads select a).ToList();

Now, you will get UI as follows,

LINQ
You can design more using external CSS as well.

Thank you.