"Form Bootstrap4"
Bootstrap 4.1.1 Snippet by ravic9089

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, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.css" /> <style> body{ background-color: #28a745; } .bg-class{ background-color: #ccc; padding:10px; border:1px dashed #000; } </style> </head> <body> <div class="container"> <form> <div class="bg-class"> <h2 class="text-center text-success">Registration Form</h2> <div class="form-row"> <div class="col-md-8 offset-md-2 mb-3"> <label for="validationServer013">DRIVING LIC NOS </label> <input type="text" class="form-control" placeholder="DRIVING LIC NOS" value="" required> </div> </div> <div class="form-row"> <div class="col-md-4 offset-md-2 mb-3"> <label for="validationServer013">Date Of Issue </label> <input type="date" class="form-control" placeholder="Date Of Issue" value="" required> </div> <div class="col-md-4 mb-3"> <label for="validationServer023">Valid </label> <input type="date" class="form-control" placeholder="Valid" value="" required> </div> </div> <div class="form-row"> <div class="col-md-4 offset-md-2 mb-3"> <label for="validationServer013">Issue Place </label> <input type="text" class="form-control" placeholder="Issue Place" value="" required> </div> <div class="col-md-4 mb-3"> <label for="validationServer023">State</label> <input type="text" class="form-control" placeholder="State" value="" required> </div> </div> <div class="form-row"> <div class="col-md-4 offset-md-2 mb-3"> <label for="validationServer013">Name </label> <input type="text" class="form-control" placeholder="Name" value="" required> </div> <div class="col-md-4 mb-3"> <label for="validationServer013">F/Name</label> <input type="text" class="form-control is-valid" placeholder="F/Name" value="" required> </div> </div> <div class="form-row"> <div class="col-md-4 offset-md-2 mb-3"> <label for="validationServer013">Password </label> <input type="password" class="form-control" placeholder="password" value="" required> </div> <div class="col-md-4 mb-3"> <label for="validationServer013">Confirm Password</label> <input type="password" class="form-control is-valid" placeholder="password" value="" required> </div> </div> <div class="form-row"> <div class="col-md-4 offset-md-2 mb-3"> <label for="validationServer013">DOB</label> <input type="date" class="form-control is-valid" placeholder="DOB" value="" required> </div> <div class="col-md-4 mb-3 "> <label for="validationServer013">Nationality</label> <input type="text" class="form-control is-valid" placeholder="Nationality" value="" required> </div> </div> <div class="form-row"> <div class="col-md-8 mb-3 offset-md-2 form-check-inline"> <label for="form-check-label ">Sex</label>   <input type="radio" class="form-check-input" value="">Male    <input type="radio" class="form-check-input">Female    <input type="radio" class="form-check-input">Other </div> </div> <div class="form-row"> <div class="col-md-8 offset-md-2 mb-3"> <label for="validationServer013">Present Address </label> <textarea name="" class="form-control is-valid" id="" cols="30" rows="2"></textarea> </div> </div> <div class="form-row"> <div class="col-md-8 offset-md-2 mb-3"> <label for="validationServer013">Permanent Address </label> <textarea name="" class="form-control is-valid" id="" cols="30" rows="2"></textarea> </div> </div> <div class="form-row"> <div class="col-md-8 offset-md-2 mb-3"> <label for="validationServer013">Qualification </label> <input type="text" class="form-control is-valid" placeholder="Qualification" value="" required> </div> </div> <div class="form-row"> <div class="col-md-8 mb-3 offset-md-2 form-check-inline"> <label for="form-check-label">Marital Status</label>   <input type="radio" class="form-check-input" value="">Yes <input type="radio" class="form-check-input">No </div> </div> <h4 class="col-md-4 offset-md-2 mb-3">Job Details</h4> <div class="form-row"> <div class="col-md-4 offset-md-2 mb-3"> <label for="validationServer013">Driving Years </label> <input type="text" class="form-control is-valid" placeholder="Driving Years " value="" required> </div> <div class="col-md-4 mb-3"> <label for="validationServer013">Salary </label> <input type="text" class="form-control is-valid" placeholder="Salary" value="" required> </div> </div> <div class="form-row"> <div class="col-md-4 offset-md-2 mb-3"> <label for="validationServer013">Job Add</label> <input type="text" class="form-control is-valid" placeholder="First name" value="" required> </div> <div class="col-md-4 mb-3"> <label for="validationServer013">Owner Name</label> <input type="text" class="form-control is-valid" placeholder="First name" value="" required> </div> </div> <h3 class="col-md-4 offset-md-2 mb-3">Others Details</h3> <div class="form-row"> <div class="col-md-4 offset-md-2 mb-3 form-check-inline"> <label for="form-check-label">Insurance </label>   <input type="radio" class="form-check-input" value="">Yes    <input type="radio" class="form-check-input">No </div> <div class="col-md-4 mb-3 form-check-inline"> <label for="form-check-label">Security Department</label>   <input type="radio" class="form-check-input" value="">Yes    <input type="radio" class="form-check-input">No </div> </div> <div class="form-row"> <div class="col-md-4 offset-md-2 mb-3 form-check-inline"> <label for="form-check-label">Any Dises </label>   <input type="radio" class="form-check-input" value="">Yes    <input type="radio" class="form-check-input">No </div> <div class="col-md-4 mb-3 form-check-inline"> <label for="form-check-label">PF</label>   <input type="radio" class="form-check-input" value="">Yes    <input type="radio" class="form-check-input">No </div> </div> <div class="form-row"> <div class="col-md-8 offset-md-2 mb-3"> <label for="form-check-label">Select Option</label> <select class="form-control" id="sel1"> <option>Select Option</option> <option>2</option> <option>3</option> <option>4</option> </select> </div> </div> <button class="btn btn-lg btn-primary offset-md-5" type="submit">Submit form</button> </div></form> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </body> </html>

Related: See More

Paper Kit 2 PRO
login-form
Login Form
Contact Form

Questions / Comments: