Table of Contents
Simple login form with side demo image using bootstrap – Codewithrandom
Welcomeπ to Code With Random blog. In this blog, we learn how to create a login form. We use HTML & CSS ,bootstrap for login form. Hope you enjoy our blog so let’s start with a basic HTML& bootstrap structure for the login form.
HTML&Bootstrap code
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://use.fontawesome.com/f59bcd8580.js"></script>
<div class="container">
<div class="row m-5 no-gutters shadow-lg">
<div class="col-md-6 d-none d-md-block">
<img src="https://images.unsplash.com/photo-1566888596782-c7f41cc184c5?ixlib=rb-1.2.1&auto=format&fit=crop&w=2134&q=80" class="img-fluid" style="min-height:100%;" />
</div>
<div class="col-md-6 bg-white p-5">
<h3 class="pb-3">Login Form</h3>
<div class="form-style">
<form>
<div class="form-group pb-3">
<input type="email" placeholder="Email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div class="form-group pb-3">
<input type="password" placeholder="Password" class="form-control" id="exampleInputPassword1">
</div>
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center"><input name="" type="checkbox" value="" /> <span class="pl-2 font-weight-bold">Remember Me</span></div>
<div><a href="#">Forget Password?</a></div>
</div>
<div class="pb-2">
<button type="submit" class="btn btn-dark w-100 font-weight-bold mt-2">Submit</button>
</div>
</form>
<div class="sideline">OR</div>
<div>
<button type="submit" class="btn btn-primary w-100 font-weight-bold mt-2"><i class="fa fa-facebook" aria-hidden="true"></i> Login With Facebook</button>
</div>
<div class="pt-4 text-center">
Get Members Benefit. <a href="#">Sign Up</a>
</div>
</div>
</div>
</div>
</div>
There is all HTML&Bootstrap code for the login form. Now, you can see output without CSS, then we write CSS for the login form.
body{
background: #c9ccd1;
}
.form-style input{
border:0;
height:50px;
border-radius:0;
border-bottom:1px solid #ebebeb;
}
.form-style input:focus{
border-bottom:1px solid #007bff;
box-shadow:none;
outline:0;
background-color:#ebebeb;
}
.sideline {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
text-align: center;
color:#ccc;
}
button{
height:50px;
}
.sideline:before,
.sideline:after {
content: '';
border-top: 1px solid #ebebeb;
margin: 0 20px 0 0;
flex: 1 0 20px;
}
.sideline:after {
margin: 0 0 0 20px;
}
This is Great, well designed. I suggest a website that we can get more knowledge about web developing, It helped me to success my various projects. https://w3schoolweb.com/
Use this link to access.