DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • GDPR Compliance With .NET: Securing Data the Right Way
  • How to Enhance the Performance of .NET Core Applications for Large Responses
  • Zero to AI Hero, Part 3: Unleashing the Power of Agents in Semantic Kernel
  • Choosing the Best CSS Frameworks for Enterprise Web Applications

Trending

  • Automating Data Pipelines: Generating PySpark and SQL Jobs With LLMs in Cloudera
  • Automatic Code Transformation With OpenRewrite
  • 5 Subtle Indicators Your Development Environment Is Under Siege
  • The Human Side of Logs: What Unstructured Data Is Trying to Tell You
  1. DZone
  2. Coding
  3. Frameworks
  4. Responsive Bootstrap GridView in ASP.NET

Responsive Bootstrap GridView in ASP.NET

A straightforward tutorial to make a responsive UI for your ASP.NET application.

By 
Sanjay Kumar user avatar
Sanjay Kumar
·
Nov. 02, 15 · Tutorial
Likes (5)
Comment
Save
Tweet
Share
106.1K Views

Join the DZone community and get the full member experience.

Join For Free

The GridView control of Bootstrap provides responsive design quickly and easily.

So, let's start with the following procedure.

  • Package Manager Console
  • 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>  

    Write this code.

    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.

    ASP.NET Bootstrap (front-end framework)

    Published at DZone with permission of Sanjay Kumar. See the original article here.

    Opinions expressed by DZone contributors are their own.

    Related

    • GDPR Compliance With .NET: Securing Data the Right Way
    • How to Enhance the Performance of .NET Core Applications for Large Responses
    • Zero to AI Hero, Part 3: Unleashing the Power of Agents in Semantic Kernel
    • Choosing the Best CSS Frameworks for Enterprise Web Applications

    Partner Resources

    ×

    Comments
    Oops! Something Went Wrong

    The likes didn't load as expected. Please refresh the page and try again.

    ABOUT US

    • About DZone
    • Support and feedback
    • Community research
    • Sitemap

    ADVERTISE

    • Advertise with DZone

    CONTRIBUTE ON DZONE

    • Article Submission Guidelines
    • Become a Contributor
    • Core Program
    • Visit the Writers' Zone

    LEGAL

    • Terms of Service
    • Privacy Policy

    CONTACT US

    • 3343 Perimeter Hill Drive
    • Suite 100
    • Nashville, TN 37211
    • support@dzone.com

    Let's be friends:

    Likes
    There are no likes...yet! 👀
    Be the first to like this post!
    It looks like you're not logged in.
    Sign in to see who liked this post!