Bootstrap Login Page

This blog explains how to develop a login page in Bootstrap.

 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

• We can download the latest version of Bootstrap from http://getbootstrap.com.

Login Page Design

Please add the below code to Head tag. 

<meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="ananth.G" />
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="css/skin-3.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <link href="bootstrap/css/font-awesome.min.css" rel="stylesheet" />
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <script src="bootstrap/js/jquery-1.9.1.js"></script>
    <style>
        body {
            background: url(../images/06.jpg) no-repeat;
            background-size: cover;
            min-height: 100%;
        }

        html {
            min-height: 100%;
        }

        .Error-control {
            background: #ffdedd !important;
            border-color: #ff5b57 !important;
        }
    </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.

<form id="form1" runat="server">
       <div class="container">
           <div class="row">
               <div class="col-lg-5 col-md-6 col-sm-8 col-xl-12 " style="margin: auto; float: initial; padding-top: 12%">
                   <div class="row userInfo">

                       <div class="panel panel-default ">
                           <div class="panel-heading">
                               <h3 class="panel-title" style="text-align: center; font-weight: bold">
                                   <a class="collapseWill">Login to your Account</a>
                               </h3>
                           </div>
                           <div id="collapse1" class="panel-collapse collapse in">
                               <div class="panel-body">
                                   <fieldset>
                                       <div class="form-group">
                                           <div class="col-md-"></div>
                                           <label class="col-md-12 control-label" for="prependedcheckbox">
                                               User ID
                                           </label>
                                           <div class="col-md-12">
                                               <div class="input-group">
                                                   <span class="input-group-addon">
                                                       <i class="fa fa-user"></i>
                                                   </span>
                                                   <asp:TextBox ID="txtUserName" CssClass="form-control" placeholder="Enter User ID" runat="server"></asp:TextBox>
                                               </div>
                                               <asp:Label ID="lblErrUserName" CssClass="help-block" runat="server" Text="" ForeColor="White"></asp:Label>
                                           </div>

                                           <label class="col-md-12 control-label" for="prependedcheckbox">
                                               Password
                                           </label>
                                           <div class="col-md-12">
                                               <div class="input-group">
                                                   <span class="input-group-addon">
                                                       <i class="fa fa-lock"></i>
                                                   </span>
                                                   <asp:TextBox ID="txtPassword" CssClass="form-control" placeholder="Enter Your Password" runat="server" TextMode="Password"></asp:TextBox>
                                               </div>
                                               <asp:Label ID="lblErrPassword" CssClass="help-block" runat="server" Text="" ForeColor="White"></asp:Label>
                                           </div>

                                           <div class="col-md-12">
                                               <div class="col-lg-6">
                                                   <asp:CheckBox ID="chbRemember" Visible="false" runat="server" Text="Remember" />
                                               </div>
                                               <div class="col-lg-6">
                                                   <div class="input-group" style="width: 100%">
                                                       <asp:Button ID="btnLogin" CssClass="btn btn-success" Text="Login" OnClientClick="return FunForLoginValidation()" runat="server" Style="width: 100%" />
                                                   </div>
                                               </div>
                                           </div>
                                       </div>
                                   </fieldset>

                               </div>
                           </div>

                           <div class="panel-heading">
                               <div class="panel-title" style="text-align: right">
                                   <a class="collapseWill" href="SellerForgetPassword.aspx" style="font-size: x-small">Forgot Username or Password?
                                   </a>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </form>

KeyPoints

• The above content has login Controls like username, password, textbox, and login button.
  
   

Validation Script 

<script>
       function FunForLoginValidation() {
           var objValid = true;
           var objUserName = $("[id$=txtUserName]").val();
           var objPassword = $("[id$=txtPassword]").val();
           if (objUserName == "") {
               $('[id$=lblErrUserName]').text("User Name is required");
               $('[id$=lblErrUserName]').css("color", "#FF0000");
               $("[id$=txtUserName]").addClass("Error-control");
               objValid = false;
           }
           else {
               $('[id$=lblErrUserName]').text("");
               $('[id$=lblErrUserName]').css("color", "#FFFFFF");
               $("[id$=txtUserName]").removeClass("Error-control");
           }

           if (objPassword == "") {
               $('[id$=lblErrPassword]').text("Password is required");
               $('[id$=lblErrPassword]').css("color", "#FF0000");
               $("[id$=txtPassword]").addClass("Error-control");
               objValid = false;
           }
           else {
               $('[id$=lblErrPassword]').text("");
               $('[id$=lblErrPassword]').css("color", "#FFFFFF");
               $("[id$=txtPassword]").removeClass("Error-control");
           }
           return objValid;
       }
       function AcceptAlphanumeric(evt) {
           var key = evt.keyCode;
           return ((key >= 48 && key <= 57) || (key >= 65 && key <= 90) || (key >= 95 && key <= 122));
       }
       function NotAllowSingleDoubleQuotes(e) {
           var charCode = e.keyCode;
           if (charCode == 34)
               return false;
           if (charCode == 39)
               return false;
       }
   </script>

Validation Output