"Registration Form"
Bootstrap 3.0.0 Snippet by Ashwani Rawat

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html lang="en"> <head> <title>Form</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link href="css/style.css" rel="stylesheet"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> </head> <body> <div class="wrapper"> <div class="container"> <div class="registraion-form"> <div class="form-head"> <h1>Form</h1> </div> <div class="team-div"> <div class="team"> <div class="team-name"> Team Name </div> <div class="team-input"> <input type="text"/> </div> </div> </div> <div class="team-div"> <div class="team"> <div class="team-name"> Coach Name </div> <div class="team-input"> <input type="text"/> </div> </div> </div> <div class="team-member"> <div class="text-team"> <h6>No. Of Team Members </h6> <span>(Min. 2 and max. 4)</span> </div> <div class="numeric-team"> <p>1) 2</p> <p>2) 3</p> <p>3) 4</p> </div> </div> <div class="team-div"> <div class="team"> <div class="team-name"> Email Id </div> <div class="team-input"> <input type="Email"/> </div> </div> </div> <div class="team-div"> <div class="team"> <div class="team-name"> Contact Number </div> <div class="team-input"> <input type="number"/> </div> </div> </div> <div class="team-member"> <div class="text-team"> <h6>League (Please Tick) </h6> </div> <div class="numeric-team"> <p>1) rest</p> <p>2) rest</p> <p>3) rest</p> <p>4) rest</p> </div> </div> <div class="participant"> <div class="team-div"> <div class="team"> <div class="team-name"> participant Name(1) </div> <div class="team-input"> <input type="Email"/> </div> </div> <div class="team"> <div class="team-name"> Father Name </div> <div class="team-input"> <input type="Email"/> </div> </div> </div> <div class="team-div"> <div class="team"> <div class="team-name"> Date Of Birth </div> <div class="team-input"> <input type="Email"/> </div> </div> <div class="team"> <div class="team-name"> School Name </div> <div class="team-input"> <input type="Email"/> </div> </div> </div> <div class="team-div"> <div class="team"> <div class="team-name"> participant Name(2) </div> <div class="team-input"> <input type="Email"/> </div> </div> <div class="team"> <div class="team-name"> Father Name </div> <div class="team-input"> <input type="Email"/> </div> </div> </div> <div class="team-div"> <div class="team"> <div class="team-name"> Date Of Birth </div> <div class="team-input"> <input type="Email"/> </div> </div> <div class="team"> <div class="team-name"> School Name </div> <div class="team-input"> <input type="Email"/> </div> </div> </div> </div> <div class="participant"> <div class="team-div"> <div class="team"> <div class="team-name"> participant Name(3) </div> <div class="team-input"> <input type="Email"/> </div> </div> <div class="team"> <div class="team-name"> Father Name </div> <div class="team-input"> <input type="Email"/> </div> </div> </div> <div class="team-div"> <div class="team"> <div class="team-name"> Date Of Birth </div> <div class="team-input"> <input type="Email"/> </div> </div> <div class="team"> <div class="team-name"> School Name </div> <div class="team-input"> <input type="Email"/> </div> </div> </div> <div class="team-div"> <div class="team"> <div class="team-name"> participant Name(4) </div> <div class="team-input"> <input type="Email"/> </div> </div> <div class="team"> <div class="team-name"> Father Name </div> <div class="team-input"> <input type="Email"/> </div> </div> </div> <div class="team-div"> <div class="team"> <div class="team-name"> Date Of Birth </div> <div class="team-input"> <input type="Email"/> </div> </div> <div class="team"> <div class="team-name"> School Name </div> <div class="team-input"> <input type="Email"/> </div> </div> </div> </div> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> </body> </html>
*{margin:0; padding:0;} body{ font-size:16px !important;} .wrapper{ float:left; width:100%;} .registraion-form{float:left;width:100%;border: 1px solid;margin-top: 50px;padding-bottom: 20px;} .form-head h1{margin: 0;text-align: center;font-size: 30px;padding: 5px 0;} .form-head{float:left;width:100%;border-bottom: 1px solid;} .team-div{float:left;width:100%;padding-left: 10px;} .team{float:left;width:50%;=: 10px} .team input{outline: none;border: none;border-bottom: 1px solid;/* margin-left: 50px; */width: 60%;} .team-member{float:left;width: 33.5%;padding-left:10px;margin-top:10px;} .text-team h6{ margin:0; } .text-team span{font-size: 14px;} .text-team{ float:left; width:50%; } .numeric-team{ float:right; width:50%;} .team-name{float:left;width: 30%;} .team-input{float:right;width: 70%;} .participant{ float:left; width:100%; margin-bottom:30px;}

Related: See More

Navbar With Icons
Bootstrap 4 Simple Registration Form
Bootstrap Dual Design Registration Form
login-form

Questions / Comments: