Implement Bootstrap Responsive ASP.Net GridView with multiple columns

Hi ahmadsubuhanl...,

Here is an example with multiple columns.

Refer below code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<section>
    <!-- Form -->
    <form id="form2" runat="server">
        <div class="row gtr-uniform">
            <div class="col-12 col-12-xsmall">
                <asp:GridView ID="GridView1" CssClass="footable" runat="server" AutoGenerateColumns="false"
                    Style="max-width: 100%">
                    <Columns>
                        <asp:BoundField DataField="EmployeeId" HeaderText="Employee Id" />
                        <asp:BoundField DataField="TitleOfCourtesy" HeaderText="Title" />
                        <asp:BoundField DataField="FirstName" HeaderText="First Name" />
                        <asp:BoundField DataField="LastName" HeaderText="Last Name" />
                        <asp:BoundField DataField="BirthDate" HeaderText="BirthDate" />
                        <asp:BoundField DataField="Title" HeaderText="Designation" />
                        <asp:BoundField DataField="Address" HeaderText="Address" />
                        <asp:BoundField DataField="City" HeaderText="City" />
                        <asp:BoundField DataField="Country" HeaderText="Country" />
                        <asp:BoundField DataField="Region" HeaderText="Region" />
                        <asp:BoundField DataField="PostalCode" HeaderText="PostalCode" />
                        <asp:BoundField DataField="HomePhone" HeaderText="Phone" />
                    </Columns>
                </asp:GridView>
                <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.min.css"
                    rel="stylesheet" type="text/css" />
                <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
                <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/js/footable.min.js"></script>
                <script type="text/javascript">
                    $(function () {
                        $('[id*=GridView1]').footable();
                    });
                </script>
            </div>
        </div>
    </form>
</section>

Namespaces

C#

using System.Data;
using System.Data.SqlClient;
using System.Configuration;

VB.Net

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        string query = "SELECT TOP 5 * FROM Employees";
        using (SqlConnection con = new SqlConnection(conString))
        {
            SqlCommand cmd = new SqlCommand(query, con);
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    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";
                    GridView1.HeaderRow.Cells[4].Attributes["data-hide"] = "phone";
                    GridView1.HeaderRow.Cells[5].Attributes["data-hide"] = "phone";
                    GridView1.HeaderRow.Cells[6].Attributes["data-hide"] = "phone";
                    GridView1.HeaderRow.Cells[7].Attributes["data-hide"] = "phone";
                    GridView1.HeaderRow.Cells[8].Attributes["data-hide"] = "phone";
                    GridView1.HeaderRow.Cells[9].Attributes["data-hide"] = "phone";
                    GridView1.HeaderRow.Cells[10].Attributes["data-hide"] = "phone";
                    GridView1.HeaderRow.Cells[11].Attributes["data-hide"] = "phone";

                    //Adds THEAD and TBODY to GridView.
                    GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
                }
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Dim query As String = "SELECT TOP 5 * FROM Employees"
        Using con As SqlConnection = New SqlConnection(conString)
            Dim cmd As SqlCommand = New SqlCommand(query, con)
            Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
                Using dt As DataTable = New DataTable()
                    sda.Fill(dt)
                    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"
                    GridView1.HeaderRow.Cells(4).Attributes("data-hide") = "phone"
                    GridView1.HeaderRow.Cells(5).Attributes("data-hide") = "phone"
                    GridView1.HeaderRow.Cells(6).Attributes("data-hide") = "phone"
                    GridView1.HeaderRow.Cells(7).Attributes("data-hide") = "phone"
                    GridView1.HeaderRow.Cells(8).Attributes("data-hide") = "phone"
                    GridView1.HeaderRow.Cells(9).Attributes("data-hide") = "phone"
                    GridView1.HeaderRow.Cells(10).Attributes("data-hide") = "phone"
                    GridView1.HeaderRow.Cells(11).Attributes("data-hide") = "phone"

                    'Adds THEAD and TBODY to GridView.
                    GridView1.HeaderRow.TableSection = TableRowSection.TableHeader
                End Using
            End Using
        End Using
    End If
End Sub

Screenshot