"Bootstrap 4 registered Form"
Bootstrap 3.3.0 Snippet by ravic9089

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <section > <div class="container"> <div class="row"> <div class="panel-body" style="border:1px solid #ccc;width:100%"> <form class="form-inline" method="post"> <h4 style="color:#fff;background-color:#286090;padding:5px 12px;">New Registration</h4> <!-- <hr style="border-bottom: 1px solid #ccc">--> <label for="id_email" class="control-label col-md-2 requiredField"> User Login Name<span class="asteriskField">*</span> </label> <div class="controls col-md-8 "> <input class="input-md emailinput form-control" name="login-name" placeholder="User Login Name" style="margin-bottom: 10px" type="text" /> </div> <div class="clearfix"></div> <h4 style="color:#fff;background-color:#286090;padding:5px 12px;">Owner Details</h4> <!-- <hr style="border-bottom: 1px solid #ccc">--> <label for="id_email" class="control-label col-md-2 requiredField"> Name<span class="asteriskField">*</span> </label> <div class="controls col-md-4 "> <input class="input-md emailinput form-control" name="fname" placeholder="Enter First Name" style="margin-bottom: 10px" type="text" /> </div> <!-- <label for="id_email" class="control-label col-md-1 requiredField"> E-mail<span class="asteriskField">*</span> </label>--> <div class="controls col-md-4 "> <input class="input-md emailinput form-control" name="lname" placeholder="Enter Last Name" style="margin-bottom: 10px" type="text" /> </div> <div class="clearfix"></div> <label for="id_email" class="control-label col-md-2 requiredField">Gender<span class="asteriskField">*</span> </label> <div class="controls col-md-4 "> <select style="margin-bottom:10px" class="form-control" > <option>Select Gender</option> <option>Male</option> <option>Female</option> <option>Other</option> </select> </div> <div class="clearfix"></div> <label for="id_email" class="control-label col-md-2 requiredField">Date Of Birth<span class="asteriskField">*</span></label> <div class="clearfix clear-my"></div> <div class="controls col-xs-4 col-md-2"> <select class="form-control"> <option>Day</option> </select> </div> <div class="controls col-xs-4 col-md-2"> <select class="form-control"> <option>Month</option> </select> </div> <div class="controls col-xs-4 col-md-2"> <select class="form-control" > <option>Year</option> </select> </div> <div class="clearfix"></div> <h4 style="color:#fff;background-color:#286090;padding:5px 12px;">Agency Details</h4> <label for="id_email" class="control-label col-md-2 requiredField"> Agency Name<span class="asteriskField">*</span> </label> <div class="controls col-md-8 "> <input class="input-md emailinput form-control" name="agency_name" style="margin-bottom: 10px" type="text" /> </div> <div class="clearfix"></div> <label for="id_email" class="control-label col-md-2 requiredField"> Address 1:<span class="asteriskField">*</span> </label> <div class="controls col-md-8 "> <input class="input-md emailinput form-control" name="address-1" style="margin-bottom: 10px" type="text" /> </div> <div class="clearfix"></div> <label for="id_email" class="control-label col-md-2 requiredField"> Address 2: </label> <div class="controls col-md-8 "> <input class="input-md emailinput form-control" name="address-2" style="margin-bottom: 10px" type="text" /> </div> <div class="clearfix"></div> <!-----------------------> <label for="id_email" class="control-label col-md-2 requiredField"> Country<span class="asteriskField">*</span> </label> <div style="margin-bottom: 10px" class="controls col-md-3 "> <select class="form-control" id="sel1"> <option>Select Country</option> </select> </div> <label for="id_email" class="control-label col-md-2 requiredField"> State<span class="asteriskField">*</span> </label> <div style="margin-bottom: 10px" class="controls col-md-3 "> <select class="form-control" id="sel1"> <option>Select State</option> </select> </div> <div class="clearfix"></div> <label for="id_email" class="control-label col-md-2 requiredField"> City<span class="asteriskField">*</span> </label> <div class="controls col-md-3"> <input class="input-md emailinput form-control" name="city" style="margin-bottom: 10px" type="text" /> </div> <label for="id_email" class="control-label col-md-2 requiredField">Pin Code<span class="asteriskField">*</span> </label> <div class="controls col-md-3"> <input class="input-md emailinput form-control" name="pin-code" style="margin-bottom: 10px" type="text" /> </div> <div class="clearfix"></div> <label for="id_email" class="control-label col-md-2 requiredField"> Phone No</label> <div class="controls col-md-3 "> <input class="input-md emailinput form-control" name="phone" style="margin-bottom: 10px" type="text" /> </div> <label for="id_email" class="control-label col-md-2 requiredField">Mobile No<span class="asteriskField">*</span> </label> <div class="controls col-md-3 "> <input class="input-md emailinput form-control" name="email" style="margin-bottom: 10px" type="text" /> </div> <div class="clearfix"></div> <label for="id_email" class="control-label col-md-2 requiredField"> Fax<span class="asteriskField">*</span> </label> <div class="controls col-md-3 "> <input class="input-md emailinput form-control" name="fax" style="margin-bottom: 10px" type="text" /> </div> <label for="id_email" class="control-label col-md-2 requiredField"> Pan Card Nos<span class="asteriskField">*</span> </label> <div class="controls col-md-3 "> <input class="input-md emailinput form-control" name="pan_card" style="margin-bottom: 10px" type="text" /> </div> <div class="clearfix"></div> <label for="id_email" class="control-label col-md-2 requiredField"> Website</label> <div class="controls col-md-3 "> <input class="input-md emailinput form-control" name="website" style="margin-bottom: 10px" type="email" /> </div> <label for="id_email" class="control-label col-md-2 requiredField">Office Space </label> <div class="controls col-md-3 "> <label class="radio-inline"><input type="radio" name="office-sapce" checked>Owned</label> <label class="radio-inline"><input type="radio" name="office-sapce">Rented</label> </div> <div class="clearfix"></div> <label for="id_email" class="control-label col-md-2 requiredField"> Bussiness/Ownership </label> <div class="controls col-md-3 "> <input class="input-md emailinput form-control" name="bussiness" style="margin-bottom: 10px" type="text" /> </div> <label for="id_email" class="control-label col-md-2 requiredField"> IATA Registered </label> <div class="controls col-md-3 "> <label class="radio-inline"><input type="radio" name="iata" checked>Yes</label> <label class="radio-inline"><input type="radio" name="iata">No</label> </div> <div class="clearfix"></div> <label for="id_email" class="control-label col-md-2 requiredField"> Business years </label> <div class="controls col-md-3 "> <select class="form-control" id="sel1"> <option>Select</option> </select> </div> <label for="id_email" class="control-label col-md-2 requiredField"> Monthly Turnover </label> <div class="controls col-md-3 "> <input class="input-md emailinput form-control" name="turnover" style="margin-bottom: 10px" type="text" /> </div> <div class="clearfix"></div> <label for="id_email" class="control-label col-md-2 requiredField">Email Address<span class="asteriskField">*</span> </label> <div class="controls col-md-8 "> <input class="input-md emailinput form-control" name="email" placeholder="Your current email address" style="margin-bottom: 10px" type="email" /> </div> <div class="clearfix"></div> <label for="id_email" class="control-label col-md-2 requiredField">Securitization Mode<span class="asteriskField">*</span> </label> <label class="radio-inline"><input type="radio" name="optradio" checked>Bank Guarantee</label> <label class="radio-inline"><input type="radio" name="optradio">Post Dated Cheque</label> <label class="radio-inline"><input type="radio" name="optradio">Unsecure</label> <br/><br/> <button class="btn btn-block btn-primary">Submit</button> </form> </div> </div> </div> </section>
*{ margin:0; padding:0; } .form-horizontal .control-label { padding-top: 7px; margin-bottom: 0; text-align: right; } .clear-my{ display: none; } @media only screen and (max-width: 600px) { .clear-my{ display: block; } }

Related: See More


Questions / Comments: