"Bootstrap Login Modal"
Bootstrap 4.1.1 Snippet by Rakibul Islam

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> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Customized bootstrap login forms with multiple variants. Easy to customize."> <meta name="keywords" content="Bootstrap Modal, Login Form, Modal Login, Registration Form, Form, Bootstrap, Login, Registration"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Modal Login</title> <!-- font awesome v5.15.1 free version --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" /> </head> <body> <div class="main-container"> <a href="https://github.com/RakibDevs/Login-Registration-Form-Bootstrap-4/"> <img alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" style="position:absolute;top:0;right:0;border:0;"> </a> <h3 class="text-center mt-4">Bootstrap 4 Modal Login</h3> <p class="m-0 p-0 text-center text-muted text-12 ">Version 1.0.0 © <a href="http://rakibhstu.com">Md. Rakibul Islam</a></p> <div class="row text-center mt-3"> <div class="col-sm-4 "> <div class="button-card"> <p class="text-muted"><strong class="text-danger text-uppercase">Style 1</strong> Click the button to preview</p> <div class="action-buttons mb-3 mt-2"> <!-- action button for modal style 1 start --> <a href="#loginModal1" data-toggle="modal" class="btn btn-theme btn-primary text-white"> Login</a> <a href="#registerModal1" data-toggle="modal" class="btn btn-theme btn-success text-white">Register</a> <!-- action button for modal style 1 end --> </div> <img src="https://rakibul.dev/demo/style-1-demo-dark.jpg"> </div> </div> <div class="col-sm-4 "> <div class="button-card mt-4"> <p class="text-muted"><strong class="text-danger text-uppercase">Style 2</strong> Click the button to preview</p> <div class="action-buttons mb-3 mt-2"> <!-- action button for modal style 2 start --> <a href="#loginModal2" data-toggle="modal" class="btn btn-theme btn-primary text-white"> Login</a> <a href="#registerModal2" data-toggle="modal" class="btn btn-theme btn-success text-white">Register</a> <!-- action button for modal style 2 end --> </div> <img src="https://rakibul.dev/demo/style-2-demo-dark.jpg"> </div> </div> <div class="col-sm-4 "> <div class="button-card"> <p class="text-muted"><strong class="text-danger text-uppercase">Style 3</strong> Click the button to preview</p> <div class="action-buttons mb-3 mt-2"> <!-- action button for modal style 3 start --> <a href="#loginModal3" data-toggle="modal" class="btn btn-theme btn-primary text-white"> Login</a> <a href="#registerModal3" data-toggle="modal" class="btn btn-theme btn-success text-white">Register</a> <!-- action button for modal style 3 end --> </div> <img src="https://rakibul.dev/demo/style-3-demo-dark.jpg"> </div> </div> </div> </div> <!--modal style 1 start --> <!-- login modal 1 --> <div id="loginModal1" class="modal-style-1 dark modal "> <div class="modal-dialog modal-login"> <div class="modal-content"> <div class="modal-header p-0 mb-3 mt-3"> <h4 class="modal-title">login</h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <!-- dont forget to add action and action method --> <form action="" method=""> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope"></i></span> <input type="email" class="form-control" name="email" placeholder="Enter email address" required="required"> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-lock"></i></span> <input type="password" class="form-control" name="password" placeholder="Enter password" required="required" autocomplete="on"> </div> </div> <div class="row pl-1 pr-1"> <div class="col text-left"> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="item_checkbox" name="item_checkbox" value="option1"> <span class="custom-control-label"> Remember Me</span> </label> </div> <div class="col text-right hint-text pt-0"> <a href="" class="text-danger">Forgot Password?</a> </div> </div> <div class="form-group text-center"> <button type="submit" class="btn btn-primary btn-signin">login</button> </div> <p class="hint-text mt-3">or login with</p> <!-- social login area --> <div class="social-login text-center"> <a class=" btn-facebook text-uppercase" href="redirect/facebook"><i class="fab fa-facebook-f mr-2 ml-2"></i> </a> <a class=" btn-google text-uppercase" href="redirect/google"><i class="fab fa-google mr-2 ml-2"></i></a> <a class=" btn-twitter text-uppercase" href="redirect/twitter"><i class="fab fa-twitter mr-2 ml-2"></i></a> </div> </form> </div> <div class="text-center mb-3">Don't have an account? <a class="register" href="#registerModal1" data-dismiss="modal" data-toggle="modal">Register</a></div> </div> </div> </div> <!-- register modal 1 --> <div id="registerModal1" class="modal-style-1 dark modal "> <div class="modal-dialog modal-login"> <div class="modal-content"> <div class="modal-header p-0 mb-3 mt-3"> <h4 class="modal-title">Register</h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <!-- dont forget to add action and action method --> <form action="" method=""> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-user"></i></span> <input type="text" class="form-control" name="name" placeholder="Enter your name" required="required"> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope"></i></span> <input type="email" class="form-control" name="email" placeholder="Enter email address" required="required"> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-lock"></i></span> <input type="password" class="form-control" name="password" placeholder="Enter password" required="required" autocomplete="on"> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-eye-slash"></i></span> <input type="password" class="form-control" name="password_confirmation" placeholder="Retype password" required="required" autocomplete="on"> </div> </div> <div class="form-group text-center"> <button type="submit" class="btn btn-primary btn-signin">Register</button> </div> <p class="hint-text mt-3">or register with</p> <!-- social login area --> <div class="social-login text-center"> <a class=" btn-facebook text-uppercase" href="redirect/facebook"><i class="fab fa-facebook-f mr-2 ml-2"></i> </a> <a class=" btn-google text-uppercase" href="redirect/google"><i class="fab fa-google mr-2 ml-2"></i></a> <a class=" btn-twitter text-uppercase" href="redirect/twitter"><i class="fab fa-twitter mr-2 ml-2"></i></a> </div> </form> </div> <div class="text-center mb-3">Already have an account? <a class="login" href="#loginModal1" data-dismiss="modal" data-toggle="modal">Login</a></div> </div> </div> </div> <!--modal style 1 end --> <!--modal style 2 start --> <!-- login modal 2 --> <div id="loginModal2" class="modal-style-2 dark modal "> <div class="modal-dialog modal-login"> <div class="modal-content"> <div class="modal-header p-0"> <h4 class="modal-title">Login</h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <!-- dont forget to add action and action method --> <form action="" method="" class="mt-3"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-user"></i></span> <input type="text" class="form-control" name="username" placeholder="Enter your username" required="required"> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-lock"></i></span> <input type="password" class="form-control" name="password" placeholder="Enter password" required="required" autocomplete="on"> </div> </div> <div class="row pl-1 pr-1"> <div class="col text-left"> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="item_checkbox" name="item_checkbox" value="option1"> <span class="custom-control-label"> Remember Me</span> </label> </div> <div class="col text-right hint-text pt-0"> <a href="" class="text-danger">Forgot Password?</a> </div> </div> <div class="form-group text-center mt-2 mb-0"> <button type="submit" class="btn btn-primary btn-sm">Login</button> </div> <p class="hint-text mt-0">or login with</p> <div class="social-login text-center"> <a class=" btn-facebook text-uppercase" href="redirect/facebook"><i class="fab fa-facebook-f mr-2 ml-2"></i> </a> <a class=" btn-facebook text-uppercase" href="redirect/google"><i class="fab fa-google mr-2 ml-2"></i></a> <a class=" btn-facebook text-uppercase" href="redirect/twitter"><i class="fab fa-twitter mr-2 ml-2"></i></a> </div> </form> </div> <div class="modal-footer">Don't have an account? <a href="#registerModal2" data-dismiss="modal" data-toggle="modal"> Register</a></div> </div> </div> </div> <!-- register modal 2 --> <div id="registerModal2" class="modal-style-2 dark modal "> <div class="modal-dialog modal-login"> <div class="modal-content"> <div class="modal-header p-0"> <h4 class="modal-title">Register</h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <form action="" method="post" class="mt-3"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-user"></i></span> <input type="text" class="form-control" name="name" placeholder="Enter your name" required="required"> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope"></i></span> <input type="text" class="form-control" name="email" placeholder="Enter email address" required="required"> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-lock"></i></span> <input type="password" class="form-control" name="password" placeholder="Enter password" required="required" autocomplete="on"> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-eye-slash"></i></span> <input type="password" class="form-control" name="password_confirmation" placeholder="Retype password" required="required" autocomplete="on"> </div> </div> <div class="form-group text-center"> <button id="signup-button" type="submit" class="btn btn-primary btn-sm">Register</button> </div> </form> </div> <!-- social icons --> <p class="hint-text">or register with</p> <div class="social-login text-center mb-2"> <a class=" btn-facebook text-uppercase" href="redirect/facebook"><i class="fab fa-facebook-f mr-2 ml-2"></i> </a> <a class=" btn-facebook text-uppercase" href="redirect/google"><i class="fab fa-google mr-2 ml-2"></i></a> <a class=" btn-facebook text-uppercase" href="redirect/twitter"><i class="fab fa-twitter mr-2 ml-2"></i></a> </div> <div class="modal-footer">Already have an account? <a href="#loginModal2" data-dismiss="modal" data-toggle="modal"> Login</a></div> </div> </div> </div> <!--modal style 2 end --> <!--modal style 3 start --> <!-- login modal 3 --> <div id="loginModal3" class="modal-style-3 dark modal "> <div class="modal-dialog modal-login"> <div class="modal-content pt-3"> <div class="modal-header p-0"> <!-- include your company logo here --> <h4 class="modal-title"><img src="assets/logo.png"></h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <p class="ml-3">Welcome back!</p> <!-- dont forget to add action and action method --> <form action="" method=""> <div class="form-group"> <input type="email" class="form-control" placeholder="Enter email address" required="" value="" name="email"> <i class="fa fa-envelope"></i> </div> <div class="form-group"> <input type="password" name="password" class="form-control" placeholder="Enter password" required="" value=""> <i class="fa fa-lock"></i> </div> <div class="row"> <div class="col text-left"> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="item_checkbox" name="item_checkbox" value="option1"> <span class="custom-control-label"> Remember Me</span> </label> </div> <div class="col text-right"> <a href="" class="text-danger">Forgot Password ?</a> </div> </div> <div class="form-group text-center mt-3"> <!-- submit button --> <button id="signup-button" type="submit" class="btn btn-primary btn-signin">Login</button> </div> </form> </div> <div class="text-center mb-3">Don't have an account? <a class="register" href="#registerModal3" data-dismiss="modal" data-toggle="modal">Register</a></div> </div> </div> </div> <!-- register modal 3 --> <div id="registerModal3" class="modal-style-3 dark modal "> <div class="modal-dialog modal-login"> <div class="modal-content pt-3"> <div class="modal-header p-0"> <!-- add your own logo here --> <h4 class="modal-title "><img src="assets/logo.png"></h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <p class="ml-3">Create your account!</p> <!-- dont forget to add action and action method --> <form action="" method=""> <div class="form-group"> <input type="text" class="form-control" name="name" placeholder="Enter your name" required="" value=""> <i class="fa fa-user"></i> </div> <div class="form-group"> <input type="email" class="form-control" name="email" placeholder="Enter email address" required="" value=""> <i class="fa fa-envelope"></i> </div> <div class="form-group"> <input type="password" name="password" class="form-control" placeholder="Enter password" required="" value=""> <i class="fa fa-lock"></i> </div> <div class="form-group"> <input type="password" class="form-control" name="password_confirmation" placeholder="Confirm Password" required=""> <i class="fa fa-eye-slash"></i> </div> <div class="form-group text-center mt-3"> <button id="signup-button" type="submit" class="btn btn-primary btn-signin">Register</button> </div> </form> <div class="text-center mb-3">Already have an account? <a class="login" href="#loginModal3" data-dismiss="modal" data-toggle="modal">Login</a></div> </div> </div> </div> </div> <!--modal style 3 end --> <!-- include scripts here --> </body> </html>
/*-------define root colors---------*/ :root { --color-facebook: #3b5998; --color-google: #ea4335; --color-twitter: #1da1f2; --style-1-color: #009688; --style-2-color: #009688; --style-3-color: #009688; } /*------------------------------------------------- * Modal Style 1 CSS start *-----------------------------------------------*/ .modal-style-1 .modal-login { width: 350px; font-size: 13px; } .modal-style-1 .modal-login .modal-header { border-bottom: none; position: relative; justify-content: center; } .modal-style-1 .modal-login h4 { color: var(--style-1-color); text-align: center; font-size: 18px; margin-top: 20px; border-bottom: 0; text-transform: uppercase; line-height: 1; letter-spacing: 3px; font-weight: 900; width: 100%; } .modal-style-1 .modal-header .close{ position: absolute; right: 20px; } .modal-style-1 .close:focus, .modal-style-1 .close:active { outline: none !important; box-shadow: none; } .modal-style-1 .modal-login a{ text-decoration: none; } .modal-style-1 .modal-login form{ width: 280px; margin: 0 auto; } .modal-style-1 .modal-login span.input-group-addon { width: 60px; text-align: center; border-radius: 25px 0 0 25px; border: 1px solid var(--style-1-color); padding: 8px; margin-right: 5px; background: var(--style-1-color); color: #fff; } .modal-style-1 .modal-login span.input-group-addon i{ font-size: 16px; } .modal-style-1 input.form-control { border-radius: 0 25px 25px 0; font-size: 13px; border: 1px solid var(--style-1-color); } .modal-style-1 .btn-signin { border-radius: 25px; width: 100%; text-transform: uppercase; letter-spacing: 1.5px; background-color: var(--style-1-color); border: 1px solid var(--style-1-color); } .modal-style-1 p.hint-text { text-align: center; } .modal-style-1 .register{ color: var(--style-1-color); font-weight: 600px; } .modal-style-1 .social-login a { text-decoration: none; color: #fff; margin: 2px; height: 30px; display: inline-block; width: 30px; padding: 5px 0; text-align: center; cursor: pointer; } .modal-style-1 .btn-facebook{ background-color: var(--color-facebook); } .modal-style-1 .btn-google{ background-color: var(--color-google); } .modal-style-1 .btn-twitter{ background-color: var(--color-twitter); } .dark.modal-style-1 .modal-content{ background: #0b0b1f; color: #fff; } .dark.modal-style-1 .close, .modal-style-1.dark .modal-login h4{ color:#fff; } .dark .text-danger{ color: #777!important; } @media only screen and (max-width: 360px) { .modal-style-1 .modal-login {width: 100%; margin:5px;} .modal-style-1 .modal-login form{width: 100%;} } /*------------------------------------------------- * Modal Style 2 CSS start *-----------------------------------------------*/ .modal-style-2 .modal-login { width: 350px; } .modal-style-2 .modal-login a{ text-decoration: none !important; } .modal-style-2 .modal-login .modal-content { padding: 20px; border-radius: 5px; border: none; } .modal-style-2 .modal-login .modal-header { border-bottom: none; position: relative; justify-content: center; } .modal-style-2 .modal-login .close { position: absolute; top: -10px; right: -10px; } .modal-style-2 .close:focus, .modal-style-2 .close:active { outline: none !important; box-shadow: none; } .modal-style-2 .modal-login h4 { color: var(--style-2-color); text-align: center; font-size: 18px; margin-top: 0; border-bottom: 0; text-transform: uppercase; line-height: 1; letter-spacing: 3px; font-weight: bold; } .modal-style-2 .modal-login .modal-content { color: #999; margin-bottom: 15px; background: #fff; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); padding: 25px; } .modal-style-2 .modal-login .form-group { margin-bottom: 20px; } .modal-style-2 .modal-login label { font-weight: normal; font-size: 13px; } .modal-style-2 .modal-login .modal-body { padding: 0; } .modal-style-2 .modal-login .form-control { min-height: 38px; padding-left: 5px; box-shadow: none !important; border-width: 0 0 1px 0; border-radius: 0; font-size: 13px } .modal-style-2 .modal-login .form-control:focus { border-color: #ccc; } .modal-style-2 .modal-login .input-group-addon { max-width: 42px; text-align: center; background: none; border-width: 0 0 1px 0; padding-left: 5px; border-radius: 0; margin-right: 10px; padding-top: 15px; } .modal-style-2 .modal-login .btn { font-size: 15px; font-weight: bold; background: var(--style-2-color); border-radius: 25px; border: none; min-width: 140px; padding: 10px; outline: none !important; } .modal-style-2 .modal-login .btn:hover, .modal-style-2 .modal-login .btn:focus { background: var(--style-2-color); } .modal-style-2 input:-internal-autofill-selected { background-color: transparent !important; } .modal-style-2 .modal-login .hint-text { text-align: center; padding-top: 5px; font-size: 13px; } .modal-style-2 .modal-login .modal-footer { color: #999; border-color: #dee4e7; text-align: center; margin: 0 -25px -25px; font-size: 13px; justify-content: center; } .modal-style-2 .modal-login a { color: #fff; text-decoration: underline; } .modal-style-2 .modal-login a:hover { text-decoration: none; } .modal-style-2 .modal-login a { color: var(--style-2-color); text-decoration: none; } .modal-style-2 .modal-login a:hover { text-decoration: underline; } .modal-style-2 .modal-login .fa { font-size: 16px; } .dark.modal-style-2 .modal-content{ background: #0b0b1f !important; color: #fff!important; } .dark.modal-style-2 .close, .modal-style-2.dark .modal-login h4{ color:#fff!important; } .dark.modal-style-2 .modal-login .form-control{ background: transparent !important; color: #fff; border-color: #777; } .dark.modal-style-2 .modal-login .input-group-addon{ color:#9E9E9E; } .dark.modal-style-2 .modal-login .modal-footer{ border: none; } .dark.modal-style-2 .modal-login .btn{ background: #70807e; } .dark .text-danger{ color: #777!important; } @media only screen and (max-width: 360px) { .modal-style-2 .modal-login {width: 100%; margin:5px;} .modal-style-2 .modal-login form{width: 100%;} } /*------------------------------------------------- * Modal Style 1 CSS start *-----------------------------------------------*/ .modal-style-3 .modal-login { width: 350px; font-size: 13px; } .modal-style-3 .modal-login .modal-header { border-bottom: none; position: relative; justify-content: center; } .modal-style-3 .modal-login h4 { text-align: center; font-size: 18px; width: 100%; } .modal-style-3 .modal-header .close{ position: absolute; right: 10px; } .modal-style-3 .close:focus, .modal-style-3 .close:active { outline: none !important; box-shadow: none; } .modal-style-3 .modal-login a{ text-decoration: none !important; } .modal-style-3 .modal-login form{ width: 280px; margin: 0 auto; } .modal-style-3 .modal-login .form-group{ position: relative; } .modal-style-3 .modal-login .form-control { height: auto; min-height: 35px; border: 1px solid #eaeaea; padding: 0 10px; background-color: #fff; font-size: 13px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; padding-left: 40px; border-radius: 25px; } .modal-style-3 .modal-login .form-control ~ i { position: absolute; top: 12px; left: 15px; color: var(--style-3-color); } .modal-style-3 .btn-signin { border-radius: 25px; width: 100%; text-transform: uppercase; letter-spacing: 1.5px; background-color: var(--style-3-color); border: 1px solid var(--style-3-color); } .dark.modal-style-3 .modal-content{ background: #0b0b1f; color: #fff; } .dark.modal-style-3 .close, .modal-style-1.dark .modal-login h4{ color:#fff; } .dark .text-danger{ color: #777!important; } @media only screen and (max-width: 360px) { .modal-style-3 .modal-login {width: 100%; margin:5px;} .modal-style-3 .modal-login form{width: 100%;} } /*modal style 3 end*/ /*------extra css----------*/ .main-container{ width:1140px; margin: 0 auto; } .text-12{ font-size: 12px; } .button-card { margin: 0 auto; box-shadow: 1px 2px 5px 2px #d1d1d1; padding: 20px; border-radius: 5px; } .button-card img { border: 1px solid #f1f1f1; border-radius: 5px; max-height: 350px; position: relative; } .btn-theme{ width: 100px; height: 35px; padding: 3px; border-radius: 26px; } @media only screen and (max-width: 1140px) { .main-container{ width: 100%; margin: 0 15px;} } @media only screen and (max-width: 480px) { .button-card img {width: 100%; height: auto;} }

Related: See More

Datepicker
arrow key navigation thumbnail gallery modal view
Fancy subscribe modal (md, lg) with delay functionality on page load
login-form

Questions / Comments: