Simple login form with side demo image using bootstrap - Codewithrandom

Simple login form with side demo image using bootstrap - Codewithrandom

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.
Output
Simple login form with side demo image using bootstrap - Codewithrandom


CSS code

 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;  
 }  

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output
Simple login form with side demo image using bootstrap - Codewithrandom



Now we have completed our CSS section,  Here is our updated output with CSSHope you like the login form, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

This post teaches us how to create a login form using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

Check out more.....



Post a Comment

Previous Post Next Post