Bootstrap Login Page

Ananth G
7y
4.5k
0
0

Blog

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>