<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> <legend><h1>Incident Ticket n°</h1> </legend> <div class="form-group"> <label class="col-12 control-label" for="question">Question</label> <input id="question" name="question" type="text" placeholder="Question" class="form-control input-md" > </div> <div class='row'> <!--<div class='col'> </div> <div class='col'> </div>--> </div> <div class = 'row'> <div class='col'> <div class="form-group"> <label class="col-12 control-label" for="demandeur">Demandeur</label> <input id="demandeur" name="demandeur" type="text" placeholder="Demandeur" class="form-control input-md" > </div> </div> <div class='col'> <div class="form-group"> <label class="col-12 control-label" for="tel">Tel</label> <input id="tel" name="tel" type="text" placeholder="Tel" class="form-control input-md" > </div> </div> <div class='col'> <div class="form-group"> <label class="col-12 control-label" for="email">Email</label> <input id="email" name="email" type="text" placeholder="Email" class="form-control input-md" > </div> </div> </div> <div class='row'> <div class='col'> </div> <div class='col'> </div> </div> <div class='row'> <div class='col'> <div class="form-group"> <label class="col-12 control-label" for="dateCreation">Date de création</label> <input id="dateCreation" name="dateCreation" type="date" placeholder="Date de création" class="form-control input-md" > </div> </div> <div class='col'> <div class="form-group"> <label class="col-12 control-label" for="datePriseEnCharge">Date de prise en charge</label> <input id="datePriseEnCharge" name="datePriseEnCharge" type="date" placeholder="Date de prise en charge" class="form-control input-md" > </div> </div> <div class='col'> <div class="form-group"> <label class="col-12 control-label" for="dateModification">Date de modification</label> <input id="dateModification" name="dateModification" type="date" placeholder="Date de modification" class="form-control input-md" > </div> </div> <div class='col'> <div class="form-group"> <label class="col-12 control-label" for="dateCloture">Date de clôture</label> <input id="dateCloture" name="dateCloture" type="date" placeholder="Date de clôture" class="form-control input-md" > </div> </div> </div> <div class='row'> <div class='col'> <div class="form-group"> <label class="col-12 control-label" for="service">Attribué à</label> <input id="service" name="service" type="text" placeholder="Attribué à" class="form-control input-md" > </div> </div> <div class='col'> <div class="form-group"> <label class="col-12 control-label" for="etat">Etat</label> <select id="etat" name="etat" class="form-control"> <option value="">Sélectionnez un etat</option> <option value="0">Nouveau</option> <option value="1">En cours</option> <option value="2">Clôs</option> <option value="3">En attente</option> </select> </div> </div> </div> <div class="form-group"> <label class="col-12 control-label" for="detail">Détail</label> <textarea class="form-control" id="detail" name="detail" placeholder="Détail" rows="10"></textarea> </div> </fieldset> </form>

div { border: 0px solid gray; } .form-horizontal { padding: 20px; margin: 0 auto; } .control-label { background-color: black; color: white; padding-top: 0px; text-align: left; font-weight: bold; padding: 8px; font-size: 1em; border-radius: .4em; } .inputtext:focus { background-color: #FFFACD; }