Bootstrap CSS Example

I’ve been wanting to play around with some CSS and other cosmetic changes to my web projects. With the help of Bob Tabor over at Learn Visual Studio.Net I went thru some of Bootstrap videos to help with this. I applied them to the code from the previous post with the Inventory database. I’ll spare the posting the code details in the different layers. If you want to see them you can go see for yourself. I’ll just post my usual program screenshots along with the html code.

BootstrapProgram

 
Default.aspx HTML code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Inventory.Presentation.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-2.1.4.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="mainForm">
        <asp:GridView ID="inventoryGridView" runat="server" OnRowCommand="inventoryGridView_RowCommand" AutoGenerateColumns="False" CssClass="table table-hover table-bordered">
            <Columns>
                <asp:ButtonField Text="View" CommandName="ViewItem" />
                <asp:ButtonField Text="Remove" CommandName="RemoveItem" />
                <asp:ButtonField CommandName="EditItem" Text="Edit" />
                <asp:BoundField DataField="InventoryItemID" HeaderText="Item ID" />
                <asp:BoundField DataField="ItemManufacturer" HeaderText="Item Manufacturer" />
                <asp:BoundField DataField="ItemName" HeaderText="Item Name" />
                <asp:BoundField DataField="ItemModel" HeaderText="Item Model" />
                <asp:BoundField DataField="ItemSerialNumber" HeaderText="Serial Number" />
                <asp:BoundField DataField="ItemNotes" HeaderText="Notes" />
            </Columns>
        </asp:GridView>
        <br />
        <div>
            <asp:Label ID="resultsLabel" runat="server"></asp:Label>
            <br />
            <p><strong>Add An Item To Inventory</strong></p>
        </div>
        <div id="newTable">
        <div class="form-group">
            <asp:Label ID="itemManufacturerLabel" runat="server" Text="Item Manufacturer: "></asp:Label>
            <br />
            <asp:TextBox ID="itemManufacturerTextBox" runat="server" CssClass="form-control" Width="20%" placeholder="Enter Item Manufacturer"></asp:TextBox>
            <br />
            <asp:Label ID="itemNameLabel" runat="server" Text="Item Name: "></asp:Label>
            <br />
            <asp:TextBox ID="itemNameTextBox" runat="server" CssClass="form-control" Width="20%" placeholder="Enter Item Name"></asp:TextBox>
            <br />
            <asp:Label ID="itemModelLabel" runat="server" Text="Item Model: "></asp:Label>
            <br />
            <asp:TextBox ID="itemModelTextBox" runat="server" CssClass="form-control" Width="20%" placeholder="Enter Item Model"></asp:TextBox>
            <br />
            <asp:Label ID="serialNumberLabel" runat="server" Text="Item Serial Number: "></asp:Label>
            <br />
            <asp:TextBox ID="itemSerialNumberTextBox" runat="server" CssClass="form-control" Width="20%" placeholder="Enter Item Serial Number"></asp:TextBox>
            <br />
            <asp:Label ID="itemNotesLabel" runat="server" Text="Item Notes: "></asp:Label>
            <br />
            <asp:TextBox ID="itemNotesTextBox" runat="server" TextMode="MultiLine" CssClass="form-control" Width="20%" placeholder="Enter Notes"></asp:TextBox>
            <br />
            <br />
            <div class="btn-default">
                <asp:Button ID="saveDataButton" runat="server" Text="Save Data" OnClick="saveDataButton_Click" CssClass="btn btn-primary btn-lg" />
            </div>
        </div> 
        </div> 
    </div>
    </form>
</body>
</html>

The only change that you will see here is references to the bootstrap and jquery code on line 8-10. You will also see where I’ve added CSS for the gridview and text boxes.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s