A GridView control provides a Responsive Design and is easy with a fast and responsive development Bootstrap framework.
![]()
So, let's proceed with the following procedure.
PM > Install-Package Twitter.Bootstrap.Bootswatch.Cosmo
- Grid view Control and Data Binding
HeaderStyle-CssClass=" " ItemStyle-CssClass=" "
- Bootstrap Responsive Classes
Table table-striped table-bordered table-hover
![]()
Create a new project using "File" -> "New" -> "Project..." then select Web then select "ASP.Net Web Forms Application". Name it “GridviewResponsive".
![]()
For the new ASP.NET Project select Empty template then select the Web Forms checkbox then click OK.
![]()
In the Design Source write the code as in the following.
Default.aspx
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GridviewResponsive.Default" %>
-
- <!DOCTYPE html>
-
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>Responsive GridView in ASP.NET</title>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <link href="Content/bootstrap.cosmo.min.css" rel="stylesheet" />
- <link href="Content/StyleSheet.css" rel="stylesheet" />
-
- </head>
- <body>
- <form id="form1" runat="server">
- <br />
- <div id="mainContainer" class="container">
- <div class="shadowBox">
- <div class="page-container">
- <div class="container">
- <div class="jumbotron">
- <p class="text-danger">Responsive GridView in ASP.NET </p>
- <span class="text-info">Desktop Tablet Phone Different layout </span>
- </div>
- <div class="row">
- <div class="col-lg-12 ">
- <div class="table-responsive">
- <asp:GridView ID="grdCustomer" runat="server" Width="100%" CssClass="table table-striped table-bordered table-hover" AutoGenerateColumns="False" DataKeyNames="CustomerID" EmptyDataText="There are no data records to display.">
- <Columns>
- <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" />
- <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg" />
- <asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" ItemStyle-CssClass="visible-xs" HeaderStyle-CssClass="visible-xs" />
- <asp:BoundField DataField="ContactTitle" HeaderText="ContactTitle" SortExpression="ContactTitle" HeaderStyle-CssClass="visible-md" ItemStyle-CssClass="visible-md" />
- <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" ItemStyle-CssClass="hidden-xs" HeaderStyle-CssClass="hidden-xs" />
- <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" ItemStyle-CssClass="hidden-xs" HeaderStyle-CssClass="hidden-xs" />
- <asp:BoundField DataField="Region" HeaderText="Region" SortExpression="Region" HeaderStyle-CssClass="visible-md" ItemStyle-CssClass="visible-md" />
- <asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg" />
- <asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country" HeaderStyle-CssClass="visible-md" ItemStyle-CssClass="visible-md" />
- <asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg" />
- </Columns>
- </asp:GridView>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </form>
- </body>
- </html>
In the code behind write the code as in the following.
Default.aspx.cs
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.UI;
- using System.Web.UI.WebControls;
-
- namespace GridviewResponsive
- {
- public partial class Default : System.Web.UI.Page
- {
- NorthwindDataContext dc = new NorthwindDataContext();
- protected void Page_Load(object sender, EventArgs e)
- {
- var qry = from s in dc.Customers
- select s;
- grdCustomer.DataSource = qry;
- grdCustomer.DataBind();
- }
- }
- }
Now run the page, it will look like the following Desktop layout.
![]()
Now run the page, it will look like the following Tablet layout.
![]()
Now run the page, it will look like the following Phone layout.
![]()
I hope this article is useful. If you have any other questions then please provide your comments below.