Styling Gridview using Bootstrap.

This tutorial explains how to style grid view using twitter bootstrap."Bootstrap" is a web desiging framework developed by twitter.I gives a predefined style allowing the user to reduce the coding time in desiging the web ui.
Lets get Started.

First you need download the Bootstrap and jquery.

Bootstrap download link.
Jquery download link.

Once you downloaded and extracted the bootstrap and jquery.Then you have to copy and paste the jquery and bootsrap to the project folder.My folder structure.


Add the following code to your .aspx file

<head>
    <title>Grdiview Styling</title>
    <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <script src="Bootstrap/js/jquery.js"></script>
    <script src="Bootstrap/js/bootstrap.js"></script>
</head>

Adding Css to GridView:

<asp:GridView ID="grdView" AutoGenerateColumns="false" runat="server" 
             HeaderStyle-BackColor ="#F1F1F1" 
             CssClass="table table-bordered table-hover table-condensed warning">
                <Columns>
                    <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" />
                    <asp:BoundField DataField="CompanyName" HeaderText="Customer Name" />
                    <asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
                </Columns>
</asp:GridView>

HeaderStyle-BackColor = Define the background color for the Header.
CssClass = Using this you can add CssClass from bootstrap to gridview.

Output:
Asp Gridview with Bootstrap


Download Source Code
Labels:

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )