Finish all list page style updates.

src/Web/Catalog.WebForms/Catalog.WebForms/Default.aspx

@@ -6,82 +6,54 @@
             <img class="esh-catalog-title" src="/Content/main_banner_text.png" />
         </div>
     </section>
-
+    <br />
     <div class="row">
-        <asp:ListView ID="catalogList" runat="server"
-            DataKeyNames="Id" GroupItemCount="2"
-            ItemType="eShopOnContainers.Core.Models.Catalog.CatalogItem">
-            <EmptyDataTemplate>
-                <table >
-                    <tr>
-                        <td>Well, there's nothing in the catalog.</td>
-                    </tr>
-                </table>
-            </EmptyDataTemplate>
-            <EmptyItemTemplate>
-                <td/>
-            </EmptyItemTemplate>
-            <GroupTemplate>
-                <tr id="itemPlaceholderContainer" runat="server">
-                    <td id="itemPlaceholder" runat="server"></td>
-                </tr>
-            </GroupTemplate>
-            <ItemTemplate>
-                <td runat="server">
-                    <table>
-                        <tr>
-                            <td>
-                                <a href="ProductDetails.aspx?productID=<%#:Item.Id%>">
-                                    <img  class="esh-catalog-thumbnail"  src="<%#:Item.PictureUri%>"
-                                        style="border: solid" /></a>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <a href="ProductDetails.aspx?productID=<%#:Item.Id%>">
-                                    <span class="esh-catalog-name">
-                                        <%#:Item.Name%>
-                                    </span>
-                                </a>
-                                <br />
-                                <span class="esh-catalog-price">
-                                    <b>Price: </b><%#:String.Format("{0:c}", Item.Price)%>
-                                </span>
-                                <br />
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>&nbsp;</td>
-                        </tr>
-                    </table>
-                </td>
-            </ItemTemplate>
-            <LayoutTemplate>
-                <table style="width:100%;">
-                    <tbody>
-                        <tr>
-                            <td>
-                                <table id="groupPlaceholderContainer" runat="server" style="width:100%">
-                                    <tr id="groupPlaceholder"></tr>
-                                </table>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td></td>
-                        </tr>
-                        <tr></tr>
-                    </tbody>
-                </table>
-            </LayoutTemplate>
-        </asp:ListView>
-        <asp:DataPager 
-            ID="DataPager1" 
-            PagedControlID="catalogList"
-            PageSize="4"
-            runat="server">
-            <Fields>
-                <asp:NextPreviousPagerField ButtonType="Button" />
-            </Fields>
-        </asp:DataPager>
+        <span class="col-md-4">
+            <asp:DataPager
+                ID="DataPager1"
+                PagedControlID="catalogList"
+                PageSize="12"
+                runat="server">
+                <Fields>
+                    <asp:NextPreviousPagerField ButtonType="Button" />
+                </Fields>
+            </asp:DataPager>
+        </span>
     </div>
+    <br />
+    <asp:ListView ID="catalogList" runat="server"
+        DataKeyNames="Id" GroupItemCount="3"
+        ItemType="eShopOnContainers.Core.Models.Catalog.CatalogItem">
+        <EmptyDataTemplate>
+            <div class="row">
+                <span class="col-md-10 col-md-offset-1">There's nothing in the catalog to display at this time.
+                </span>
+            </div>
+        </EmptyDataTemplate>
+        <LayoutTemplate>
+                <div id="groupPlaceholder" runat="server"></div>
+        </LayoutTemplate>
+        <GroupTemplate>
+            <div id="itemPlaceholderConatiner" class="row">
+                <div id="itemPlaceholder" runat="server"></div>
+            </div>
+        </GroupTemplate>
+        <ItemTemplate>
+            <div class="col-md-4">
+                <a href="ProductDetails.aspx?productID=<%#:Item.Id%>">
+                    <img class="esh-catalog-thumbnail" src="<%#:Item.PictureUri%>"
+                        style="border: solid" /></a>
+                <br />
+                <a href="ProductDetails.aspx?productID=<%#:Item.Id%>">
+                    <span class="esh-catalog-name">
+                        <%#:Item.Name%>
+                    </span>
+                </a>
+                <br />
+                <span class="esh-catalog-price">
+                    <b>Price: </b><%#:String.Format("{0:c}", Item.Price)%>
+                </span>
+            </div>
+       </ItemTemplate>
+    </asp:ListView>
 </asp:Content>

src/Web/Catalog.WebForms/Catalog.WebForms/Default.aspx.designer.cs

@@ -13,21 +13,21 @@ namespace Microsoft.eShopOnContainers.Catalog.WebForms {
     public partial class _Default {
         
         /// <summary>
-        /// catalogList control.
+        /// DataPager1 control.
         /// </summary>
         /// <remarks>
         /// Auto-generated field.
         /// To modify move field declaration from designer file to code-behind file.
         /// </remarks>
-        protected global::System.Web.UI.WebControls.ListView catalogList;
+        protected global::System.Web.UI.WebControls.DataPager DataPager1;
         
         /// <summary>
-        /// DataPager1 control.
+        /// catalogList control.
         /// </summary>
         /// <remarks>
         /// Auto-generated field.
         /// To modify move field declaration from designer file to code-behind file.
         /// </remarks>
-        protected global::System.Web.UI.WebControls.DataPager DataPager1;
+        protected global::System.Web.UI.WebControls.ListView catalogList;
     }
 }