<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend><h1>Incident Ticket</h1> </legend> <!-- Text input--> <div class="form-group"> <label class="col-md-12 control-label" for="ticketRequestorName">Requestor</label> <div class="col-md-12"> <input id="ticketRequestorName" name="ticketRequestorName" type="text" placeholder="Requesting AD Users Name" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-12 control-label" for="ticketSubject">Subject / Title</label> <div class="col-md-12"> <input id="ticketSubject" name="ticketSubject" type="text" placeholder="Subject / Title for Ticket" class="form-control input-md" required=""> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-12 control-label" for="ticketImpact">Impact On Users</label> <div class="col-md-6"> <select id="ticketImpact" name="ticketImpact" class="form-control"> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-12 control-label" for="ticketSeverity">Severity</label> <div class="col-md-6"> <select id="ticketSeverity" name="ticketSeverity" class="form-control"> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-12 control-label" for="ticketTimeSensitive">Time Sensitive</label> <div class="col-md-6"> <select id="ticketTimeSensitive" name="ticketTimeSensitive" class="form-control"> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-12 control-label" for="ticketPriority">Priority</label> <div class="col-md-6"> <select id="ticketPriority" name="ticketPriority" class="form-control"> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-12 control-label" for="ticketNotificationMethod">Notification Method</label> <div class="col-md-6"> <select id="ticketNotificationMethod" name="ticketNotificationMethod" class="form-control"> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-12 control-label" for="ticketStatus">Status of Request</label> <div class="col-md-6"> <select id="ticketStatus" name="ticketStatus" class="form-control"> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-12 control-label" for="ticketDocumentation">Ticket Documentation</label> <div class="col-md-12"> <textarea class="form-control" id="ticketDocumentation" name="ticketDocumentation" placeholder="test"></textarea> </div> </div> </fieldset> </form>

div { border: 0px solid gray; } .form-horizontal { padding: 20px; margin: 0 auto; max-width: 700px; } .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; }