Categories
Website Design

Create Google Style Login Form Using Bootstrap

Create Google Style Login Form Using Bootstrap

Hi friends, in this post we will learn how to create google style login using bootstrap. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Read more about bootstrap here. In Previous post we have learnt Get Selected Row Data in GridView on Button Click in ASP.Net, 1045 – Access denied for user ‘root’@’localhost’ (using password: NO) , MySQL to SQL Server Data Migration Through SSIS , ERROR [IM014] [Microsoft][ODBC Driver Manager] The specified DSN contains an architecture mismatch between the Driver and Application.

Create Google Style Login Form Using Bootstrap

HTML Markup:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Create Google Style Login Form Using Bootstrap</title>
<link href="StyleSheet.css" rel="stylesheet" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">  
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<h3>Create Google Style Login Form Using Bootstrap</h3>
<div class="account-wall">
<img class="profileimg" src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png" alt="">
<form class="form-signin">
<input type="text" class="form-control" placeholder="Email" required autofocus>
<input type="password" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<a href="#" class="pull-right needhlp">Need help? </a><span class="clearfix"></span>
</form>
</div>
<a href="#" class="text-center newacc">Create an account </a>
</div>
</div>
</div>
</body>
</html>

CSS:

.form-signin
{
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}
.form-signin .form-signin-heading
{
    margin-bottom: 10px;
}
.form-signin .checkbox
{
    font-weight: normal;
}
.form-signin .form-control
{
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.form-signin .form-control:focus
{
    z-index: 2;
}
.form-signin input[type="text"]
{
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.form-signin input[type="password"]
{
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.account-wall
{
    margin-top: 20px;
    padding: 40px 0px 20px 0px;
    background-color: #f7f7f7;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

.profileimg
{
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    display: block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.needhlp
{
    margin-top: 10px;
}
.newacc
{
    display: block;
    margin-top: 10px;
}