Responsive GridView Example in ASP.Net

In this tutorial, we'll explore how to create a responsive GridView in ASP.NET, ensuring seamless user experiences across various devices. With a focus on mobile-first design principles and Bootstrap integration, developers can build web applications that adapt gracefully to different screen sizes.

Why Responsive Design Matters:

  • User Experience: Responsive design ensures optimal viewing experiences, regardless of the device used, leading to higher user satisfaction.
  • SEO Benefits: Google prioritizes mobile-friendly websites in search rankings, making responsive design crucial for improved visibility.
  • Future-Proofing: As mobile usage continues to rise, responsive design future-proofs your web applications, accommodating evolving user preferences.

Step-by-Step Guide:

  1. Include Bootstrap: Begin by including Bootstrap CSS in your ASP.NET project. You can use a CDN link for quick integration.

  2. Markup for GridView:

    • Use <div class="table-responsive"> to wrap your GridView, enabling horizontal scrolling on smaller devices.
    • Apply Bootstrap's table classes (table, table-striped, table-bordered) to style the GridView.
  3. Code-behind for Data Binding:

    • Use C# code to bind data to the GridView. This can be fetched from a database, API, or in-memory collection.
    • Ensure that data retrieval and binding follow best practices for efficiency and security.

Complete Code Example:

using System;
using System.Collections.Generic;
using System.Web.UI.WebControls;

namespace ResponsiveGridViewExample
    public partial class ResponsiveGridView : System.Web.UI.Page
        protected void Page_Load(object sender, EventArgs e)
            if (!IsPostBack)

        private void BindGridView()
            // Sample data
            List<Product> productList = new List<Product>()
                new Product { ID = 1, Name = "Product 1", Price = 100 },
                new Product { ID = 2, Name = "Product 2", Price = 150 },
                new Product { ID = 3, Name = "Product 3", Price = 200 },
                new Product { ID = 4, Name = "Product 4", Price = 120 },
                new Product { ID = 5, Name = "Product 5", Price = 180 }

            GridViewData.DataSource = productList;

        // Sample Product class
        public class Product
            public int ID { get; set; }
            public string Name { get; set; }
            public decimal Price { get; set; }

Then, in your ASP.NET markup, you'll need to define the columns for the GridView:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ResponsiveGridView.aspx.cs" Inherits="ResponsiveGridViewExample.ResponsiveGridView" %>
<!DOCTYPE html>
<html xmlns="">
<head runat="server">
    <title>Responsive GridView</title>
    <!-- Include Bootstrap CSS -->
    <link href="" rel="stylesheet" />
    <form id="form1" runat="server">
        <div class="container">
            <h1>Responsive GridView Example</h1>
            <div class="table-responsive">
               <asp:GridView ID="GridViewData" runat="server" CssClass="table table-striped table-bordered" AutoGenerateColumns="false"  >
        <asp:BoundField DataField="ID" HeaderText="ID" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Price" HeaderText="Price" DataFormatString="{0:C}" />
    <!-- Include Bootstrap JS (optional) -->
    <script src=""></script>

Implementing responsive design with GridView in ASP.NET empowers developers to deliver user-friendly and visually appealing web applications. By embracing mobile-first design principles and integrating Bootstrap, developers can ensure seamless experiences across all devices.

Asp.Net Ajax Control Toolkit tutorials.

Give your valuable comments.

1 + 3 =

About Us | Terms of Use | Privacy Policy | Disclaimer | Contact Us Copyright © 2012-2024 CodingFusion
50+ C# Programs for beginners to practice