Over a million developers have joined DZone.

Responsive Bootstrap GridView in ASP.NET

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

· Mobile Zone

Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud, brought to you in partnership with IBM.

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.


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GridviewResponsive.Default" %>  
    <!DOCTYPE html>  
    <html xmlns="http://www.w3.org/1999/xhtml">  
        <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" />  
        <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 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.">  
                                                <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" />  

    Write this code.


    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;  

    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.

    The Mobile Zone is brought to you in partnership with Strongloop and IBM.  Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud.

    bootstrap,responsive design,asp.net,mobile

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

    Opinions expressed by DZone contributors are their own.

    The best of DZone straight to your inbox.

    Please provide a valid email address.

    Thanks for subscribing!

    Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

    {{ parent.title || parent.header.title}}

    {{ parent.tldr }}

    {{ parent.urlSource.name }}