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

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> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <!-- Bu Tasarım By ebubekir bastama tarafından kodlanmıştır. --> <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"> <!--Butonlar--> <div class="ortala"> <!-- Login Giriş Modalı Butonu --> <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> <!--Butonlar--> <!-- Login Giriş Modalı --> <div class="modal fade" id="LoginGiris"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Eçk Login Girişi</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <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> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Kapat</button> </div> </div> </div> </div> <!-- Login Giriş Modalı --> <!-- Üye Ol Modalı --> <div class="modal fade" id="Uyeol"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Eçk Üye Olma Paneli</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <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> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Kapat</button> </div> </div> </div> </div> <!-- üye ol Modalı --> </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 Material Dashboard
login-form
Login Form
Bootstrap 4 login from

Questions / Comments: