Bootstrap Snippet Bootstrap 4.0 Login or Register using HTML CSS Bootstrap jQuery

"Bootstrap 4.0 Login or Register"
Bootstrap 4.0.0 Snippet by ebubekirbastama

4.0.0 jQuery login

3.4K 0 Fav

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <!DOCTYPE html>  <html> <head> <meta charset="UTF-8"> <title>Eçk Yazılım Login Sayfası</title> <link href="genel.css" rel="stylesheet" type="text/css"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="loginmodaltoolstip.js" type="text/javascript"></script> </head> <body class="bg"> <div class="container">  <div class="ortala">  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#LoginGiris"> Giriş Yapmak için Tıklayınız. </button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Uyeol"> Üye Olmak çin Tıklayınız. </button> </div>   <div class="modal fade" id="LoginGiris"> <div class="modal-dialog"> <div class="modal-content">  <div class="modal-header"> <h4 class="modal-title">Eçk Login Girişi</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div>  <div class="modal-body"> <div class="container"> <form action="/login.php"> <div class="form-group"> <label for="email">Email Adresiniz:</label> <input type="email" data-toggle="tooltip" title="Lütfen Email Adresinizi Giriniz." data-placement="top" class="form-control" id="email" placeholder="Email Adresi" name="email"> </div> <div class="form-group"> <label for="pwd">Şifreniz:</label> <input type="password" data-toggle="tooltip" title="Lütfen Şifrenizi Giriniz." data-placement="top" class="form-control" id="pwd" placeholder="Şifre" name="pswd"> </div> <div class="form-group form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" name="remember">Beni Hatırla </label> </div> <button type="submit" class="btn btn-primary">Giriş Yap</button> </form> </div> </div>  <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Kapat</button> </div> </div> </div> </div>   <div class="modal fade" id="Uyeol"> <div class="modal-dialog"> <div class="modal-content">  <div class="modal-header"> <h4 class="modal-title">Eçk Üye Olma Paneli</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div>  <div class="modal-body"> <div class="container"> <form action="/uyeol.php"> <div class="form-group"> <label for="email">Email Adresiniz:</label> <input type="email" data-toggle="tooltip" title="Lütfen Email Adresinizi Giriniz." data-placement="top" class="form-control" id="email" placeholder="Email Adresi" name="email"> </div> <div class="form-group"> <label for="pwd">Şifreniz:</label> <input type="password" data-toggle="tooltip" title="Lütfen Şifrenizi Giriniz." data-placement="top" class="form-control" id="pwd" placeholder="Şifre" name="pswd"> </div> <div class="form-group"> <label for="pwd">Şifreniz Tekrarı:</label> <input type="password" data-toggle="tooltip" title="Lütfen Şifrenizi Birdaha Giriniz." data-placement="top" class="form-control" id="pwd" placeholder="Şifre" name="pswd"> </div> <div class="form-group form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" name="remember">Beni Hatırla </label> </div> <button type="submit" class="btn btn-danger">Üye Ol</button> </form> </div> </div>  <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Kapat</button> </div> </div> </div> </div>  </div> <div class="container"> <div class="row"> <div class="col-sm-4"> <p class="p">Sıfırdan C# Eğitim Seti ile Sizlerleyiz.</p> <img src="https://404store.com/2018/08/04/cegitimsetii.png" class="rounded-circle" alt="Cinque Terre" width="304" height="236"> </div> <div class="col-sm-4"> <p class="p">Loglama Programımızı halen denemedinizmi?</p> <img src="https://404store.com/2018/08/04/sshot4e3987cdd8eb2.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236"> </div> <div class="col-sm-4"> <p class="p">Web or Desktop Securty example one,two,three</p> <img src="https://404store.com/2018/08/04/Seguridad-informatica.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236"> </div><br> <div class="col-sm-4"> <p class="p">The .rounded-circle class shapes the image to a circle:</p> <img src="https://404store.com/2018/08/04/whatsapp-hikayeler-1487144697-Kopya.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236"> </div> <div class="col-sm-4"> <p class="p">Web or Desktop Securty example one,two,three ...</p> <img src="https://404store.com/2018/08/04/Seguridad-informatica.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236"> </div><br> <div class="col-sm-4"> <p class="p">Sıfırdan C# Eğitim Seti ile Sizlerleyiz.</p> <img src="https://404store.com/2018/08/04/cegitimsetii.png" class="rounded-circle" alt="Cinque Terre" width="304" height="236"> </div> </div> <br> </div> </body> </html>

body, html { height: 100%; } .bg { /* The image used */ background-image: url("https://404store.com/2018/08/05/1.md.png"); /* Full height */ height: 100%; } .ortala { width: 600px; height: 300px; padding: 20px; position: relative; margin: auto; } .p{ color: white; }

$(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); });

Related: See More

Vue Now UI Kit

login-form

Login Form

Bootstrap 4 login from

Bootstrap 4 login from

Questions / Comments:

Posting GuidelinesFormatting