<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>Add Sports Package</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="name">Package Name</label> <div class="col-md-4"> <input id="name" name="name" type="text" placeholder="Package Name" class="form-control input-md" required=""> <span class="help-block">Please enter sports package name here</span> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="description">Description</label> <div class="col-md-4"> <textarea class="form-control" id="description" name="description">Describe you sports package in detail here</textarea> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="include">Package Includes</label> <div class="col-md-4"> <textarea class="form-control" id="include" name="include"></textarea> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="requirement">General Requirements</label> <div class="col-md-4"> <textarea class="form-control" id="requirement" name="requirement">1. Safety requirements 2. Weight limitation 3. Age limitation 4. Specific operating time / schedule</textarea> </div> </div> <!-- Appended Input--> <div class="form-group"> <label class="col-md-4 control-label" for="operatinglocation">No. of Operating Location</label> <div class="col-md-4"> <div class="input-group"> <input id="operatinglocation" name="operatinglocation" class="form-control" placeholder="0" type="text" required=""> <span class="input-group-addon">locations</span> </div> <p class="help-block">Specify no. of operating location available</p> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="location">Operating Location</label> <div class="col-md-4"> <input id="location" name="location" type="text" placeholder="" class="form-control input-md" required=""> <span class="help-block">Enter location here</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="availableslots">Available Slots Per Day Per Location</label> <div class="col-md-4"> <input id="availableslots" name="availableslots" type="text" placeholder="" class="form-control input-md" required=""> <span class="help-block">Specify how many slots are available for each location</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="minpax">Minimum Number of Pax</label> <div class="col-md-4"> <input id="minpax" name="minpax" type="text" placeholder="" class="form-control input-md" required=""> <span class="help-block">Specify minimum number of pax required for this package</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="maxpax">Maximum Number of Pax</label> <div class="col-md-4"> <input id="maxpax" name="maxpax" type="text" placeholder="" class="form-control input-md" required=""> <span class="help-block">Specify maximum number of pax required for this package</span> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="additionalrequirement">Additional Requirements</label> <div class="col-md-4"> <textarea class="form-control" id="additionalrequirement" name="additionalrequirement">1. Meeting point 2. Meeting time</textarea> </div> </div> <!-- Appended Input--> <div class="form-group"> <label class="col-md-4 control-label" for="notice">Minimum Notice for Booking</label> <div class="col-md-4"> <div class="input-group"> <input id="notice" name="notice" class="form-control" placeholder="" type="text" required=""> <span class="input-group-addon">Days</span> </div> <p class="help-block">Specify minimum notice to book the package</p> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="cancellationpolicy">Cancellation Policy</label> <div class="col-md-4"> <textarea class="form-control" id="cancellationpolicy" name="cancellationpolicy">1. Due to dangerous weather 2. Due to other reasons</textarea> </div> </div> <!-- Multiple Checkboxes (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="insurance">Insurance Provided?</label> <div class="col-md-4"> <label class="checkbox-inline" for="insurance-0"> <input type="checkbox" name="insurance" id="insurance-0" value="1"> Yes </label> <label class="checkbox-inline" for="insurance-1"> <input type="checkbox" name="insurance" id="insurance-1" value="2"> No </label> </div> </div> <!-- Prepended text--> <div class="form-group"> <label class="col-md-4 control-label" for="price">Price</label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon">RM</span> <input id="price" name="price" class="form-control" placeholder="0.00" type="text" required=""> </div> </div> </div> <!-- Appended Input--> <div class="form-group"> <label class="col-md-4 control-label" for="agentrate">Agents Rate</label> <div class="col-md-4"> <div class="input-group"> <input id="agentrate" name="agentrate" class="form-control" placeholder="0" type="text" required=""> <span class="input-group-addon">%</span> </div> <p class="help-block">This is just indicative rate. Final rate is subject to final agreement</p> </div> </div> <!-- File Button --> <div class="form-group"> <label class="col-md-4 control-label" for="upload">Upload Photos & Videos</label> <div class="col-md-4"> <input id="upload" name="upload" class="input-file" type="file"> </div> </div> </fieldset> </form>