Bootstrap

Browser Support
Advantages of Bootstrap
Bootstrap Packages
Download Bootstrap

Login Page Design

Please add the below code to Head tag.
  1. <meta charset="utf-8" />
  2. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  3. <meta name="viewport" content="width=device-width, initial-scale=1" />
  4. <meta name="description" content="" />
  5. <meta name="author" content="ananth.G" />
  6. <link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
  7. <link href="css/skin-3.css" rel="stylesheet" />
  8. <link href="css/style.css" rel="stylesheet" />
  9. <link href="bootstrap/css/font-awesome.min.css" rel="stylesheet" />
  10. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  11. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  12. <script src="bootstrap/js/jquery-1.9.1.js"></script>
  13. <style>
  14. body {
  15. background: url(../images/06.jpg) no-repeat;
  16. background-size: cover;
  17. min-height: 100%;
  18. }
  20. html {
  21. min-height: 100%;
  22. }
  24. .Error-control {
  25. background: #ffdedd !important;
  26. border-color: #ff5b57 !important;
  27. }
  28. </style>
KeyPoints
  • bootstrap.css, font-awesome.min.css, skin-3.css, style.css are the CSS files used for developing responsive design and custom design.
  • html5shiv.js, respond.min.js are the two JavaScript files used to make our website support IE8.
  • jquery-1.9.1.js is used for validation purposes.
Add the below code to Body tag.
  1. <form id="form1" runat="server">
  2. <div class="container">
  3. <div class="row">
  4. <div class="col-lg-5 col-md-6 col-sm-8 col-xl-12 " style="margin: auto; float: initial; padding-top: 12%">
  5. <div class="row userInfo">
  7. <div class="panel panel-default ">
  8. <div class="panel-heading">
  9. <h3 class="panel-title" style="text-align: center; font-weight: bold">
  10. <a class="collapseWill">Login to your Account</a>
  11. </h3>
  12. </div>
  13. <div id="collapse1" class="panel-collapse collapse in">
  14. <div class="panel-body">
  15. <fieldset>
  16. <div class="form-group">
  17. <div class="col-md-"></div>
  18. <label class="col-md-12 control-label" for="prependedcheckbox">
  19. User ID
  20. </label>
  21. <div class="col-md-12">
  22. <div class="input-group">
  23. <span class="input-group-addon">
  24. <i class="fa fa-user"></i>
  25. </span>
  26. <asp:TextBox ID="txtUserName" CssClass="form-control" placeholder="Enter User ID" runat="server"></asp:TextBox>
  27. </div>
  28. <asp:Label ID="lblErrUserName" CssClass="help-block" runat="server" Text="" ForeColor="White"></asp:Label>
  29. </div>
  31. <label class="col-md-12 control-label" for="prependedcheckbox">
  32. Password
  33. </label>
  34. <div class="col-md-12">
  35. <div class="input-group">
  36. <span class="input-group-addon">
  37. <i class="fa fa-lock"></i>
  38. </span>
  39. <asp:TextBox ID="txtPassword" CssClass="form-control" placeholder="Enter Your Password" runat="server" TextMode="Password"></asp:TextBox>
  40. </div>
  41. <asp:Label ID="lblErrPassword" CssClass="help-block" runat="server" Text="" ForeColor="White"></asp:Label>
  42. </div>
  44. <div class="col-md-12">
  45. <div class="col-lg-6">
  46. <asp:CheckBox ID="chbRemember" Visible="false" runat="server" Text="Remember" />
  47. </div>
  48. <div class="col-lg-6">
  49. <div class="input-group" style="width: 100%">
  50. <asp:Button ID="btnLogin" CssClass="btn btn-success" Text="Login" OnClientClick="return FunForLoginValidation()" runat="server" Style="width: 100%" />
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. </fieldset>
  57. </div>
  58. </div>
  60. <div class="panel-heading">
  61. <div class="panel-title" style="text-align: right">
  62. <a class="collapseWill" href="SellerForgetPassword.aspx" style="font-size: x-small">Forgot Username or Password?
  63. </a>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. </div>
  70. </div>
  71. </form>
KeyPoints
  • The above content has login Controls like username, password, textbox, and login button.

Validation Script
  1. <script>
  2. function FunForLoginValidation() {
  3. var objValid = true;
  4. var objUserName = $("[id$=txtUserName]").val();
  5. var objPassword = $("[id$=txtPassword]").val();
  6. if (objUserName == "") {
  7. $('[id$=lblErrUserName]').text("User Name is required");
  8. $('[id$=lblErrUserName]').css("color", "#FF0000");
  9. $("[id$=txtUserName]").addClass("Error-control");
  10. objValid = false;
  11. }
  12. else {
  13. $('[id$=lblErrUserName]').text("");
  14. $('[id$=lblErrUserName]').css("color", "#FFFFFF");
  15. $("[id$=txtUserName]").removeClass("Error-control");
  16. }
  18. if (objPassword == "") {
  19. $('[id$=lblErrPassword]').text("Password is required");
  20. $('[id$=lblErrPassword]').css("color", "#FF0000");
  21. $("[id$=txtPassword]").addClass("Error-control");
  22. objValid = false;
  23. }
  24. else {
  25. $('[id$=lblErrPassword]').text("");
  26. $('[id$=lblErrPassword]').css("color", "#FFFFFF");
  27. $("[id$=txtPassword]").removeClass("Error-control");
  28. }
  29. return objValid;
  30. }
  31. function AcceptAlphanumeric(evt) {
  32. var key = evt.keyCode;
  33. return ((key >= 48 && key <= 57) || (key >= 65 && key <= 90) || (key >= 95 && key <= 122));
  34. }
  35. function NotAllowSingleDoubleQuotes(e) {
  36. var charCode = e.keyCode;
  37. if (charCode == 34)
  38. return false;
  39. if (charCode == 39)
  40. return false;
  41. }
  42. </script>
Validation Output