<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link id="bsdp-css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <script src=https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js></script> <div class="container"> <form class="form-horizontal" role="form"> <fieldset> <!-- Form Name --> <legend>FPL Data</legend> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-2"> <div class="form-group"> <div class="form-line"> <label for="name" class="control-label">Date of Flight</label> <div class='input-group date date-of-flight-style' id='datetimepicker1'> <input id="dateOfFligt" name="dateOfFligt" type="text" placeholder="DD/MM/YYYY" class="form-control input-md" required=""> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div> </div> </div> </div> <div class="col-xs-6 col-sm-6 col-md-1"> <div class="form-group"> <div class="form-line"> <label for="name" class="control-label">Aircraft id</label> <input id="aircraftId" name="aircraftId" type="text" placeholder="XXXX" class="form-control input-md"> </div> </div> </div> <div class="col-xs-6 col-sm-6 col-md-1"> <div class="form-group"> <div class="form-line"> <label for="name" class="control-label">Flight Rules</label> <select id="flightRules" name="flightRules" class="form-control flight-rules-style"> <option value="1">Select</option> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> </div> <div class="col-xs-6 col-sm-6 col-md-2"> <div class="form-group"> <div class="form-line"> <label for="name" class="control-label">Type of Flight</label> <select id="flightType" name="flightType" class="form-control flight-type-style"> <option value="1">Select</option> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> </div> </div> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-1"> <div class="form-group"> <div class="form-line"> <label for="name" class="control-label">Number</label> <input id="number" name="number" type="text" placeholder="" class="form-control input-md"> </div> </div> </div> <div class="col-xs-6 col-sm-6 col-md-1"> <div class="form-group"> <div class="form-line"> <label for="name" class="control-label">Aircraft Type</label> <input id="aircraftType" name="aircraftType" type="text" placeholder="" class="form-control input-md"> </div> </div> </div> <div class="col-xs-6 col-sm-6 col-md-2"> <div class="form-group"> <div class="form-line"> <label for="name" class="control-label">Wake Turbulence Cat</label> <select id="wakeTurbulenceCat" name="wakeTurbulenceCat" class="form-control"> <option value="1">Select</option> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> </div> <div class="col-xs-6 col-sm-6 col-md-2"> <div class="form-group"> <div class="form-line"> <label for="name" class="control-label">Equipment</label> <div class="input-group my-group"> <!--<input id="2" type="text" class="form-control"/> --> <input id="equipment" type="text" class="form-control"/> <span class="input-group-addon"> <span class="glyphicon glyphicon-pencil"></span> </span> </div> </div> </div> </div> </div> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-1"> <div class="form-group"> <div class="form-line"> <label for="name" class="control-label">ADEO</label> <input id="adeo" name="adeo" type="text" placeholder="" class="form-control input-md"> </div> </div> </div> <div class="col-xs-6 col-sm-6 col-md-1"> <div class="form-group"> <div class="form-line"> <label for="name" class="control-label">EOTB</label> <div class="input-group"> <div class="form-line"> <input id="eotb1" name="eotb1" type="text" class="form-control form-control-join-inputs" placeholder=""> </div> <span class="input-group-addon join-inputs">:</span> <div class="form-line"> <input id="eotb2" name="eotb2" type="text" class="form-control form-control-join-inputs" placeholder=""> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-7"> <div class="form-group"> <div class="form-line"> <label for="name" class="control-label">Route</label> <div class="input-group"> <textarea class="form-control" id="route" name="route"></textarea> <span class="input-group-addon btn btn-secondary"><span class="glyphicon glyphicon-map-marker"></span></span> </div> </div> </div> </div> </div> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-1"> <div class="form-group"> <div class="form-line"> <label for="name" class="control-label">ADES</label> <input id="ades" name="ades" type="text" placeholder="" class="form-control input-md"> </div> </div> </div> <div class="col-xs-6 col-sm-6 col-md-1"> <div class="form-group"> <div class="form-line"> <label for="name" class="control-label">Total EET</label> <div class="input-group"> <div class="form-line"> <input id="totalEet1" name="totalEet1" type="text" class="form-control form-control-join-inputs" placeholder=""> </div> <span class="input-group-addon join-inputs">:</span> <div class="form-line"> <input id="totalEet2" name="totalEet2" type="text" class="form-control form-control-join-inputs" placeholder=""> </div> </div> </div> </div> </div> <div class="col-xs-6 col-sm-6 col-md-2"> <div class="form-group"> <div class="form-line"> <label for="name" class="control-label">Alt Aerodrome</label> <input id="altAerodrome" name="altAerodrome" type="text" placeholder="" class="form-control input-md" required=""> </div> </div> </div> <div class="col-xs-6 col-sm-6 col-md-2"> <div class="form-group"> <div class="form-line"> <label for="name" class="control-label">2nd Alt Aerodrome</label> <input id="2altAerodrome" name="2altAerodrome" type="text" placeholder="" class="form-control input-md" required=""> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-7"> <div class="form-group"> <div class="form-line"> <label for="name" class="control-label">Other information</label> <div class="input-group"> <textarea class="form-control" id="otherInformation" name="otherInformation"></textarea> <span class="input-group-addon btn btn-secondary"><span class="glyphicon glyphicon-pencil"></span></span> </div> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-7"> <div class="form-group"> <div class="form-line"> <label for="name" class="control-label">Supplementary information</label> <div class="input-group"> <textarea class="form-control" id="supplementaryInformation" name="supplementaryInformation"></textarea> <span class="input-group-addon btn btn-secondary"><span class="glyphicon glyphicon-pencil"></span></span> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3"> <button type="button" class="btn btn-info center">Validate</button> </div> </div> </fieldset> </form> </div>

.row{ margin-left:0px !important; } .form-group { padding-right:10px; } .my-group .form-control{ width:50%; } .join-inputs { padding: 2px !important; background-color: white !important; border: 0px !important; } .input-group-addon{ background-color: white !important; } .form-control-join-inputs { border-radius: 4px !important; width:40px !important; } .flight-rules-style{ width: 90px !important; } .flight-type-style{ width: 100px !important; }

$(function () { $('#datetimepicker1').datetimepicker(); });