Designing Admin Book Issuing Page in ASP.NET with Bootstrap Styling
In this tutorial we will design the admin book issuing page using ASP.net & also apply bootstrap styling. By this module the admin/librarian will be able to issue library books to members. We will only design the front-end design in this tutorial & add backend code later.
Watch the video tutorial at the end of this video to understand more about how to create this page & apply custom styling. Use the code given below.
Download all Images for this project – CLICK HERE
Admin Book Issuing Page Code –
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="adminbookissuing.aspx.cs" Inherits="WebApplication3.adminbookissuing" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"></asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <div class="container-fluid"> <div class="row"> <div class="col-md-5"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col"> <center> <h4>Book Issuing</h4> </center> </div> </div> <div class="row"> <div class="col"> <center> <img width="100px" src="imgs/books.png" /> </center> </div> </div> <div class="row"> <div class="col"> <hr> </div> </div> <div class="row"> <div class="col-md-6"> <label>Member ID</label> <div class="form-group"> <asp:TextBox CssClass="form-control" ID="TextBox2" runat="server" placeholder="Member ID"></asp:TextBox> </div> </div> <div class="col-md-6"> <label>Book ID</label> <div class="form-group"> <div class="input-group"> <asp:TextBox CssClass="form-control" ID="TextBox1" runat="server" placeholder="Book ID"></asp:TextBox> <asp:Button class="btn btn-primary" ID="Button1" runat="server" Text="Go" /> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <label>Member Name</label> <div class="form-group"> <asp:TextBox CssClass="form-control" ID="TextBox3" runat="server" placeholder="Member Name" ReadOnly="True"></asp:TextBox> </div> </div> <div class="col-md-6"> <label>Book Name</label> <div class="form-group"> <asp:TextBox CssClass="form-control" ID="TextBox4" runat="server" placeholder="Book Name" ReadOnly="True"></asp:TextBox> </div> </div> </div> <div class="row"> <div class="col-md-6"> <label>Start Date</label> <div class="form-group"> <asp:TextBox CssClass="form-control" ID="TextBox5" runat="server" placeholder="Start Date" TextMode="Date"></asp:TextBox> </div> </div> <div class="col-md-6"> <label>End Date</label> <div class="form-group"> <asp:TextBox CssClass="form-control" ID="TextBox6" runat="server" placeholder="End Date" TextMode="Date"></asp:TextBox> </div> </div> </div> <div class="row"> <div class="col-6"> <asp:Button ID="Button2" class="btn btn-lg btn-block btn-primary" runat="server" Text="Issue" /> </div> <div class="col-6"> <asp:Button ID="Button4" class="btn btn-lg btn-block btn-success" runat="server" Text="Return" /> </div> </div> </div> </div> <a href="homepage.aspx"><< Back to Home</a><br> <br> </div> <div class="col-md-7"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col"> <center> <h4>Issued Book List</h4> </center> </div> </div> <div class="row"> <div class="col"> <hr> </div> </div> <div class="row"> <div class="col"> <asp:GridView class="table table-striped table-bordered" ID="GridView1" runat="server"></asp:GridView> </div> </div> </div> </div> </div> </div> </div> </asp:Content>
CSS Style (customstylesheet.css)-
.footerlinks { color: #ffffff; text-decoration: none !important; } .footerlinks:hover { color: #ffd800; } #footer1 { background: #762b00; } #footer2 { background: #531f00; }