"Login and Registration"
Bootstrap 4.1.1 Snippet by DeusExTaco

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 lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Welcome!</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body class="bg-light"> <div class="container p-2"> <h1 class="row bg-primary text-white rounded ml-1 mr-1 pl-2 mb-3 py-3">Welcome</h1> <div class="row ml-1 mr-1"> <div class="col-md-4 py-5 bg-info text-white"> <h2>Login</h2> <form action="/login" method="POST"> <div class="form-group"> <label for="input_email_2">Email address</label> <input type="text" class="form-control" name="input_email_2" placeholder="Enter email"> </div> <div class="form-group"> <label for="input_password_2">Password</label> <input type="password" class="form-control" name="input_password_2" placeholder="Password"> </div> <input type="submit" value="Submit" class="btn btn-primary"> </form> </div> <div class="col-md-8 py-5 border"> <h2>Register</h2> <form action="/register" method="POST"> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" value="Mr"> <label class="form-check-label" for="inlineRadio1">Mr</label> </div> <div class="form-check form-check-inline mb-2"> <input class="form-check-input" type="radio" name="inlineRadioOptions" value="Mrs"> <label class="form-check-label" for="inlineRadio2">Mrs</label> </div> <div class="form-check form-check-inline mb-2"> <input class="form-check-input" type="radio" name="inlineRadioOptions" value="Ms"> <label class="form-check-label" for="inlineRadio3">Ms</label> </div> <div class="form-group"> <label for="input_fname">First Name</label> <input type="text" class="form-control" name="input_fname" placeholder="First name"> </div> <div class="form-group"> <label for="input_lname">Last Name</label> <input type="text" class="form-control" name="input_lname" placeholder="Last name"> </div> <div class="form-group"> <label for="input_email_1">Email Address</label> <input type="text" class="form-control" name="input_email_1" placeholder="Enter email"> </div> <div class="form-group"> <label for="input_birthday">Birthday</label> <input type="date" class="form-control" name="input_birthday"> </div> <div class="form-group"> <label for="input_password_1">Password</label> <input type="password" class="form-control" name="input_password_1" aria-describedby="passwordHelp" placeholder="****"> <small id="passwordHelp" class="form-text text-muted">Your password must be 8-20 characters long, contain one upper case and one lower case letter, one number, and one special character.</small> </div> <div class="form-group"> <label for="input_conf_password">Confirm Password</label> <input type="password" class="form-control" name="input_conf_password" placeholder="****"> </div> <input type="submit" value="Submit" class="btn btn-primary"> </form> </div> </div> </div> </body> </html>

Related: See More

Vue Material Kit
Bootstrap 4 Simple Registration Form
Bootstrap Dual Design Registration Form
login-form

Questions / Comments: