<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <div class="container"> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend class="col-form-title">Applicant Details</legend> <!-- Text input--> <div class="form-group row"> <label class="col-md-4 col-form-label" for="surname">Surname/Family Name</label> <div class="col-md-4"> <input id="surname" name="surname" type="text" placeholder="Surname" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group row"> <label class="col-md-4 col-form-label" for="preferred_name">Preferred name</label> <div class="col-md-4"> <input id="preferred_name" name="preferred_name" type="text" placeholder="Preferred name" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group row"> <label class="col-md-4 col-form-label" for="given_names">Given names in full</label> <div class="col-md-4"> <input id="given_names" name="given_names" type="text" placeholder="Given names" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group row"> <label class="col-md-4 col-form-label" for="given2">Middle names</label> <div class="col-md-4"> <input id="given2" name="given2" type="text" placeholder="Middle names" class="form-control input-md"> </div> </div> <!-- Appended checkbox --> <div class="form-group row"> <label class="col-md-4 col-form-label" for="date_of_birth">Date of Birth</label> <div class="col-md-4"> <div class="input-group"> <input id="date_of_birth" name="date_of_birth" class="form-control" type="text" placeholder="dd/mm/yyyy"> <span class="input-group-addon"> <input type="checkbox"> </span> </div> </div> </div> <!-- Multiple Radios --> <div class="form-group row"> <label class="col-md-4 col-form-label" for="gender">Gender</label> <div class="col-md-4"> <div class="radio"> <label for="gender-0"> <input type="radio" name="gender" id="gender-0" value="M" checked="checked"> Male </label> </div> <div class="radio"> <label for="gender-1"> <input type="radio" name="gender" id="gender-1" value="F"> Female </label> </div> <div class="radio"> <label for="gender-2"> <input type="radio" name="gender" id="gender-2" value="U"> Unspecified </label> </div> </div> </div> <!-- Select Basic --> <div class="form-group row"> <label class="col-md-4 col-form-label" for="religion">Religion</label> <div class="col-md-4"> <select id="religion" name="religion" class="form-control"> <option value="1">None</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group row"> <label class="col-md-4 col-form-label" for="tsi_status">Torres Straight Islander Status</label> <div class="col-md-4"> <select id="tsi_status" name="tsi_status" class="form-control"> <option value="N">No</option> <option value="Y">Yes</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group row"> <label class="col-md-4 col-form-label" for="indigenous_status">Indigenous Status</label> <div class="col-md-4"> <select id="indigenous_status" name="indigenous_status" class="form-control"> <option value="Y">No</option> <option value="N">Yes</option> </select> </div> </div> <!-- Button --> <div class="form-group row"> <label class="col-md-4 col-form-label" for="next"></label> <div class="col-md-4"> <button id="next" name="next" class="btn btn-primary">Save & Continue</button> </div> </div> </fieldset> </form> </div>

.col-form-label { color: #2A4A8D; font-family: Lato,"helvetica neue",sans-serif; } .col-form-title { color: #2A4A8D; font-family: Lato,"helvetica neue",sans-serif; font-weight: 400; font-variant: small-caps; }