<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 Tour Package</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="name">Tour Package Name</label> <div class="col-md-4"> <input id="name" name="name" type="text" placeholder="" class="form-control input-md" required=""> <span class="help-block">Please enter tour 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 your tour package in detail</textarea> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="meetingpoint">Meeting / Redemption Point</label> <div class="col-md-4"> <input id="meetingpoint" name="meetingpoint" type="text" placeholder="" class="form-control input-md" required=""> <span class="help-block">Specify meeting or redemption point here</span> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="highlights">Tour Highlights</label> <div class="col-md-4"> <textarea class="form-control" id="highlights" name="highlights">Specify your tour package highlights here</textarea> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="includes">Tour Includes</label> <div class="col-md-4"> <textarea class="form-control" id="includes" name="includes">1. Free meals (5 times per day) 2. Free photoshoot sessions</textarea> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="excludes">Tour Excludes</label> <div class="col-md-4"> <textarea class="form-control" id="excludes" name="excludes">1. Flight tickets 2. Meals</textarea> </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> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="location">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">Specify tour location here</span> </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> <p class="help-block">Specify package price here</p> </div> </div> <!-- Appended Input--> <div class="form-group"> <label class="col-md-4 control-label" for="agentsrate">Agents Rate</label> <div class="col-md-4"> <div class="input-group"> <input id="agentsrate" name="agentsrate" 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="uploads">Upload Photos & Videos</label> <div class="col-md-4"> <input id="uploads" name="uploads" class="input-file" type="file"> </div> </div> </fieldset> </form>