<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Form Name</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Name</label> <div class="col-md-6"> <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="color">Color</label> <div class="col-md-6"> <input id="color" name="color" type="text" placeholder="#F0F0F0" class="form-control input-md"> </div> </div> <!-- Appended Input--> <div class="form-group"> <label class="col-md-4 control-label" for="account">Choose Account</label> <div class="col-md-6"> <div class="input-group"> <input id="account" name="account" class="form-control" placeholder="Alan Francis" type="text"> <span class="input-group-addon">+Add Account</span> </div> </div> </div> <!-- Appended Input--> <div class="form-group"> <label class="col-md-4 control-label" for="apikey">API Key</label> <div class="col-md-6"> <div class="input-group"> <input id="apikey" name="apikey" class="form-control" placeholder="QWERTYUIOASDFGHJXCVBNMZXZ567" type="text"> <span class="input-group-addon">Test</span> </div> <p class="help-block">help</p> </div> </div> <!-- Multiple Checkboxes (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="notification"></label> <div class="col-md-4"> <label class="checkbox-inline" for="notification-0"> <input type="checkbox" name="notification" id="notification-0" value="1"> Enable Notification </label> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="threshold">If</label> <div class="col-md-4"> <select id="threshold" name="threshold" class="form-control"> <option value="1">Threshold Attribute</option> <option value="2">Threshold Attribute2</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="comparison"></label> <div class="col-md-4"> <select id="comparison" name="comparison" class="form-control"> <option value="GT">Greater than</option> <option value="LT">Less than</option> <option value="GET">Greater or equal to</option> <option value="LET">Less than or equal to</option> <option value="ET">equal to</option> <option value="NET">not equal to</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="thresholdvalue"></label> <div class="col-md-4"> <input id="thresholdvalue" name="thresholdvalue" type="text" placeholder="threshold value" class="form-control input-md"> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="notifymode">Notify Using</label> <div class="col-md-6"> <select id="notifymode" name="notifymode" class="form-control"> <option value="email">Email</option> <option value="sms">SMS</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="email">e-mail ID</label> <div class="col-md-6"> <input id="email" name="email" type="text" placeholder="name@domain.com" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="sms">SMS</label> <div class="col-md-6"> <input id="sms" name="sms" type="text" placeholder="+919829839832" class="form-control input-md"> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="reqType">Request Type</label> <div class="col-md-4"> <label class="radio-inline" for="reqType-0"> <input type="radio" name="reqType" id="reqType-0" value="post" checked="checked"> POST </label> <label class="radio-inline" for="reqType-1"> <input type="radio" name="reqType" id="reqType-1" value="get"> GET </label> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="dataFormat">Data Format</label> <div class="col-md-4"> <label class="radio-inline" for="dataFormat-0"> <input type="radio" name="dataFormat" id="dataFormat-0" value="json" checked="checked"> JSON </label> <label class="radio-inline" for="dataFormat-1"> <input type="radio" name="dataFormat" id="dataFormat-1" value="xml"> XML </label> </div> </div> <!-- Multiple Checkboxes (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="appendUrlParams"></label> <div class="col-md-4"> <label class="checkbox-inline" for="appendUrlParams-0"> <input type="checkbox" name="appendUrlParams" id="appendUrlParams-0" value="1"> Append URL Params </label> </div> </div> <!-- Button (Double) --> <div class="form-group"> <label class="col-md-4 control-label" for="submitButton"></label> <div class="col-md-8"> <button id="submitButton" name="submitButton" class="btn btn-success">Save</button> <button id="cancel" name="cancel" class="btn btn-inverse">Cancel</button> </div> </div> </fieldset> </form> </div> </div>