---
categories: [Widgets]
layout: page
title: Forms
resource: true
---
<h2 id="left-aligned">Left-aligned labels</h2>
<h3 id="left-aligned_required-and-optional-fields">Required and Optional Fields</h3>
<form class="form-horizontal form-horizontal-pf-align-left required-pf" role="form">
  <p class="fields-status-pf">The fields marked with <span class="required-pf">*</span> are required.</p>
  <div class="form-group">
    <label class="col-sm-2 control-label required-pf" for="leftaligned1">Field One <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" data-html="true" title="" class="popover-pf-info" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <a href='#'>dolore magna aliqua</a>." data-placement="top"><span class="pficon pficon-info"></span></a></label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="leftaligned1" required>
    </div>
  </div>
  <div class="form-group">
    <label for="leftaligned2" class="col-sm-2 control-label">Field Two</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="leftaligned2">
    </div>
  </div>
  <div class="form-group">
    <label for="leftaligned3" class="col-sm-2 control-label required-pf">Field Three</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="leftaligned3" required>
    </div>
  </div>
  <div class="form-group">
    <label for="exampleInputFile" class="col-sm-2 control-label">File input</label>
    <div class="col-sm-10">
    <input type="file" id="exampleInputFile1">
    <p class="help-block">Example block-level help text here.</p>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default" disabled>Action</button>
    </div>
  </div>
</form>
<h3 id="left-aligned_all_fields_required">All fields required.</h3>
<form class="form-horizontal form-horizontal-pf-align-left" role="form">
  <p class="fields-status-pf">All fields are required.</p>
  <div class="form-group">
    <label class="col-sm-2 control-label" for="leftaligned4">Field One <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" data-html="true" title="" class="popover-pf-info" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <a href='#'>dolore magna aliqua</a>." data-placement="top"><span class="pficon pficon-info"></span></a></label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="leftaligned4" required>
    </div>
  </div>
  <div class="form-group">
    <label for="leftaligned5" class="col-sm-2 control-label">Field Two</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="leftaligned5" required>
    </div>
  </div>
  <div class="form-group">
    <label for="leftaligned6" class="col-sm-2 control-label">Field Three</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="leftaligned6" required>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default" disabled>Action</button>
    </div>
  </div>
</form>
      <h2 id="right-aligned">Right-aligned labels</h2>

      <h3 id="right-aligned_basic-form">Basic Form</h3>
      <form class="form-horizontal" role="form">
        <div class="form-group">
          <label for="inputEmail1" class="col-sm-2 control-label">Email</label>
          <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail1">
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword1" class="col-sm-2 control-label">Password</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword1">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
              <label>
                <input type="checkbox"> Remember me
              </label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Sign in</button>
          </div>
        </div>
      </form>

      <h3 id="right-aligned_all-fields-required">All Fields Required</h3>
      <form class="form-horizontal" role="form">
        <p class="fields-status-pf">All fields are required.</p>
        <div class="form-group">
          <label for="input1" class="col-sm-2 control-label">Field One</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="input1" required>
          </div>
        </div>
        <div class="form-group">
          <label for="input2" class="col-sm-2 control-label">Field Two</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="input2" required>
          </div>
        </div>
        <div class="form-group">
          <label for="input3" class="col-sm-2 control-label">Field Three</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="input3" required>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default" disabled>Action</button>
          </div>
        </div>
      </form>
      <h3 id="right-aligned_required-and-optional-fields">Required and Optional Fields</h3>
      <form class="form-horizontal" role="form">
        <p class="fields-status-pf">The fields marked with <span class="required-pf">*</span> are required.</p>
        <div class="form-group">
          <label class="col-sm-2 control-label required-pf" for="input4">Field One <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" data-html="true" title="" class="popover-pf-info" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <a href='#'>dolore magna aliqua</a>." data-placement="top"><span class="pficon pficon-info"></span></a></label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="input4" required>
          </div>
        </div>
        <div class="form-group">
          <label for="input5" class="col-sm-2 control-label">Field Two</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="input5">
          </div>
        </div>
        <div class="form-group">
          <label for="input6" class="col-sm-2 control-label required-pf">Field Three</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="input6" required>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default" disabled>Action</button>
          </div>
        </div>
      </form>

      <h3 id="right-aligned_all-fields-optional">All Fields Optional</h3>
      <form class="form-horizontal" role="form">
        <p class="fields-status-pf">All fields are optional.</p>
        <div class="form-group">
          <label for="input7" class="col-sm-2 control-label">Field One</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="input7">
          </div>
        </div>
        <div class="form-group">
          <label for="input8" class="col-sm-2 control-label">Field Two</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="input8">
          </div>
        </div>
        <div class="form-group">
          <label for="input9" class="col-sm-2 control-label">Field Three</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="input9">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Action</button>
          </div>
        </div>
      </form>

      <h3 id="right-aligned_error-feedback">Error Feedback</h3>
      {% include widgets/forms/input-validation-form.html id_default="exampleInput" id_disabled="exampleInputDisabled" id_error="exampleInputError" has_error=true %}

      <h2 id="top-aligned">Top-aligned labels</h2>

      <h3 id="top-aligned_basic-form">Basic Form</h3>
      <form role="form">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1">
        </div>
        <div class="form-group">
          <label for="exampleInputFile">File input</label>
          <input type="file" id="exampleInputFile">
          <p class="help-block">Example block-level help text here.</p>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox"> Check me out
          </label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>

      <h3 id="top-aligned_all-fields-required">All Fields Required</h3>
      <form role="form">
        <p class="fields-status-pf">All fields are required.</p>
        <div class="form-group">
          <label for="input10">Field One</label>
          <input type="text" class="form-control" id="input10" required>
        </div>
        <div class="form-group">
          <label for="input11">Field Two</label>
          <input type="text" class="form-control" id="input11" required>
        </div>
        <div class="form-group">
          <label for="input12">Field Three</label>
          <input type="text" class="form-control" id="input12" required>
        </div>
        <button type="submit" class="btn btn-default" disabled>Action</button>
      </form>

      <h3 id="top-aligned_required-and-optional-fields">Required and Optional Fields</h3>
      <form role="form" >
        <p class="fields-status-pf">The fields marked with <span class="required-pf">*</span> are required.</p>
        <div class="form-group">
          <label class="required-pf" for="input13">Field One <a tabindex="0" role="button" data-toggle="popover"  data-trigger="focus" data-html="true" title="" class="popover-pf-info" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <a href='#'>dolore magna aliqua</a>." data-placement="top"><span class="pficon pficon-info"></span></a></label>
          <input type="text" class="form-control" id="input13" required>
        </div>
        <div class="form-group">
          <label for="input14">Field Two</label>
          <input type="text" class="form-control" id="input14">
        </div>
        <div class="form-group">
          <label for="input15" class="required-pf">Field Three</label>
          <input type="text" class="form-control" id="input15" required>
        </div>
        <button type="submit" class="btn btn-default" disabled>Action</button>
      </form>

      <h3 id="top-aligned_all-fields-optional">All Fields Optional</h3>
      <form role="form">
        <p class="fields-status-pf">All fields are optional.</p>
        <div class="form-group">
          <label for="input16">Field One</label>
          <input type="text" class="form-control" id="input16">
        </div>
        <div class="form-group">
          <label for="input17">Field Two</label>
          <input type="text" class="form-control" id="input17">
        </div>
        <div class="form-group">
          <label for="input18">Field Three</label>
          <input type="text" class="form-control" id="input18">
        </div>
        <button type="submit" class="btn btn-default">Action</button>
      </form>

      <h2 id="inline-form">Inline Form</h2>
      <form class="form-inline" role="form">
        <div class="form-group">
          <label class="sr-only" for="exampleInputEmail2">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label class="sr-only" for="exampleInputPassword2">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox"> Remember me
          </label>
        </div>
        <button type="submit" class="btn btn-default">Sign in</button>
      </form>

      <h2 id="inside-a-modal">Inside a modal</h2>
      <!--
        Styles and example-pf div makes modal visible and posistion relative. It's intended for docs page.
        *Do not use in production*
      -->
      <style>
        .example-pf .modal{
          position: relative;
          top: auto;
          right: auto;
          bottom: auto;
          left: auto;
          z-index: 1;
          display: block;
        }
      </style>
      <div class="example-pf">
        {% include widgets/forms/input-validation-modal.html id_default="modalInput" id_disabled="modalInputDisabled" id_error="modalInputError" has_error=true %}
      </div>

      <h2 id="expand-collapse-section">Expand-Collapse Section</h2>
      <div class="example-pf">
        {% include widgets/forms/expand-collapse-section.html id_blueprintname="AdvOptBlueprintName" id_catalog="AdvOptCatalog" id_number="AdvOptNumber" id_entry1="AdvOptEntry1" id_entry2="AdvOptEntry2" id_entry3="AdvOptEntry3" id_fieldsection="AdvOptSection" is_modal=false col_size_label="2" col_size_field="10" %}
      </div>

      <h2 id="expand-collapse-section-inside-a-modal">Expand-Collapse Section inside a modal</h2>

      <button class="btn btn-default" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                <span class="pficon pficon-close"></span>
              </button>
              <h4 class="modal-title" id="myModalLabel">Edit Blueprint Details</h4>
            </div>
            <div class="modal-body">
              <div class="example-pf">
                {% include widgets/forms/expand-collapse-section.html id_blueprintname="AdvOptBlueprintNameMod" id_catalog="AdvOptCatalogMod" id_number="AdvOptNumberMod" id_entry1="AdvOptEntry1Mod" id_entry2="AdvOptEntry2Mod" id_entry3="AdvOptEntry3Mod" id_fieldsection="AdvOptSectionMod" is_modal=true col_size_label="3" col_size_field="9" %}
              </div>
            </div>
          </div>
        </div>
      </div>

      <h2 id="controls">Controls</h2>

      <input type="text" class="form-control" placeholder="Text input">
      <input type="password" class="form-control" placeholder="Text input">
      <input type="datetime" class="form-control" placeholder="Text input">
      <input type="datetime-local" class="form-control" placeholder="Text input">
      <input type="date" class="form-control" placeholder="Text input">
      <input type="month" class="form-control" placeholder="Text input">
      <input type="time" class="form-control" placeholder="Text input">
      <input type="week" class="form-control" placeholder="Text input">
      <input type="number" class="form-control" placeholder="Text input">
      <input type="email" class="form-control" placeholder="Text input">
      <input type="url" class="form-control" placeholder="Text input">
      <input type="search" class="form-control" placeholder="Text input">
      <input type="tel" class="form-control" placeholder="Text input">
      <input type="color" class="form-control" placeholder="Text input">
      <textarea class="form-control" rows="3"></textarea>
      <div class="checkbox">
        <label>
          <input type="checkbox" value="">
          Option one is this and that&mdash;be sure to include why it's great
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
          Option one is this and that&mdash;be sure to include why it's great
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
          Option two can be something else and selecting it will deselect option one
        </label>
      </div>
      <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
      </label>
      <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
      </label>
      <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
      </label>
      <select class="form-control">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
      <select multiple class="form-control">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>

      <h3 id="controls_count-remaining-characters">Count Remaining Characters Control</h3>
      <form>
        <div class="form-group">
          <label for="messageArea"></label>
          <textarea class="form-control" id="messageArea" name="text" placeholder="Type in your message" rows="5"></textarea>
        </div>
          <span class="pull-right chars-remaining-pf">
            <span id="charRemainingCntFld"></span>
            <button id="postBtn" type="submit" class="btn btn-default">Post New Message</button>
          </span>
      </form>
      <script>
        // countFld is the id of the field where you want the 'remaining chars. count' number
        // to be displayed.
        $('#messageArea').countRemainingChars( {countFld: 'charRemainingCntFld'} );

        // all settings/options
        // $('#messageArea').countRemainingChars( {countFld: 'charRemainingCntFld',
        //                                         charsMaxLimit: 20,
        //                                         charsWarnRemaining: 5,
        //                                         blockInputAtMaxLimit: true} );


        // taId is the id of the textArea field which triggered the event
        // Helpful if counting remaining chars on multiple TAs
        $('#messageArea').on("overCharsMaxLimitEvent", function( event, taId ) {
          $('#postBtn').prop("disabled",true);
        });
        $('#messageArea').on("underCharsMaxLimitEvent", function( event, taId) {
          $('#postBtn').prop("disabled",false);
        });
      </script><br>

      <h3 id="controls_static-controls">Static Control</h3>
      <form class="form-horizontal" role="form">
        <div class="form-group">
          <label class="col-lg-2 control-label">Email</label>
          <div class="col-lg-10">
            <p class="form-control-static">email@example.com</p>
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword" class="col-lg-2 control-label">Password</label>
          <div class="col-lg-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
          </div>
        </div>
      </form>

      <h3 id="controls_help-text">Help Text</h3>
      <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" placeholder="Username">
      </div>

      <h3 id="controls_control-sizing">Control Sizing</h3>
      <input class="form-control input-lg" type="text" placeholder=".input-lg">
      <input class="form-control" type="text" placeholder="Default input">
      <input class="form-control input-sm" type="text" placeholder=".input-sm">
      <select class="form-control input-lg">...</select>
      <select class="form-control">...</select>
      <select class="form-control input-sm">...</select>
      <div class="row">
        <div class="col-lg-2">
          <input type="text" class="form-control" placeholder=".col-lg-2">
        </div>
        <div class="col-lg-3">
          <input type="text" class="form-control" placeholder=".col-lg-3">
        </div>
        <div class="col-lg-4">
          <input type="text" class="form-control" placeholder=".col-lg-4">
        </div>
      </div>

      <h2 id="input-groups">Input Groups</h2>

      <h3 id="input-groups_basic-examples">Basic Example</h3>
      <div class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-addon">.00</span>
      </div>
      <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control">
        <span class="input-group-addon">.00</span>
      </div>

      <h3 id="input-groups_sizing">Sizing</h3>
      <div class="input-group input-group-lg">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control input-lg" placeholder="Username">
      </div>
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" placeholder="Username">
      </div>
      <div class="input-group input-group-sm">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" placeholder="Username">
      </div>

      <h3 id="input-groups_checkboxes-and-radio-addons">Checkboxes and radio addons</h3>
      <div class="row">
        <div class="col-lg-6">
          <div class="input-group">
            <span class="input-group-addon">
              <input type="checkbox">
            </span>
            <input type="text" class="form-control">
          </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
        <div class="col-lg-6">
          <div class="input-group">
            <span class="input-group-addon">
              <input type="radio">
            </span>
            <input type="text" class="form-control">
          </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
      </div><!-- /.row -->

      <h3 id="input-groups_button-addons">Button addons</h3>
      <div class="row">
        <div class="col-lg-6">
          <div class="input-group">
            <span class="input-group-btn">
              <button class="btn btn-default" type="button">Go!</button>
            </span>
            <input type="text" class="form-control">
          </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
        <div class="col-lg-6">
          <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-btn">
              <button class="btn btn-default" type="button">Go!</button>
            </span>
          </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
      </div><!-- /.row -->

      <h3 id="input-groups_buttons-with-dropdowns">Buttons with dropdowns</h3>
      <div class="row">
        <div class="col-lg-6">
          <div class="input-group">
            <div class="input-group-btn">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div><!-- /btn-group -->
            <input type="text" class="form-control">
          </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
        <div class="col-lg-6">
          <div class="input-group">
            <input type="text" class="form-control">
            <div class="input-group-btn">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
              <ul class="dropdown-menu pull-right">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div><!-- /btn-group -->
          </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
      </div><!-- /.row -->

      <h3 id="input-groups_segmented-buttons">Segmented buttons</h3>
      <form class="bs-example bs-example-form" role="form">
        <div class="row">
          <div class="col-lg-6">
            <div class="input-group">
              <div class="input-group-btn">
                <button type="button" class="btn btn-default" tabindex="-1">Action</button>
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div>
              <input type="text" class="form-control">
            </div><!-- /.input-group -->
          </div><!-- /.col-lg-6 -->
          <div class="col-lg-6">
            <div class="input-group">
              <input type="text" class="form-control">
              <div class="input-group-btn">
                <button type="button" class="btn btn-default" tabindex="-1">Action</button>
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu pull-right" role="menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div>
            </div><!-- /.input-group -->
          </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
      </form>

      <h2 id="form-states">Form States</h2>
      <input class="form-control" id="focusedInput" type="text" value="This is focused...">
      <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
      <form class="form-inline" role="form">
        <fieldset disabled>
          <div class="form-group">
            <label for="disabledTextInput">Disabled input</label>
            <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
          </div>
          <div class="form-group">
            <label for="disabledSelect">Disabled select menu</label>
            <select id="disabledSelect" class="form-control">
              <option>Disabled select</option>
            </select>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox"> Can't check this
            </label>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </fieldset>
      </form>
      <div class="form-group has-success">
        <label class="control-label" for="inputSuccess">Input with success</label>
        <input type="text" class="form-control" id="inputSuccess">
      </div>
      <div class="form-group has-success">
        <label class="control-label" for="selectSuccess">Select with success</label>
        <select class="form-control" id="selectSuccess">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>
      <div class="form-group has-warning">
        <label class="control-label" for="inputWarning">Input with warning</label>
        <input type="text" class="form-control" id="inputWarning">
      </div>
      <div class="form-group has-warning">
        <label class="control-label" for="selectWarning">Select with warning</label>
        <select class="form-control" id="selectWarning">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>
      <div class="form-group has-error">
        <label class="control-label" for="inputError">Input with error</label>
        <input type="text" class="form-control" id="inputError2">
      </div>
      <div class="form-group has-error">
        <label class="control-label" for="selectError">Select with error</label>
        <select class="form-control" id="selectError">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>
      <script>
        // Initialize Popovers
        $(document).ready(function() {
          $('[data-toggle=popover]').popovers()
            .on('hidden.bs.popover', function (e) {
              $(e.target).data('bs.popover').inState.click = false;
            });
        });
      </script>