<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 ----------> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Simpoel Profile</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="FullName">Full Name</label> <div class="col-md-8"> <input id="FullName" name="FullName" type="text" placeholder="Full Name" class="form-control input-md" required=""> <span class="help-block">Check that this matches your passport</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="DisplayName">Display Name</label> <div class="col-md-5"> <input id="DisplayName" name="DisplayName" type="text" placeholder="Display Name (optional)" class="form-control input-md"> <span class="help-block">displayed in your profile page</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Email">Email</label> <div class="col-md-6"> <input id="Email" name="Email" type="text" placeholder="Valid Personal E-mail" class="form-control input-md" required=""> <span class="help-block">active email only please</span> </div> </div> <!-- Prepended text--> <div class="form-group"> <label class="col-md-4 control-label" for="Mobile">Mobile</label> <div class="col-md-5"> <div class="input-group"> <span class="input-group-addon">+61</span> <input id="Mobile" name="Mobile" class="form-control" placeholder="Mobile Number" type="text" required=""> </div> <p class="help-block">Simpoel will text you good stuffs</p> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Address">Current Address</label> <div class="col-md-8"> <input id="Address" name="Address" type="text" placeholder="Where you live at the moment" class="form-control input-md" required=""> <span class="help-block">Simpoel might send you gifts at this address</span> </div> </div> <!-- Search input--> <div class="form-group"> <label class="col-md-4 control-label" for="Suburb">Suburb</label> <div class="col-md-6"> <input id="Suburb" name="Suburb" type="search" placeholder="Start typing to search suburb" class="form-control input-md" required=""> <p class="help-block">Type to seach suburb</p> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Country">Country</label> <div class="col-md-6"> <input id="Country" name="Country" type="text" placeholder="Country (auto populated)" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="KBRI">KBRI/KJRI</label> <div class="col-md-6"> <input id="KBRI" name="KBRI" type="text" placeholder="KBRI/KJRI (auto populated)" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="MoveUntil">Live Here until</label> <div class="col-md-5"> <input id="MoveUntil" name="MoveUntil" type="text" placeholder="Date widget here (optional)" class="form-control input-md"> <span class="help-block">Enter if you are temporary resident</span> </div> </div> <!-- File Button --> <div class="form-group"> <label class="col-md-4 control-label" for="ProfilePicture">Profile Picture</label> <div class="col-md-4"> <input id="ProfilePicture" name="ProfilePicture" class="input-file" type="file"> </div> </div> </fieldset> </form>