<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h1 class="well">Staff Registration</h1> <div class="col-lg-12 well"> <div class="row"> <form> <div class="col-sm-12"> <div class="row"> <div class="col-sm-6 form-group"> <label>First Name</label> <input type="text" placeholder="Enter First Name Here.." class="form-control" required> </div> <div class="col-sm-6 form-group"> <label>Last Name</label> <input type="text" placeholder="Enter Last Name Here.." class="form-control" required> </div> </div> <div class="row"> <div class="col-sm-6 form-group"> <label>Age</label> <input type="number" placeholder="Enter Age Here.." class="form-control" required> </div> <div class="col-sm-6 form-group"> <label>Gender</label> <select name="gender" class="form-control" required> <option value="Male">Male</option> <option value="Female">Female</option> <option value="Others">Others</option> </select> </div> </div> <div class="form-group"> <label>Current Address</label> <textarea placeholder="Enter Your Current Address Here.." rows="3" class="form-control" required></textarea> </div> <div class="row"> <div class="col-sm-6 form-group"> <label>Phone Number</label> <input type="tel" pattern="[7-9]{1}[0-9]{9}" placeholder="Enter Phone Number Here.." class="form-control" required> </div> <div class="col-sm-6 form-group"> <label>Alternate Phone Number</label> <input type="tel" pattern="[7-9]{1}[0-9]{9}" placeholder="Enter Alternate phone number (if any)" class="form-control"> </div> </div> <div class="form-group"> <label>Upload Any Government Issued Photo-Id</label> <input class="btn" type="file" name="photoid" id="photo_id" value="" required> </div> <button type="button" class="btn btn-lg btn-info">Submit</button> </div> </form> </div> </div> </div>

@import "font-awesome.min.css"; @import "font-awesome-ie7.min.css"; /* Make the masthead heading the same height as the navigation */ .header h3 { padding-bottom: 19px; margin-top: 0; margin-bottom: 0; line-height: 40px; } /* Customize container */ @media (min-width: 768px) { .container { max-width: 730px; } } .container-narrow > hr { margin: 30px 0; } /* Responsive: Portrait tablets and up */ @media screen and (min-width: 768px) { /* Remove the padding we set earlier */ .header { padding-right: 0; padding-left: 0; } /* Space out the masthead */ .header { margin-bottom: 30px; } }