<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <br> <div class="container"> <div class="row"> <div class="col-md-9"> <div class="alert alert-warning"> <strong>Due Tomorrow</strong> If this isn't closed by tomorrow it will be late. <span class="close" data-dismiss="alert">×</span> </div> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">WO > PM > 1234567</h3> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <div class="row"> <div class="col-md-12"> <form class="form-horizontal"> <fieldset> <div class="col-md-6"> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Description*</label> <div class="col-md-8"> <input class="form-control input-md" id="disabledInput" type="text" placeholder="Boiler #5" disabled required=""> </div> </div><hr> <div class="form-group"> <label class="col-md-4 control-label" for="textarea">Details</label> <div class="col-md-8"> <textarea class="form-control" id="textarea" name="textarea"></textarea> </div> </div><hr> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Site</label> <div class="col-md-8"> <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md"> </div> </div><hr> <div class="form-group"> <label class="col-md-4 control-label" for="appendedtext">Location</label> <div class="col-md-8"> <div class="input-group"> <input id="appendedtext" name="appendedtext" class="form-control" placeholder="placeholder" type="text"> <span class="input-group-addon"><a href="#"><i class="fa fa-search"></i></a></span> </div> </div> </div><hr> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Additional Loc Info</label> <div class="col-md-8"> <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md"> </div> </div><hr> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Asset ID</label> <div class="col-md-8"> <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md"> </div> </div><hr> <div class="form-group"> <label class="col-md-4 control-label" for="selectbasic">Status</label> <div class="col-md-8"> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="1">Reviewed</option> <option value="2">Not Reviewed</option> </select> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="col-md-4 control-label" for="appendedtext">Assigned To</label> <div class="col-md-8"> <div class="input-group"> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="1">John Doe</option> <option value="2">Sherlock Holmes</option> </select> <span class="input-group-addon"><a href="#"><i class="fa fa-envelope-o"></i></a></span> </div> </div> </div><hr> <div class="form-group"> <label class="col-md-4 control-label" for="selectbasic">Classification</label> <div class="col-md-8"> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="1">N/A</option> <option value="2">Electrician</option> </select> </div> </div><hr> <div class="form-group"> <label class="col-md-4 control-label" for="checkboxes">Flags</label> <div class="col-md-8"> <div class="checkbox"> <label for="checkboxes-0"> <input type="checkbox" name="checkboxes" id="checkboxes-0" value="1"> Manager Review Needed </label> </div> <div class="checkbox"> <label for="checkboxes-1"> <input type="checkbox" name="checkboxes" id="checkboxes-1" value="2"> <abbr title="(parts details should popup only when this is selected)">Parts Needed</abbr> </label> </div> <div class="checkbox"> <label for="checkboxes-2"> <input type="checkbox" name="checkboxes" id="checkboxes-2" value="3"> Parts Ordered </label> </div> </div> </div> </div> </fieldset> </form> </div> </div> </div> </div> </div> </div> </div> <div class="col-md-9"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Additional Information for WO: 1234567</h3> <span class="pull-right"> <!-- Tabs --> <ul class="nav panel-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Details</a></li> <li><a href="#tab2" data-toggle="tab">Log</a></li> <li><a href="#tab3" data-toggle="tab">Asset</a></li> </ul> </span> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <h3>Inspections</h3> <h3>Parts</h3> <h3>Notes</h3> </div> <div class="tab-pane" id="tab2"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div> <div class="tab-pane" id="tab3"> Pull in asset form - I don't care if its an iframe until we redo the asset/document stuff </div> </div> </div> </div> </div> </div> </div>

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"); /*Panel tabs*/ .panel-tabs { position: relative; bottom: 30px; clear:both; border-bottom: 1px solid transparent; } .panel-tabs > li { float: left; margin-bottom: -1px; } .panel-tabs > li > a { margin-right: 2px; margin-top: 4px; line-height: .85; border: 1px solid transparent; border-radius: 4px 4px 0 0; color: #ffffff; } .panel-tabs > li > a:hover { border-color: transparent; color: #ffffff; background-color: transparent; } .panel-tabs > li.active > a, .panel-tabs > li.active > a:hover, .panel-tabs > li.active > a:focus { color: #fff; cursor: default; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background-color: rgba(255,255,255, .23); border-bottom-color: transparent; }