Bootstrap Snippet login.html using HTML Bootstrap

"login.html"
Bootstrap 4.1.1 Snippet by harishnegi

4.1.1

1.1K 1 Fav

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <div class="container"> <br> <p class="text-center">More bootstrap 4 components on <a href="http://webublogoverflow.com/">webublogoverflow.com</a></p> <hr> <div class="row"> <aside class="col-sm-4"> <p>with us</p> <div class="card"> <article class="card-body"> <a href="" class="float-right btn btn-outline-primary">Sign up</a> <h4 class="card-title mb-4 mt-1">Choose us</h4> <form> <div class="form-group"> <label>Your email</label> <input name="" class="form-control" placeholder="Email" type="email"> </div>  <div class="form-group"> <a class="float-right" href="#">Forgot?</a> <label>Your password</label> <input class="form-control" placeholder="******" type="password"> </div>  <div class="form-group"> <div class="checkbox"> <label> <input type="checkbox"> Save password </label> </div>  </div>  <div class="form-group"> <button type="submit" class="btn btn-primary btn-block"> Login </button> </div>  </form> </article> </div>  </aside>  <aside class="col-sm-4"> <p>Inter in</p> <div class="card"> <article class="card-body"> <a href="" class="float-right btn btn-outline-primary">Sign up</a> <h4 class="card-title mb-4 mt-1">Sign in</h4> <p> <a href="" class="btn btn-block btn-outline-info"> <i class="fab fa-twitter"></i> Login via Twitter</a> <a href="" class="btn btn-block btn-outline-primary"> <i class="fab fa-facebook-f"></i> Login via facebook</a> </p> <hr> <form> <div class="form-group"> <input name="" class="form-control" placeholder="Email or login" type="email"> </div>  <div class="form-group"> <input class="form-control" placeholder="******" type="password"> </div>  <div class="row"> <div class="col-md-6"> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block"> Login </button> </div>  </div> <div class="col-md-6 text-right"> <a class="small" href="#">Forgot password?</a> </div> </div>  </form> </article> </div>  </aside>  <aside class="col-sm-4"> <p>Our map</p> <div class="card"> <article class="card-body"> <iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d15916.085640414378!2d33.185751550000006!3d-4.2160796!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2stz!4v1538627227928" width="320" height="330" frameborder="0" style="border:0" allowfullscreen></iframe> </article> </div>  </aside>  </div>  </div>  <br><br><br> <footer class="kilimanjaro_area">  <div class="foo_top_header_one section_padding_100_70"> <div class="container"> <div class="row"> <div class="col-12 col-md-6 col-lg-3"> <div class="kilimanjaro_part"> <h5>About Us</h5> <p>It includes rich features & contents. It's designed & developed based on One Page/ Multi-page Layout,blog themes,world press themes and blogspot. You can use any layout from any demo anywhere.</p> <p>webblogoverflow is completely creative, clean & 100% responsive website. Put your business into next level with Webublogoverflow.</p> </div> <div class="kilimanjaro_part m-top-15"> <h5>Social Links</h5> <ul class="kilimanjaro_social_links"> <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i> Facebook</a></li> <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</a></li> <li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i> Pinterest</a></li> <li><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i> YouTube</a></li> <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i> Linkedin</a></li> </ul> </div> </div> <div class="col-12 col-md-6 col-lg-3"> <div class="kilimanjaro_part"> <h5>Tags Widget</h5> <ul class=" kilimanjaro_widget"> <li><a href="#">Classy</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Creative</a></li> <li><a href="#">One Page</a></li> <li><a href="#">Multipurpose</a></li> <li><a href="#">Minimal</a></li> <li><a href="#">Classic</a></li> <li><a href="#">Medical</a></li> </ul> </div> <div class="kilimanjaro_part m-top-15"> <h5>Important Links</h5> <ul class="kilimanjaro_links"> <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Terms & Conditions</a></li> <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>About Licences</a></li> <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Help & Support</a></li> <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Careers</a></li> <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Privacy Policy</a></li> <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Community & Forum</a></li> </ul> </div> </div> <div class="col-12 col-md-6 col-lg-3"> <div class="kilimanjaro_part"> <h5>Latest News</h5> <div class="kilimanjaro_blog_area"> <div class="kilimanjaro_thumb"> <img class="img-fluid" src="https://3.bp.blogspot.com/--C1wpaf_S4M/W7V__10nRoI/AAAAAAAAK24/1NSfapuYSIY0f0wzXY9NgoH0FjQLT07YACKgBGAs/s1600/maxresdefault.jpg" alt=""> </div> <a href="#">Your Blog Title Goes Here</a> <p class="kilimanjaro_date">21 Jan 2018</p> <p>Lorem ipsum dolor sit amet, consectetur</p> </div> <div class="kilimanjaro_blog_area"> <div class="kilimanjaro_thumb"> <img class="img-fluid" src="https://3.bp.blogspot.com/--C1wpaf_S4M/W7V__10nRoI/AAAAAAAAK24/1NSfapuYSIY0f0wzXY9NgoH0FjQLT07YACKgBGAs/s1600/maxresdefault.jpg" alt=""> </div> <a href="#">Your Blog Title Goes Here</a> <p class="kilimanjaro_date">21 Jan 2018</p> <p>Lorem ipsum dolor sit amet, consectetur</p> </div> <div class="kilimanjaro_blog_area"> <div class="kilimanjaro_thumb"> <img class="img-fluid" src="https://3.bp.blogspot.com/--C1wpaf_S4M/W7V__10nRoI/AAAAAAAAK24/1NSfapuYSIY0f0wzXY9NgoH0FjQLT07YACKgBGAs/s1600/maxresdefault.jpg" alt=""> </div> <a href="#">Your Blog Title Goes Here</a> <p class="kilimanjaro_date">21 Jan 2018</p> <p>Lorem ipsum dolor sit amet, consectetur</p> </div> </div> </div> <div class="col-12 col-md-6 col-lg-3"> <div class="kilimanjaro_part"> <h5>Quick Contact</h5> <div class="kilimanjaro_single_contact_info"> <h5>Phone:</h5> <p>+255 789 54 50 40 <br> +2255 766 90 94 00</p> </div> <div class="kilimanjaro_single_contact_info"> <h5>Email:</h5> <p>support@webblogoverflow.com <br> luckmoshy@gmail.com</p> </div> </div> <div class="kilimanjaro_part"> <h5>Latest Works</h5> <div class="kilimanjaro_works"> <a class="kilimanjaro_works_img" href="img/gallery/1.jpg"><img src="img/gallery/1.jpg" alt=""></a> <a class="kilimanjaro_works_img" href="img/gallery/4.jpg"><img src="img/gallery/4.jpg" alt=""></a> <a class="kilimanjaro_works_img" href="img/gallery/5.jpg"><img src="img/gallery/5.jpg" alt=""></a> <a class="kilimanjaro_works_img" href="img/gallery/7.jpg"><img src="img/gallery/7.jpg" alt=""></a> <a class="kilimanjaro_works_img" href="img/gallery/10.jpg"><img src="img/gallery/10.jpg" alt=""></a> <a class="kilimanjaro_works_img" href="img/gallery/11.jpg"><img src="img/gallery/11.jpg" alt=""></a> </div> </div> </div> </div> </div> </div>  <div class=" kilimanjaro_bottom_header_one section_padding_50 text-center"> <div class="container"> <div class="row"> <div class="col-12"> <p>© All Rights Reserved by <a href="#">Webublogoverflow.blogspot -(with all love)<i class="fa fa-love"></i></a></p> </div> </div> </div> </div> </footer>

Related: See More

Vue Black Dashboard

Vue Black Dashboard

login-form

Login Form

Bootstrap 4 login from

Bootstrap 4 login from

Questions / Comments:

Posting GuidelinesFormatting