Rearrange forms content

diff --git a/docs/css.html b/docs/css.html
index 0c1322a4ee3dbd1f03db5f26802d8a29aa9371b2..051290dc955c076c820c2cc623782d817520a25a 100644 (file)
--- a/docs/css.html
+++ b/docs/css.html
@@ -1267,6 +1267,125 @@ For example, <code><section></code> should be wrapped
 </pre>
 
 
+
+          <h2>Form control states</h2>
+          <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
+
+          <h3 id="forms-input-focus">Input focus</h3>
+          <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
+          <form class="bs-docs-example form-inline">
+            <input class="focused" id="focusedInput" type="text" value="This is focused...">
+          </form>
+<pre class="prettyprint linenums">
+&lt;input id="focusedInput" type="text" value="This is focused..."&gt;
+</pre>
+
+          <h3 id="forms-invalid-inputs">Invalid inputs</h3>
+          <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
+          <form class="bs-docs-example form-inline">
+            <input class="span3" type="email" placeholder="test@example.com" required>
+          </form>
+<pre class="prettyprint linenums">
+&lt;input class="span3" type="email" required&gt;
+</pre>
+
+          <h3 id="forms-disabled-inputs">Disabled inputs</h3>
+          <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
+          <form class="bs-docs-example form-inline">
+            <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
+          </form>
+<pre class="prettyprint linenums">
+&lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&gt;
+</pre>
+
+          <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
+          <p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once. Link buttons (with the <code>&lt;a&gt;</code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
+          <form class="bs-docs-example form-inline">
+            <fieldset disabled>
+              <div>
+                <input type="text" class="span4" placeholder="Disabled input">
+              </div>
+              <div>
+                <select class="span4">
+                  <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>
+<pre class="prettyprint linenums">
+&lt;form class="form-inline"&gt;
+  &lt;fieldset disabled&gt;
+    &lt;input type="text" class="span4" placeholder="Disabled input"&gt;
+    &lt;select class="span4"&gt;
+      &lt;option&gt;Disabled select&lt;/option&gt;
+    &lt;/select&gt;
+    &lt;div class="checkbox"&gt;
+      &lt;label&gt;
+        &lt;input type="checkbox"&gt; Can't check this
+      &lt;/label&gt;
+    &lt;/div&gt;
+    &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+</pre>
+
+          <h3 id="forms-validation">Validation states</h3>
+          <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
+          <ul>
+            <li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li>
+            <li>Add .input-with-feedback to the field(s) in question</li>
+          </ul>
+          <p>Validation styles are applied on a per-input basis. With horizontal forms, the <code>&lt;label class="control-label"&gt;</code> will always be styled.</p>
+
+          <form class="bs-docs-example form-horizontal">
+            <div class="control-group has-warning">
+              <label class="control-label" for="inputWarning">Input with warning</label>
+              <div class="controls">
+                <input type="text" class="input-with-feedback" id="inputWarning">
+              </div>
+            </div>
+            <div class="control-group has-error">
+              <label class="control-label" for="inputError">Input with error</label>
+              <div class="controls">
+                <input type="text" class="input-with-feedback" id="inputError">
+              </div>
+            </div>
+            <div class="control-group has-success">
+              <label class="control-label" for="inputSuccess">Input with success</label>
+              <div class="controls">
+                <input type="text" class="input-with-feedback" id="inputSuccess">
+              </div>
+            </div>
+          </form>
+<pre class="prettyprint linenums">
+&lt;div class="control-group has-warning"&gt;
+  &lt;label class="control-label" for="inputWarning"&gt;Input with warning&lt;/label&gt;
+  &lt;div class="controls"&gt;
+    &lt;input type="text" class="input-with-feedback" id="inputWarning"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="control-group has-error"&gt;
+  &lt;label class="control-label" for="inputError"&gt;Input with error&lt;/label&gt;
+  &lt;div class="controls"&gt;
+    &lt;input type="text" class="input-with-feedback" id="inputError"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="control-group has-success"&gt;
+  &lt;label class="control-label" for="inputSuccess"&gt;Input with success&lt;/label&gt;
+  &lt;div class="controls"&gt;
+    &lt;input type="text" class="input-with-feedback id="inputSuccess""&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+
+
           <h2 id="forms-extending">Extending form controls</h2>
           <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
 
@@ -1341,7 +1460,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
 &lt;/div&gt;
 </pre>
 
-
           <h4>Buttons instead of text</h4>
           <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
           <form class="bs-docs-example">
@@ -1616,123 +1734,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
 &lt;input type="text"&gt;&lt;span class="help-block"&gt;A longer block of help text that breaks onto a new line and may extend beyond one line.&lt;/span&gt;
 </pre>
 
-
-          <h2>Form control states</h2>
-          <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
-
-          <h3 id="forms-input-focus">Input focus</h3>
-          <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
-          <form class="bs-docs-example form-inline">
-            <input class="focused" id="focusedInput" type="text" value="This is focused...">
-          </form>
-<pre class="prettyprint linenums">
-&lt;input id="focusedInput" type="text" value="This is focused..."&gt;
-</pre>
-
-          <h3 id="forms-invalid-inputs">Invalid inputs</h3>
-          <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
-          <form class="bs-docs-example form-inline">
-            <input class="span3" type="email" placeholder="test@example.com" required>
-          </form>
-<pre class="prettyprint linenums">
-&lt;input class="span3" type="email" required&gt;
-</pre>
-
-          <h3 id="forms-disabled-inputs">Disabled inputs</h3>
-          <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
-          <form class="bs-docs-example form-inline">
-            <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
-          </form>
-<pre class="prettyprint linenums">
-&lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&gt;
-</pre>
-
-          <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
-          <p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once. Link buttons (with the <code>&lt;a&gt;</code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
-          <form class="bs-docs-example form-inline">
-            <fieldset disabled>
-              <div>
-                <input type="text" class="span4" placeholder="Disabled input">
-              </div>
-              <div>
-                <select class="span4">
-                  <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>
-<pre class="prettyprint linenums">
-&lt;form class="form-inline"&gt;
-  &lt;fieldset disabled&gt;
-    &lt;input type="text" class="span4" placeholder="Disabled input"&gt;
-    &lt;select class="span4"&gt;
-      &lt;option&gt;Disabled select&lt;/option&gt;
-    &lt;/select&gt;
-    &lt;div class="checkbox"&gt;
-      &lt;label&gt;
-        &lt;input type="checkbox"&gt; Can't check this
-      &lt;/label&gt;
-    &lt;/div&gt;
-    &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
-  &lt;/fieldset&gt;
-&lt;/form&gt;
-</pre>
-
-          <h3 id="forms-validation">Validation states</h3>
-          <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
-          <ul>
-            <li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li>
-            <li>Add .input-with-feedback to the field(s) in question</li>
-          </ul>
-          <p>Validation styles are applied on a per-input basis. With horizontal forms, the <code>&lt;label class="control-label"&gt;</code> will always be styled.</p>
-
-          <form class="bs-docs-example form-horizontal">
-            <div class="control-group has-warning">
-              <label class="control-label" for="inputWarning">Input with warning</label>
-              <div class="controls">
-                <input type="text" class="input-with-feedback" id="inputWarning">
-              </div>
-            </div>
-            <div class="control-group has-error">
-              <label class="control-label" for="inputError">Input with error</label>
-              <div class="controls">
-                <input type="text" class="input-with-feedback" id="inputError">
-              </div>
-            </div>
-            <div class="control-group has-success">
-              <label class="control-label" for="inputSuccess">Input with success</label>
-              <div class="controls">
-                <input type="text" class="input-with-feedback" id="inputSuccess">
-              </div>
-            </div>
-          </form>
-<pre class="prettyprint linenums">
-&lt;div class="control-group has-warning"&gt;
-  &lt;label class="control-label" for="inputWarning"&gt;Input with warning&lt;/label&gt;
-  &lt;div class="controls"&gt;
-    &lt;input type="text" class="input-with-feedback" id="inputWarning"&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-&lt;div class="control-group has-error"&gt;
-  &lt;label class="control-label" for="inputError"&gt;Input with error&lt;/label&gt;
-  &lt;div class="controls"&gt;
-    &lt;input type="text" class="input-with-feedback" id="inputError"&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-&lt;div class="control-group has-success"&gt;
-  &lt;label class="control-label" for="inputSuccess"&gt;Input with success&lt;/label&gt;
-  &lt;div class="controls"&gt;
-    &lt;input type="text" class="input-with-feedback id="inputSuccess""&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
         </section>
 
 

diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache
index 64d5005a574f9f33b87e5ac6c9a099d2005353b1..b9182c28a351e179d13d7293c08dff8ffd6e031b 100644 (file)
--- a/docs/templates/pages/css.mustache
+++ b/docs/templates/pages/css.mustache
@@ -1207,6 +1207,125 @@ For example, <code><section></code> should be wrapped
 </pre>
 
 
+
+          <h2>Form control states</h2>
+          <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
+
+          <h3 id="forms-input-focus">Input focus</h3>
+          <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
+          <form class="bs-docs-example form-inline">
+            <input class="focused" id="focusedInput" type="text" value="This is focused...">
+          </form>
+<pre class="prettyprint linenums">
+&lt;input id="focusedInput" type="text" value="This is focused..."&gt;
+</pre>
+
+          <h3 id="forms-invalid-inputs">Invalid inputs</h3>
+          <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
+          <form class="bs-docs-example form-inline">
+            <input class="span3" type="email" placeholder="test@example.com" required>
+          </form>
+<pre class="prettyprint linenums">
+&lt;input class="span3" type="email" required&gt;
+</pre>
+
+          <h3 id="forms-disabled-inputs">Disabled inputs</h3>
+          <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
+          <form class="bs-docs-example form-inline">
+            <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
+          </form>
+<pre class="prettyprint linenums">
+&lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&gt;
+</pre>
+
+          <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
+          <p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once. Link buttons (with the <code>&lt;a&gt;</code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
+          <form class="bs-docs-example form-inline">
+            <fieldset disabled>
+              <div>
+                <input type="text" class="span4" placeholder="Disabled input">
+              </div>
+              <div>
+                <select class="span4">
+                  <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>
+<pre class="prettyprint linenums">
+&lt;form class="form-inline"&gt;
+  &lt;fieldset disabled&gt;
+    &lt;input type="text" class="span4" placeholder="Disabled input"&gt;
+    &lt;select class="span4"&gt;
+      &lt;option&gt;Disabled select&lt;/option&gt;
+    &lt;/select&gt;
+    &lt;div class="checkbox"&gt;
+      &lt;label&gt;
+        &lt;input type="checkbox"&gt; Can't check this
+      &lt;/label&gt;
+    &lt;/div&gt;
+    &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+</pre>
+
+          <h3 id="forms-validation">Validation states</h3>
+          <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
+          <ul>
+            <li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li>
+            <li>Add .input-with-feedback to the field(s) in question</li>
+          </ul>
+          <p>Validation styles are applied on a per-input basis. With horizontal forms, the <code>&lt;label class="control-label"&gt;</code> will always be styled.</p>
+
+          <form class="bs-docs-example form-horizontal">
+            <div class="control-group has-warning">
+              <label class="control-label" for="inputWarning">Input with warning</label>
+              <div class="controls">
+                <input type="text" class="input-with-feedback" id="inputWarning">
+              </div>
+            </div>
+            <div class="control-group has-error">
+              <label class="control-label" for="inputError">Input with error</label>
+              <div class="controls">
+                <input type="text" class="input-with-feedback" id="inputError">
+              </div>
+            </div>
+            <div class="control-group has-success">
+              <label class="control-label" for="inputSuccess">Input with success</label>
+              <div class="controls">
+                <input type="text" class="input-with-feedback" id="inputSuccess">
+              </div>
+            </div>
+          </form>
+<pre class="prettyprint linenums">
+&lt;div class="control-group has-warning"&gt;
+  &lt;label class="control-label" for="inputWarning"&gt;Input with warning&lt;/label&gt;
+  &lt;div class="controls"&gt;
+    &lt;input type="text" class="input-with-feedback" id="inputWarning"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="control-group has-error"&gt;
+  &lt;label class="control-label" for="inputError"&gt;Input with error&lt;/label&gt;
+  &lt;div class="controls"&gt;
+    &lt;input type="text" class="input-with-feedback" id="inputError"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="control-group has-success"&gt;
+  &lt;label class="control-label" for="inputSuccess"&gt;Input with success&lt;/label&gt;
+  &lt;div class="controls"&gt;
+    &lt;input type="text" class="input-with-feedback id="inputSuccess""&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+
+
           <h2 id="forms-extending">Extending form controls</h2>
           <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
 
@@ -1281,7 +1400,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
 &lt;/div&gt;
 </pre>
 
-
           <h4>Buttons instead of text</h4>
           <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
           <form class="bs-docs-example">
@@ -1556,123 +1674,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
 &lt;input type="text"&gt;&lt;span class="help-block"&gt;A longer block of help text that breaks onto a new line and may extend beyond one line.&lt;/span&gt;
 </pre>
 
-
-          <h2>Form control states</h2>
-          <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
-
-          <h3 id="forms-input-focus">Input focus</h3>
-          <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
-          <form class="bs-docs-example form-inline">
-            <input class="focused" id="focusedInput" type="text" value="This is focused...">
-          </form>
-<pre class="prettyprint linenums">
-&lt;input id="focusedInput" type="text" value="This is focused..."&gt;
-</pre>
-
-          <h3 id="forms-invalid-inputs">Invalid inputs</h3>
-          <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
-          <form class="bs-docs-example form-inline">
-            <input class="span3" type="email" placeholder="test@example.com" required>
-          </form>
-<pre class="prettyprint linenums">
-&lt;input class="span3" type="email" required&gt;
-</pre>
-
-          <h3 id="forms-disabled-inputs">Disabled inputs</h3>
-          <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
-          <form class="bs-docs-example form-inline">
-            <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
-          </form>
-<pre class="prettyprint linenums">
-&lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&gt;
-</pre>
-
-          <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
-          <p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once. Link buttons (with the <code>&lt;a&gt;</code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
-          <form class="bs-docs-example form-inline">
-            <fieldset disabled>
-              <div>
-                <input type="text" class="span4" placeholder="Disabled input">
-              </div>
-              <div>
-                <select class="span4">
-                  <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>
-<pre class="prettyprint linenums">
-&lt;form class="form-inline"&gt;
-  &lt;fieldset disabled&gt;
-    &lt;input type="text" class="span4" placeholder="Disabled input"&gt;
-    &lt;select class="span4"&gt;
-      &lt;option&gt;Disabled select&lt;/option&gt;
-    &lt;/select&gt;
-    &lt;div class="checkbox"&gt;
-      &lt;label&gt;
-        &lt;input type="checkbox"&gt; Can't check this
-      &lt;/label&gt;
-    &lt;/div&gt;
-    &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
-  &lt;/fieldset&gt;
-&lt;/form&gt;
-</pre>
-
-          <h3 id="forms-validation">Validation states</h3>
-          <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
-          <ul>
-            <li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li>
-            <li>Add .input-with-feedback to the field(s) in question</li>
-          </ul>
-          <p>Validation styles are applied on a per-input basis. With horizontal forms, the <code>&lt;label class="control-label"&gt;</code> will always be styled.</p>
-
-          <form class="bs-docs-example form-horizontal">
-            <div class="control-group has-warning">
-              <label class="control-label" for="inputWarning">Input with warning</label>
-              <div class="controls">
-                <input type="text" class="input-with-feedback" id="inputWarning">
-              </div>
-            </div>
-            <div class="control-group has-error">
-              <label class="control-label" for="inputError">Input with error</label>
-              <div class="controls">
-                <input type="text" class="input-with-feedback" id="inputError">
-              </div>
-            </div>
-            <div class="control-group has-success">
-              <label class="control-label" for="inputSuccess">Input with success</label>
-              <div class="controls">
-                <input type="text" class="input-with-feedback" id="inputSuccess">
-              </div>
-            </div>
-          </form>
-<pre class="prettyprint linenums">
-&lt;div class="control-group has-warning"&gt;
-  &lt;label class="control-label" for="inputWarning"&gt;Input with warning&lt;/label&gt;
-  &lt;div class="controls"&gt;
-    &lt;input type="text" class="input-with-feedback" id="inputWarning"&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-&lt;div class="control-group has-error"&gt;
-  &lt;label class="control-label" for="inputError"&gt;Input with error&lt;/label&gt;
-  &lt;div class="controls"&gt;
-    &lt;input type="text" class="input-with-feedback" id="inputError"&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-&lt;div class="control-group has-success"&gt;
-  &lt;label class="control-label" for="inputSuccess"&gt;Input with success&lt;/label&gt;
-  &lt;div class="controls"&gt;
-    &lt;input type="text" class="input-with-feedback id="inputSuccess""&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
         </section>