Bootstrap (responsive) gridview with smart paging in asp.net c#

In this article we learn how to make a gridview with fully responsive and with smart paging in asp.net c#. Here we makes some feature in gridview like mouse hover view in gridview column .I had implement this code our real life project Bitto Properties.

Database:-

Source Code:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="gridviewwithpaging.aspx.cs" Inherits="gridviewwithpaging" %>

<!DOCTYPE html>

</head>

<body>

<div>

.table table tbody tr td a,

.table table tbody tr td span {

position: relative;

float: left;

padding: 6px 12px;

margin-left: -1px;

line-height: 1.42857143;

color: #337ab7;

text-decoration: none;

background-color: #fff;

border: 1px solid #ddd;

}

.table table > tbody > tr > td > span {

z-index: 3;

color: #fff;

cursor: default;

background-color: #337ab7;

border-color: #337ab7;

}

.table table > tbody > tr > td:first-child > a,

.table table > tbody > tr > td:first-child > span {

margin-left: 0;

border-top-left-radius: 4px;

border-bottom-left-radius: 4px;

}

.table table > tbody > tr > td:last-child > a,

.table table > tbody > tr > td:last-child > span {

border-top-right-radius: 4px;

border-bottom-right-radius: 4px;

}

.table table > tbody > tr > td > a:hover,

.table table > tbody > tr > td > span:hover,

.table table > tbody > tr > td > a:focus,

.table table > tbody > tr > td > span:focus {

z-index: 2;

color: #23527c;

background-color: #eee;

border-color: #ddd;

}

</style>

<asp:GridView ID="GridView1"

CssClass="table table-striped table-bordered table-hover" PageSize="3"

runat="server"

AllowPaging="True" OnPageIndexChanging="GridView1_PageIndexChanging" EnableModelValidation="True">

</asp:GridView>

</div>

</form>

</body>

</html>

Code behind(c#):-

using System;

using System.Collections.Generic;

using System.Data;

using System.Data.SqlClient;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class gridviewwithpaging : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

BindDataList();

}

protected void BindDataList()

{

SqlConnection con = new SqlConnection("Data Source=NEERAJ-PC\\NEERAJ;Initial Catalog=CodeSolution;Persist Security Info=True;User ID=sa; password=12345678");

con.Open();

SqlCommand command = new SqlCommand("SELECT * from record", con);

SqlDataAdapter da = new SqlDataAdapter(command);

DataTable dt = new DataTable();

da.Fill(dt);

GridView1.DataSource = dt;

GridView1.DataBind();

con.Close();

}

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)

{

GridView1.PageIndex = e.NewPageIndex;