"Untitled"
Bootstrap 4.1.1 Snippet by zeldaAlex

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../../../favicon.ico"> <title>Narrow Jumbotron Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="../../css/editor.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="narrow-jumbotron.css" rel="stylesheet"> </head> <body> <div id="wrapper"> <div id="content-wrapper" class="d-flex flex-column"> <div id="content"> <div class="container-fluid"> <div class="row"> <div class="col-12"> <div class="card shadow mb-4"> <div class="card-header py-3" id="users"> <h4 class="m-0 font-weight-bold card-title"><button class="btn btn-link font-weight-bold card-title" data-toggle="collapse" data-target="#collapseusers" aria-expanded="true" aria-controls="collapseusers"> Ticket ID n°$id </button></h4> </div> <div id="collapseusers" class="collapse show" aria-labelledby="users"> <div class="card-body"> <form class="form-horizontal"> <fieldset> <legend><h1>Incident Ticket n°$id</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> </div> </div> </div> </div> </div> </div> </div> <!-- /container --> </div></body> </html>
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; }

Related: See More

Paper Dashboard PRO React

Questions / Comments: