NiceSnippets.com
Bootstrap 4 Login Page Design Like Yahoo
This is bootstrap 4 single login page desing like yahoo. it's a simple sign in page design. in this login page design you can display your website logo,username or email address input,password input,login button,forget password and signup link.
We allows to free snippets of yahoo sign in page html code , you can download full code of bootstrap login page layout. Here in this post i will give you example of bootstrap login form with icons and logo snippet and you will get simple code of html, css and jquery. In bootstrap 4 example of Yahoo login Style using HTML and CSS snippet i give you three tab with html, css and js, you can easily get code of bootstrap gmail login page layout.
<!DOCTYPE html>
<html>
<head>
<title> Yahoo Login </title>
<link rel="stylesheet" type="text/css" href="custom.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body class="bg-light">
<div class="container main-section">
<div class="row">
<div class="col-lg-4 col-sm-8 main-login-box text-center bg-white">
<div class="row">
<div class="col-lg-12 col-sm-12 col-12">
<h1 class="mb-1 p-0 mt-3">Logo!</h1>
</div>
<div class="col-lg-12 col-sm-12 col-12 sign-in">
<p class="mt-4">Sign in</p>
</div>
<div class="col-lg-12 col-md-12 col-12 form-part">
<form>
<div class="row">
<div class="col-lg-12 col-md-12 col-12 mt-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter your email address" autocomplete="off" required>
</div>
</div>
<div class="col-lg-12 col-md-12 col-12 mt-3">
<div class="input-group">
<input type="password" class="form-control pwd" placeholder="Enter your password" required>
</div>
</div>
<div class="col-lg-12 col-md-12 col-12 mt-3">
<button type="submit" class="btn btn-primary w-100 submit-btn">Login</button>
</div>
<div class="col-lg-12 col-md-12 col-12 mt-3 checkbox-part">
<div class="form-check">
<input class="form-check-input p-0" type="checkbox" id="Check">
<a href="#"><label class="form-check-label p-0" for="Check">Stay signed in</label></a>
<a href="//nicesnippets.com" target="_blank" class="float-right mr-4">Difficulty signing in? </a>
</div>
</div>
<div class="col-lg-12 col-md-12 col-12">
<p>Don't have an account? <a href="#">Sign up</a></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.main-login-box{
box-shadow: 1px 2px 14px #000;
position: absolute;
top:50%;
left: 50%;
right: 50%;
transform: translate(-50%,10%);
}
.sign-in p{
color:#000;
font-weight:500;
font-size:20px;
}
.main-login-box h1{
color:#5D2CA0;
}
.form-part a:hover{
text-decoration: none;
}
.checkbox-part{
margin-bottom:180px !important;
}
