<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Staff Leave Request استئذان موظف</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="name">Staff Name اسم الوظف</label> <div class="col-md-5"> <input id="name" name="name" type="text" placeholder="Name" class="form-control input-md" required=""> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="requestfrom">Request from طلب الاسئذان من</label> <div class="col-md-5"> <select id="requestfrom" name="requestfrom" class="form-control"> <option value="1">Mr. Saeed Al Ghaithi</option> <option value="2">Mr. Amer Balouch</option> <option value="3">Mr. Salem Al Kalbani</option> <option value="4">Mr. Mohammed Elbendary</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="reason">Leave Reason سبب الأستئذان</label> <div class="col-md-5"> <select id="reason" name="reason" class="form-control"> <option value="1">Emergency Leave استئذان شخصي</option> <option value="2">Medical Appointment موعد طبي</option> <option value="3">External Training - تدريب او اجتماع خارجي</option> <option value="4">Visit government institutions زيارة مؤسسات حكومية</option> <option value="5">Official Leave استئذان رسمي</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="leavetime">Leave Time وقت الخروج</label> <div class="col-md-4"> <input id="leavetime" name="leavetime" type="text" placeholder="" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="backtime">Expected Retrun time الوقت المتوقع للرجوع</label> <div class="col-md-4"> <input id="backtime" name="backtime" type="text" placeholder="" class="form-control input-md" required=""> </div> </div> <!-- File Button --> <div class="form-group"> <label class="col-md-4 control-label" for="filebutton">Upload File حمل ملف</label> <div class="col-md-4"> <input id="filebutton" name="filebutton" class="input-file" type="file"> </div> </div> </fieldset> </form>