In order to make the GridView responsive,You can use Footable jQuery plugin which is compatible with Bootstrap design.

To use Footable jQuery include the following code inside the form tag:

The HTML Markup consists of an ASP.Net GridView. You have to apply the CSS class footable to the GridView.

<asp:GridView ID=”GridView1″ CssClass=”footable” runat=”server” AutoGenerateColumns=”false”

Style=”max-width: 500px”>

<asp:BoundField DataField=”Id” HeaderText=”Id” />

<asp:BoundField DataField=”Name” HeaderText=”Name” />

<asp:BoundField DataField=”Company” HeaderText=”Company” />

<asp:BoundField DataField=”Age” HeaderText=”Age” />

</Columns>

</asp:GridView>

You will need to import the following C# namespaces.

using System.Data;

Imports System.Data;

Binding the Grid View

protected void Page_Load(object sender, EventArgs e)

{

if (!this.IsPostBack)

{

DataTable dt = new DataTable();

dt.Columns.AddRange(new DataColumn[4] { new DataColumn(“Id”), new DataColumn(“Name”), new DataColumn(“Company”), new DataColumn(“Age”) });

dt.Rows.Add(1, “Savan”, “MSOSL”, 23);

dt.Rows.Add(2, “Rupesh”, “KLOSJ”, 25);

dt.Rows.Add(3, “Rahul”, “JSKL”, 26);

GridView1.DataSource = dt;

GridView1.DataBind();

//Attribute to show the Plus Minus Button.

GridView1.HeaderRow.Cells[0].Attributes[“data-class”] = “expand”;

//Attribute to hide column in Phone.

GridView1.HeaderRow.Cells[2].Attributes[“data-hide”] = “phone”;

GridView1.HeaderRow.Cells[3].Attributes[“data-hide”] = “phone”;

//Adds THEAD and TBODY to GridView.

GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

}