Post
Ask Question

Bootstrap Login Page

 Bootstrap

  • Bootstrap is a powerful mobile-first front-end framework. It is very helpful in faster and easier web development by using HTML, CSS, and JavaScript.
  • Bootstrap is open source and there are many Bootstrap sample applications already submitted on GitHub.
Browser Support
  • Most of the browsers support Bootstrap framework.
Advantages of Bootstrap
  • Easy to get started
  • Responsive design
  • Cross-browser support
  • Easy to customize
  • Encourages using LESS
  • Supports useful jQuery plugins
  • Many custom jQuery plugins available
  • Mobile-first
Bootstrap Packages
  • Bootstrap has a responsive mobile-first Grid that allows us to develop our own design too.
  • Bootstrap has some extremely useful jQuery plugins to show Modal, DropDown,Tooltip, and Carousel.
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.         }  
  19.   
  20.         html {  
  21.             min-height: 100%;  
  22.         }  
  23.   
  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">  
  6.   
  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>  
  30.   
  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>  
  43.   
  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>  
  56.   
  57.                                </div>  
  58.                            </div>  
  59.   
  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.            }  
  17.   
  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
Next Recommended Reading How To Create A Login Form In Bootstrap