"Basic Registration Form with the new Bootstrap 5 lib"
Bootstrap 4.1.1 Snippet by Bootemplates

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> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> <title>Hello, world!</title> </head> <body> <div class="body"> <div class="card login_div"> <h1>Register</h1> <hr> <form> <div class="row"> <div class="col"> <input type="text" class="form-control" placeholder="First name"> </div> <div class="col"> <input type="text" class="form-control" placeholder="Last name"> </div> </div> <div class="row"> <div class="input-group col"> <span class="input-group-text" id="username">@</span> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="username"> </div> </div> <div class="row"> <div class="input-group col"> <input type="email" class="form-control" placeholder="Email"> </div> </div> <div class="row"> <div class="col-8"> <input type="text" class="form-control" placeholder="Street"> </div> <div class="col-4"> <input type="text" class="form-control" placeholder="Number"> </div> </div> <div class="row"> <div class="col-4"> <input type="text" class="form-control" placeholder="Post Code"> </div> <div class="col-8"> <input type="text" class="form-control" placeholder="Location"> </div> </div> <div class="row"> <div class="form-check" id="check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"> <label class="form-check-label" for="flexCheckDefault"> I agree to the <a href="#">Terms of service</a> </label> </div> </div> <div class="row"> <button type="submit" class="btn btn-success col">Register</button> <div class="col-7"></div> <button type="reset" class="btn btn-danger col">Reset</button> </div> </form> </div> </div> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script> </body> </html>
.body { width: 100vw; height: 100vh; background-color: #001f3f !important; } .login_div { margin: auto; margin-top: calc(50vh - 250px); height: 520px; width: 600px; } .login_div h1 { margin: 15px 25px; } .login_div hr { padding: 0; margin: 0 } .login_div form { margin-top: 20px } .login_div form .row { width: 80%; margin: auto; margin-top: 20px } #check { margin-left: 15px } a { color: gray; font-weight: bold; }

Questions / Comments: